/* =========================================================
   NYXEM — nyxemtech.ro
   ========================================================= */

:root {
  --bg: #04050a;
  --bg-2: #070912;
  --bg-3: #0b0f1c;
  --ink: #e9edf7;
  --ink-2: #aab3cc;
  --muted: #6c7590;
  --line: rgba(140, 170, 255, .10);
  --line-2: rgba(140, 170, 255, .18);
  --cyan: #2ef2ff;
  --violet: #8b5cff;
  --pink: #ff4fd8;
  --green: #3dffa2;
  --red: #ff6b88;
  --grad: linear-gradient(100deg, var(--cyan) 0%, #7fb0ff 50%, var(--violet) 100%);

  --f-display: 'Unbounded', 'Segoe UI', system-ui, sans-serif;
  --f-body: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --pad: clamp(16px, 4vw, 56px);
  --maxw: 1360px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --chip: clamp(210px, 21vw, 300px);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--bg);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 80px;
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
html.is-loading { overflow: hidden; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
@supports (overflow-x: clip) { body { overflow-x: clip; } }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p { margin: 0; }
::selection { background: rgba(46, 242, 255, .3); color: #fff; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.section { position: relative; padding: clamp(100px, 13vw, 190px) 0; }

.led {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(61, 255, 162, .14), 0 0 12px var(--green);
  animation: blink 2.4s infinite;
  flex: none;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ambient light orbs */
.orb {
  position: absolute;
  width: 60vw; height: 60vw;
  max-width: 900px; max-height: 900px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: .5;
}
.orb--cyan { background: radial-gradient(circle, rgba(46, 242, 255, .16), transparent 62%); }
.orb--violet { background: radial-gradient(circle, rgba(139, 92, 255, .2), transparent 62%); }
.about .orb { right: -20vw; top: -10%; }
.services .orb { left: 30%; top: 10%; }
.orb--left { left: -25vw; top: 20%; }
.orb--right { right: -25vw; bottom: -20%; }

/* film grain */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 90;
  pointer-events: none;
  opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -1%); }
  80% { transform: translate(3%, 3%); }
  100% { transform: translate(0, 0); }
}

/* ---------- typography ---------- */
.label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cyan);
}
.label__idx { color: var(--muted); }
.label__bar { width: 38px; height: 1px; background: linear-gradient(90deg, var(--cyan), transparent); }
.h2 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(2rem, 4.3vw, 4.1rem);
  line-height: 1.06;
  letter-spacing: -.035em;
  margin-top: 22px;
}
.h2--xl { font-size: clamp(2.3rem, 5.4vw, 5.2rem); }
.lead {
  margin-top: 26px;
  max-width: 34em;
  font-size: clamp(1.02rem, 1.25vw, 1.18rem);
  color: var(--ink-2);
}
.scr { color: var(--cyan); opacity: .8; }

/* split headings */
.split .sl { display: block; }
.split .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: .06em .04em .14em;
  margin: -.06em -.04em -.14em;
}
.split .w__i { display: inline-block; will-change: transform; }
.split .accent .w__i {
  background: linear-gradient(100deg, var(--cyan) 0%, #9fd0ff 30%, #ffffff 42%, #9fb8ff 54%, var(--violet) 100%);
  background-size: 240% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: sheen 7s ease-in-out infinite;
}
@keyframes sheen { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0% 0; } }
.motion .split .w__i {
  transform: translateY(115%) rotate(4deg);
  transform-origin: 0 100%;
  transition: transform 1.15s var(--ease);
  transition-delay: calc(var(--wi, 0) * 55ms);
}
.motion .split.is-in .w__i { transform: none; }
.motion .split.no-tr .w__i { transition: none !important; }

/* generic reveal */
.motion [data-reveal] {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 1s var(--ease), transform 1.2s var(--ease);
  transition-delay: calc(var(--rd, 0) * 1ms);
}
.motion [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 56px;
  padding: 0 28px;
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  isolation: isolate;
  overflow: hidden;
  transition: box-shadow .4s, border-color .4s, background-color .4s, color .4s;
}
.btn--sm { height: 42px; padding: 0 20px; font-size: 12px; }
.btn--primary {
  color: #03040a;
  background: var(--grad);
  box-shadow: 0 0 0 1px rgba(46, 242, 255, .5), 0 12px 40px -12px rgba(46, 242, 255, .7);
}
.btn--primary::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .75) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .9s var(--ease);
}
.btn--primary:hover::before { transform: translateX(120%); }
.btn--primary:hover { box-shadow: 0 0 0 1px rgba(46, 242, 255, .8), 0 16px 60px -10px rgba(46, 242, 255, .9); }
.btn--ghost {
  color: var(--ink);
  border: 1px solid var(--line-2);
  background: rgba(10, 13, 24, .45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.btn--ghost:hover { border-color: rgba(46, 242, 255, .6); box-shadow: inset 0 0 24px -6px rgba(46, 242, 255, .45), 0 0 30px -10px rgba(46, 242, 255, .6); }
.btn__arrow { width: 18px; height: 18px; transition: transform .5s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* ---------- custom cursor ---------- */
.cursor { display: none; }
.has-cursor .cursor { display: block; }
.has-cursor, .has-cursor a, .has-cursor button, .has-cursor label { cursor: none; }
.has-cursor input, .has-cursor textarea { cursor: text; }
.cursor__dot, .cursor__ring {
  position: fixed;
  left: 0; top: 0;
  z-index: 200;
  pointer-events: none;
  border-radius: 50%;
}
.cursor__dot {
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan);
}
.cursor__ring {
  width: 40px; height: 40px;
  margin: -20px 0 0 -20px;
  border: 1px solid rgba(46, 242, 255, .45);
  transition: width .4s var(--ease), height .4s var(--ease), margin .4s var(--ease), border-color .3s, background-color .3s, opacity .3s;
}
.cursor.is-hover .cursor__ring {
  width: 70px; height: 70px;
  margin: -35px 0 0 -35px;
  border-color: var(--cyan);
  background: rgba(46, 242, 255, .07);
}
.cursor.is-text .cursor__ring { opacity: 0; }
.cursor.is-down .cursor__ring { width: 28px; height: 28px; margin: -14px 0 0 -14px; }
.cursor.is-hidden { opacity: 0; }

/* ---------- preloader ---------- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: none;
  place-items: center;
  cursor: pointer;
}
.js .preloader { display: grid; animation: preloaderFailsafe .01s linear 7s forwards; }
@keyframes preloaderFailsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }
.preloader__shutter { position: absolute; left: 0; right: 0; height: 50.5%; background: var(--bg); }
.preloader__shutter--top { top: 0; }
.preloader__shutter--bottom { bottom: 0; }
.preloader__flash {
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 2px;
  margin-top: -1px;
  background: linear-gradient(90deg, transparent, var(--cyan) 20%, #fff 50%, var(--cyan) 80%, transparent);
  box-shadow: 0 0 20px var(--cyan), 0 0 60px var(--cyan);
  transform: scaleX(0);
}
.preloader__inner { position: relative; width: min(380px, 82vw); }
.preloader__logo { width: 58px; height: 58px; color: var(--cyan); margin-bottom: 28px; filter: drop-shadow(0 0 12px rgba(46, 242, 255, .7)); }
.preloader__logo path, .preloader__logo circle {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: drawIn 1.3s var(--ease) forwards;
}
.preloader__logo circle { animation-delay: .5s; }
@keyframes drawIn { to { stroke-dashoffset: 0; } }
.preloader__log {
  min-height: calc(5 * 1.95em);
  font-family: var(--f-mono);
  font-size: 11.5px;
  line-height: 1.95;
  color: var(--muted);
}
.preloader__log .ln { display: flex; gap: 8px; white-space: nowrap; overflow: hidden; }
.preloader__log .ln span { flex: none; }
.preloader__log .ln .dots { flex: 1; overflow: hidden; color: rgba(140, 170, 255, .25); }
.preloader__log .ln b { font-weight: 500; color: var(--green); }
.preloader__bar { margin-top: 18px; height: 2px; background: var(--line); overflow: hidden; }
.preloader__bar span {
  display: block;
  height: 100%;
  background: var(--grad);
  transform-origin: left;
  transform: scaleX(0);
  box-shadow: 0 0 12px var(--cyan);
}
.preloader__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 12px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--muted);
}
.preloader__pct { font-family: var(--f-display); font-size: 40px; letter-spacing: -.02em; color: var(--ink); }

/* ---------- nav ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px var(--pad);
  transition: transform .6s var(--ease), background-color .4s, padding .4s, border-color .4s;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  padding-top: 12px;
  padding-bottom: 12px;
  background: rgba(4, 5, 10, .62);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--line);
}
.nav.is-hidden { transform: translateY(-110%); }
.motion .nav { opacity: 0; transform: translateY(-20px); transition: opacity 1s var(--ease), transform .8s var(--ease), background-color .4s, padding .4s, border-color .4s; }
.motion .nav.is-in { opacity: 1; transform: none; }
.motion .nav.is-in.is-hidden { transform: translateY(-110%); }

.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand__mark { width: 30px; height: 30px; color: var(--cyan); filter: drop-shadow(0 0 8px rgba(46, 242, 255, .65)); }
.brand__word { font-family: var(--f-display); font-weight: 600; font-size: 17px; letter-spacing: .24em; }

.nav__links {
  display: flex;
  gap: 2px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(8, 10, 18, .45);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.nav__links a {
  position: relative;
  padding: 8px 16px;
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
  transition: color .3s, background-color .3s, box-shadow .3s;
}
.nav__links a:hover { color: var(--ink); }
.nav__links a.is-active {
  color: var(--ink);
  background: rgba(46, 242, 255, .1);
  box-shadow: inset 0 0 0 1px rgba(46, 242, 255, .35);
}
.nav__right { display: flex; align-items: center; gap: 12px; }
.nav__progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; overflow: hidden; }
.nav__progress span {
  display: block;
  height: 100%;
  background: var(--grad);
  transform-origin: left;
  transform: scaleX(0);
  box-shadow: 0 0 10px var(--cyan);
}

/* Not ".lang": WordPress plugins such as CookieAdmin overwrite elements whose class matches their own setting names. */
.lang-switch {
  position: relative;
  display: inline-flex;
  padding: 4px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: rgba(8, 10, 18, .55);
}
.lang-switch button {
  position: relative;
  z-index: 1;
  width: 40px; height: 32px;
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--muted);
  transition: color .35s;
}
.lang-switch button:hover { color: var(--ink); }
.lang-switch button[aria-pressed="true"] { color: #03040a; }
.lang-switch__thumb {
  position: absolute;
  top: 4px; left: 4px;
  width: 40px; height: 32px;
  border-radius: 999px;
  background: var(--cyan);
  box-shadow: 0 0 18px rgba(46, 242, 255, .6);
  transition: transform .55s var(--ease);
}
.lang-switch[data-active="ro"] .lang-switch__thumb { transform: translateX(40px); }

.burger { display: none; position: relative; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); }
.burger span {
  position: absolute;
  left: 13px; right: 13px;
  height: 1.5px;
  background: var(--ink);
  transition: transform .5s var(--ease), top .5s var(--ease);
}
.burger span:nth-child(1) { top: 18px; }
.burger span:nth-child(2) { top: 25px; }
.menu-open .burger span:nth-child(1) { top: 21.5px; transform: rotate(45deg); }
.menu-open .burger span:nth-child(2) { top: 21.5px; transform: rotate(-45deg); }

.menu {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 110px var(--pad) 36px;
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(46, 242, 255, .1), transparent 60%),
    rgba(4, 5, 10, .97);
  clip-path: circle(0% at calc(100% - 44px) 42px);
  visibility: hidden;
  transition: clip-path .9s var(--ease), visibility 0s .9s;
}
.menu-open .menu { clip-path: circle(150% at calc(100% - 44px) 42px); visibility: visible; transition: clip-path .9s var(--ease), visibility 0s 0s; }
.menu__links { display: flex; flex-direction: column; gap: 6px; }
.menu__links a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  font-family: var(--f-display);
  font-size: clamp(2rem, 9vw, 3.2rem);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.25;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .6s var(--ease), transform .8s var(--ease);
}
.menu__links a small { font-family: var(--f-mono); font-size: 12px; color: var(--cyan); letter-spacing: .1em; }
.menu-open .menu__links a { opacity: 1; transform: none; }
.menu-open .menu__links a:nth-child(1) { transition-delay: .15s; }
.menu-open .menu__links a:nth-child(2) { transition-delay: .2s; }
.menu-open .menu__links a:nth-child(3) { transition-delay: .25s; }
.menu-open .menu__links a:nth-child(4) { transition-delay: .3s; }
.menu-open .menu__links a:nth-child(5) { transition-delay: .35s; }
.menu__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.menu__mail { font-family: var(--f-mono); font-size: 13px; color: var(--ink-2); }

/* ---------- hero ---------- */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 680px;
  overflow: hidden;
  isolation: isolate;
  cursor: crosshair;
}
.has-cursor .hero { cursor: none; }
.hero__stage { position: absolute; inset: 0; z-index: 0; transform-origin: 72% 50%; }
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(4, 5, 10, .9) 0%, rgba(4, 5, 10, .62) 34%, rgba(4, 5, 10, 0) 58%),
    radial-gradient(130% 100% at 72% 50%, transparent 35%, rgba(4, 5, 10, .55) 72%, var(--bg) 100%),
    linear-gradient(0deg, var(--bg) 0%, transparent 18%);
}

.chip {
  position: absolute;
  z-index: 2;
  width: var(--chip);
  height: var(--chip);
  left: calc(72% - var(--chip) / 2);
  top: calc(50% - var(--chip) / 2);
}
.motion .chip { opacity: 0; transform: scale(.72); filter: blur(14px); transition: opacity 1.4s var(--ease), transform 1.8s var(--ease), filter 1.4s var(--ease); }
.motion .chip.is-on { opacity: 1; transform: none; filter: none; }
.chip__svg {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 26px rgba(46, 242, 255, .22));
  transition: filter .25s;
}
.chip.is-hit .chip__svg { filter: drop-shadow(0 0 40px rgba(46, 242, 255, .65)) brightness(1.25); transition: filter .05s; }
.chip__core { animation: corePulse 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes corePulse { 0%, 100% { opacity: .55; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.08); } }
.chip.is-hit .chip__core { opacity: 1; }
.chip__scan { animation: scan 3.2s var(--ease-io) infinite; }
@keyframes scan { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(120px); opacity: 0; } }
.chip__label { font-family: var(--f-mono); font-size: 6.5px; letter-spacing: 1.6px; fill: #8193b8; }
.chip__label--sm { font-size: 5.5px; fill: #56658a; }
.chip__ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.chip__ring--1 { inset: -16%; border: 1px dashed rgba(46, 242, 255, .22); animation: spin 48s linear infinite; }
.chip__ring--2 {
  inset: -30%;
  background: repeating-conic-gradient(rgba(46, 242, 255, .35) 0 .6deg, transparent .6deg 6deg);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 9px), #000 calc(100% - 8px), #000 calc(100% - 2px), transparent 100%);
  mask: radial-gradient(closest-side, transparent calc(100% - 9px), #000 calc(100% - 8px), #000 calc(100% - 2px), transparent 100%);
  opacity: .5;
  animation: spin 90s linear infinite reverse;
}
.chip__ring--3 {
  inset: -7%;
  border: 1.5px solid transparent;
  border-top-color: rgba(46, 242, 255, .7);
  border-bottom-color: rgba(139, 92, 255, .6);
  animation: spin 9s linear infinite;
  filter: drop-shadow(0 0 6px rgba(46, 242, 255, .7));
}
@keyframes spin { to { transform: rotate(360deg); } }

.hero__content {
  position: relative;
  z-index: 3;
  height: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 120px var(--pad) 110px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  pointer-events: none;
}
.hero__content a, .hero__content button { pointer-events: auto; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  align-self: flex-start;
  padding: 8px 16px 8px 12px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: rgba(8, 10, 18, .55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.hero__title {
  margin: 30px 0 28px;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(2.5rem, 6.4vw, 6.6rem);
  line-height: 1;
  letter-spacing: -.045em;
}
.hero__sub { max-width: 33em; font-size: clamp(1rem, 1.25vw, 1.15rem); color: var(--ink-2); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }
.motion [data-hero] { opacity: 0; transform: translateY(26px); transition: opacity 1.1s var(--ease), transform 1.3s var(--ease); }
.motion [data-hero].is-in { opacity: 1; transform: none; }
.motion [data-hero].is-settled { transition: none; }
.motion .hero__title[data-hero] { opacity: 1; transform: none; }

.hud-wrap { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.hud {
  position: absolute;
  inset: 92px var(--pad) 28px;
  pointer-events: none;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.hud__corner { position: absolute; width: 18px; height: 18px; border-color: rgba(46, 242, 255, .4); border-style: solid; border-width: 0; }
.hud__corner--tl { left: 0; top: 0; border-top-width: 1px; border-left-width: 1px; }
.hud__corner--tr { right: 0; top: 0; border-top-width: 1px; border-right-width: 1px; }
.hud__corner--bl { left: 0; bottom: 0; border-bottom-width: 1px; border-left-width: 1px; }
.hud__corner--br { right: 0; bottom: 0; border-bottom-width: 1px; border-right-width: 1px; }
.hud__block { position: absolute; display: flex; flex-direction: column; gap: 6px; }
.hud__block > span { display: inline-flex; align-items: center; gap: 10px; }
.hud__block--tl { left: 28px; top: 18px; }
.hud__block--tr { right: 28px; top: 18px; align-items: flex-end; }
.hud__block--bl { left: 28px; bottom: 18px; flex-direction: row; align-items: center; gap: 14px; }
.hud__block--br { right: 28px; bottom: 18px; align-items: flex-end; }
.hud__sig i { display: inline-block; width: 3px; height: 9px; background: var(--cyan); opacity: .9; margin-left: 2px; animation: sig 1.6s infinite; }
.hud__sig i:nth-child(2) { animation-delay: .1s; } .hud__sig i:nth-child(3) { animation-delay: .2s; }
.hud__sig i:nth-child(4) { animation-delay: .3s; } .hud__sig i:nth-child(5) { animation-delay: .4s; opacity: .3; }
@keyframes sig { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.4); } }
.scroll-cue { position: relative; width: 1px; height: 46px; background: var(--line-2); overflow: hidden; }
.scroll-cue i { position: absolute; left: -1px; top: -12px; width: 3px; height: 12px; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); animation: cue 2s var(--ease-io) infinite; }
@keyframes cue { to { transform: translateY(70px); } }

/* ---------- marquee ---------- */
.marquee {
  position: relative;
  z-index: 2;
  padding: 34px 0 30px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(46, 242, 255, .03), transparent);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__row { display: flex; white-space: nowrap; }
.marquee__row--rev { margin-top: 14px; }
.marquee__track { display: flex; flex: none; will-change: transform; }
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: clamp(22px, 3vw, 48px);
  padding-right: clamp(22px, 3vw, 48px);
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(1.7rem, 4.4vw, 3.9rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.marquee__item--o {
  color: transparent;
  background: linear-gradient(90deg, var(--cyan), #9fb8ff 50%, var(--violet));
  -webkit-background-clip: text;
  background-clip: text;
}
.marquee__item--mono {
  font-family: var(--f-mono);
  font-weight: 400;
  font-size: clamp(.8rem, 1.1vw, 1rem);
  letter-spacing: .2em;
  color: var(--muted);
}
.marquee__sep {
  display: inline-block;
  width: .32em; height: .32em;
  transform: rotate(45deg);
  background: var(--cyan);
  box-shadow: 0 0 18px var(--cyan);
}

/* ---------- about ---------- */
.about { overflow: hidden; }
.about__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(180px, 1fr) 3fr; gap: 40px; }
.about__side { padding-top: 14px; }
.manifesto {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.45rem, 3.1vw, 3rem);
  line-height: 1.24;
  letter-spacing: -.025em;
}
.mw { transition: opacity .35s linear, color .5s, text-shadow .5s; }
.motion .mw { opacity: .13; }
.mw.hl { color: var(--cyan); }
.mw.hl.on { text-shadow: 0 0 28px rgba(46, 242, 255, .55); }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: clamp(60px, 8vw, 110px); }
.fact { position: relative; padding-top: 26px; border-top: 1px solid var(--line-2); }
.fact__led {
  position: absolute;
  left: 0; top: -1px;
  width: 0; height: 1px;
  background: var(--grad);
  box-shadow: 0 0 10px var(--cyan);
  transition: width 1.4s var(--ease) .3s;
}
.fact.is-in .fact__led, html:not(.motion) .fact__led { width: 100%; }
.fact__idx { font-family: var(--f-mono); font-size: 12px; color: var(--cyan); letter-spacing: .1em; }
.fact h3 { margin: 14px 0 8px; font-family: var(--f-display); font-weight: 500; font-size: 1.2rem; letter-spacing: -.02em; }
.fact p { color: var(--ink-2); font-size: 15px; }

/* ---------- services ---------- */
.services { position: relative; }
.services__pin { position: relative; padding: clamp(100px, 12vw, 160px) 0 60px; }
.services__track { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 28px; padding: 0 var(--pad); max-width: var(--maxw); margin: 0 auto; }
.services__intro { margin-bottom: 30px; }
.services__hint { display: none; }
.svc { position: relative; }
.svc__card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  height: 100%;
  padding: clamp(26px, 3.4vw, 54px);
  border-radius: 28px;
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(46, 242, 255, .06), transparent 50%),
    linear-gradient(160deg, rgba(17, 22, 40, .82), rgba(7, 9, 17, .92));
  overflow: hidden;
  transition: border-color .8s var(--ease), box-shadow .8s var(--ease);
}
.svc__card::before {
  content: '';
  position: absolute;
  left: 10%; right: 10%; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity: .25;
  transition: opacity .8s;
}
.svc.is-active .svc__card { border-color: rgba(46, 242, 255, .22); box-shadow: 0 40px 120px -60px rgba(46, 242, 255, .35); }
.svc.is-active .svc__card::before { opacity: 1; }
.svc__num {
  position: absolute;
  right: 28px; top: 8px;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(5rem, 9vw, 9rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(140, 170, 255, .1);
  pointer-events: none;
}
.svc__body { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; }
.svc__kicker { font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; color: var(--cyan); }
.svc__title {
  margin: 16px 0 18px;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 2.5vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -.03em;
}
.svc__text { color: var(--ink-2); max-width: 31em; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; padding: 0; list-style: none; }
.tags li {
  padding: 7px 13px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: rgba(255, 255, 255, .02);
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--ink-2);
  transition: border-color .6s, color .6s, background-color .6s;
  transition-delay: calc(var(--ti, 0) * 80ms);
}
.svc.is-active .tags li { border-color: rgba(46, 242, 255, .32); color: var(--ink); background: rgba(46, 242, 255, .05); }
.svc__visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; }
.viz-box { position: relative; width: 100%; aspect-ratio: 520 / 420; }
.viz { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.svc-progress { display: none; }

/* horizontal mode (enabled from JS on large screens) */
.services.is-horizontal .services__pin {
  height: 100vh;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.services.is-horizontal .services__track {
  flex-direction: row;
  align-items: center;
  gap: clamp(24px, 2.6vw, 40px);
  width: max-content;
  max-width: none;
  margin: 0;
  padding: 0 var(--pad);
}
.services.is-horizontal .services__intro { flex: 0 0 min(500px, 36vw); margin: 0; padding-right: 2vw; }
.services.is-horizontal .services__intro .h2 { font-size: clamp(2rem, 3.3vw, 3.4rem); }
.services.is-horizontal .services__hint {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 44px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cyan);
}
.services__hint svg { width: 48px; animation: nudge 1.6s var(--ease-io) infinite; }
@keyframes nudge { 50% { transform: translateX(8px); } }
.services.is-horizontal .svc { flex: 0 0 min(1140px, 78vw); height: min(640px, 72vh); }
.services.is-horizontal .svc__card { grid-template-columns: .95fr 1.15fr; gap: clamp(24px, 3vw, 56px); }
.services.is-horizontal .svc__visual { container-type: size; height: 100%; }
.services.is-horizontal .viz-box { width: min(100cqw, 100cqh * 520 / 420); }
.services.is-horizontal .svc-progress {
  display: block;
  position: absolute;
  left: var(--pad); right: var(--pad);
  bottom: max(3.2vh, 22px);
  z-index: 2;
}
.svc-progress__line { position: relative; height: 1px; background: var(--line-2); }
.svc-progress__line span {
  position: absolute;
  inset: 0;
  background: var(--grad);
  transform-origin: left;
  transform: scaleX(0);
  box-shadow: 0 0 10px var(--cyan);
}
.svc-progress ol { display: flex; justify-content: space-between; margin: 0; padding: 0; list-style: none; }
.svc-progress li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: -5px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .4s;
}
.svc-progress li i {
  width: 9px; height: 9px;
  transform: rotate(45deg);
  background: var(--bg);
  border: 1px solid var(--line-2);
  transition: background-color .4s, border-color .4s, box-shadow .4s;
}
.svc-progress li span { margin-top: 18px; position: absolute; left: 0; white-space: nowrap; }
.svc-progress li:last-child span { left: auto; right: 0; }
.svc-progress li.is-on { color: var(--ink-2); }
.svc-progress li.is-on i { border-color: var(--cyan); }
.svc-progress li.is-current { color: var(--cyan); }
.svc-progress li.is-current i { background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }

/* ---- shared viz text ---- */
.viz-label { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .08em; fill: #7d8bab; }
.viz-label--c { font-size: 7px; letter-spacing: .2em; fill: #8fe9f5; }
.viz-strong { font-family: var(--f-display); font-size: 15px; font-weight: 500; fill: #e9edf7; }
.viz-strong--sm { font-size: 12px; }
.viz-strong--xs { font-size: 8.5px; }
.viz-tag { font-family: var(--f-mono); font-size: 7.5px; letter-spacing: .12em; fill: #2ef2ff; }
.viz-tag--muted { fill: #6c7590; }
.viz-code { font-family: var(--f-mono); font-size: 10px; fill: #aab3cc; }
.viz-kpi { font-family: var(--f-display); font-size: 16px; font-weight: 500; fill: #e9edf7; }

/* ---- viz 1 · hardware ---- */
.hw-traces path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.svc.is-active .hw-traces path { animation: drawIn 1.4s var(--ease) forwards; }
.svc.is-active .hw-traces path:nth-child(2n) { animation-delay: .15s; }
.svc.is-active .hw-traces path:nth-child(3n) { animation-delay: .3s; }
.hw-flow path { stroke-dasharray: 7 93; stroke-dashoffset: 100; opacity: 0; filter: drop-shadow(0 0 3px #2ef2ff); }
.svc.is-active .hw-flow path { opacity: 1; animation: flow 2.2s linear infinite; animation-delay: var(--fd, 0s); transition: opacity .6s 1.2s; }
@keyframes flow { to { stroke-dashoffset: 0; } }
.hw-led { transition: fill .3s; }
.hw-ledglow { opacity: 0; }
.svc.is-active .hw-ledglow--1 { animation: ledBlink 1.8s 1.2s infinite; }
.svc.is-active .hw-ledglow--2 { animation: ledBlink 1.8s 1.5s infinite; }
.svc.is-active .hw-ledglow--3 { animation: ledBlink 1.8s 1.8s infinite; }
.svc.is-active .hw-led--1 { animation: ledFill 1.8s 1.2s infinite; }
.svc.is-active .hw-led--2 { animation: ledFill 1.8s 1.5s infinite; }
.svc.is-active .hw-led--3 { animation: ledFill 1.8s 1.8s infinite; }
@keyframes ledBlink { 0%, 100% { opacity: 0; } 15%, 55% { opacity: 1; } }
@keyframes ledFill { 0%, 100% { fill: #0f2a33; } 15%, 55% { fill: #c9fbff; } }
.hw-mcu { transition: stroke-opacity .6s; }
.svc.is-active .hw-mcu { animation: mcuGlow 2.4s ease-in-out infinite; }
@keyframes mcuGlow { 50% { stroke-opacity: 1; filter: drop-shadow(0 0 6px rgba(46, 242, 255, .7)); } }

.code-win {
  position: absolute;
  left: 46%; top: 50%;
  width: 54%;
  border-radius: 12px;
  border: 1px solid rgba(46, 242, 255, .28);
  background: rgba(7, 10, 20, .92);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8), 0 0 40px -16px rgba(46, 242, 255, .5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-family: var(--f-mono);
  font-size: clamp(8.5px, .8vw, 11.5px);
  line-height: 1.75;
  transform: translateY(20px);
  opacity: 0;
  transition: opacity .8s var(--ease) .4s, transform 1s var(--ease) .4s;
}
.svc.is-active .code-win, html:not(.motion) .code-win { opacity: 1; transform: none; }
.code-win__bar { display: flex; align-items: center; gap: 5px; padding: 7px 12px; border-bottom: 1px solid var(--line); }
.code-win__bar i { width: 6px; height: 6px; border-radius: 50%; background: rgba(140, 170, 255, .3); }
.code-win__bar span { margin-left: 8px; font-size: .9em; color: var(--muted); }
.code-win__body { padding: 10px 14px 12px; color: #c8d2ea; }
.cl { display: block; width: calc(var(--n) * 1ch + 1px); max-width: 100%; overflow: hidden; white-space: pre; }
.cl b { font-weight: 400; }
.cl .k { color: #b49bff; } .cl .s { color: #3dffa2; } .cl .f { color: var(--cyan); }
.motion .cl { width: 0; }
.motion .svc.is-active .cl { animation: type calc(var(--n) * 38ms) steps(var(--n)) forwards; animation-delay: calc(var(--d) * 1ms); }
@keyframes type { to { width: calc(var(--n) * 1ch + 1px); } }
.cl--caret { overflow: visible; }
.svc.is-active .cl--caret::after { content: '▍'; color: var(--cyan); animation: blink 1s steps(1) infinite; }

/* ---- viz 2 · IoT ---- */
.iot-orbit { transform-box: fill-box; transform-origin: center; animation: spin 40s linear infinite; animation-play-state: paused; }
.iot-orbit--rev { animation-direction: reverse; animation-duration: 70s; }
.svc.is-active .iot-orbit { animation-play-state: running; }
.iot-links path { stroke-dasharray: 4 5; }
.svc.is-active .iot-links path { animation: dash 1.2s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -18; } }
.iot-packets circle { filter: drop-shadow(0 0 4px currentColor); color: #2ef2ff; }
.iot-ping { transform-box: fill-box; transform-origin: center; opacity: 0; }
.svc.is-active .iot-ping { animation: ping 2.6s var(--ease) infinite; }
.svc.is-active .iot-ping--2 { animation-delay: 1.3s; }
@keyframes ping { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(2.6); opacity: 0; } }
.iot-dev rect { fill: #0b1120; stroke: rgba(46, 242, 255, .35); stroke-width: 1.2; transition: stroke .5s; }
.svc.is-active .iot-dev rect { stroke: rgba(46, 242, 255, .7); }
.iot-ico { color: #c9fbff; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.iot-led { fill: var(--green); animation: blink 1.8s infinite; }

/* ---- viz 3 · automation ---- */
.auto-links path { stroke: #2ef2ff; stroke-opacity: .55; stroke-dasharray: 5 6; }
.svc.is-active .auto-links path { animation: dash 1s linear infinite; }
.auto-node rect:first-child { fill: #0b1120; stroke: rgba(46, 242, 255, .4); stroke-width: 1.2; }
.auto-tag { fill: rgba(46, 242, 255, .12); }
.auto-led { fill: var(--green); animation: blink 1.2s infinite; }
.auto-roller { transform-box: fill-box; transform-origin: center; }
.svc.is-active .auto-roller { animation: spin 1s linear infinite; }
.auto-box { opacity: 0; transform: translateX(22px); }
.svc.is-active .auto-box { animation: belt 6s linear infinite; }
@keyframes belt {
  0% { transform: translateX(22px); opacity: 0; }
  6% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateX(326px); opacity: 0; }
}
.auto-beam { opacity: .35; }
.svc.is-active .auto-beam { animation: beam 2s linear infinite; }
@keyframes beam {
  0%, 41% { opacity: .3; filter: none; }
  42%, 75% { opacity: 1; filter: drop-shadow(0 0 5px #ff4fd8); }
  76%, 100% { opacity: .3; filter: none; }
}

/* ---- viz 4 · web ---- */
.web-kpi rect { fill: rgba(255, 255, 255, .025); stroke: rgba(140, 168, 255, .14); }
.web-line { stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 4px rgba(46, 242, 255, .6)); }
.svc.is-active .web-line { animation: drawIn 2s var(--ease) .3s forwards; }
.web-area { opacity: 0; transition: opacity 1s; }
.svc.is-active .web-area { opacity: 1; transition-delay: 1.2s; }
.web-dot { opacity: 0; transform-box: fill-box; transform-origin: center; }
.svc.is-active .web-dot { animation: dotPop 1.8s 1.8s infinite; }
@keyframes dotPop { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 1; transform: scale(1.6); } 100% { opacity: 1; transform: scale(1); } }
.web-phone { transition: transform 1.2s var(--ease); }
.web-gauge { stroke-dasharray: 100; stroke-dashoffset: 100; }
.svc.is-active .web-gauge { animation: gauge 1.8s var(--ease) .6s forwards; }
@keyframes gauge { to { stroke-dashoffset: 28; } }
.web-sw { fill: rgba(140, 168, 255, .16); transition: fill .4s; }
.web-knob { fill: #aab3cc; transition: transform .5s var(--ease), fill .4s; }
.svc.is-active .web-sw { fill: rgba(46, 242, 255, .5); transition-delay: 1s; }
.svc.is-active .web-knob { transform: translateX(16px); fill: #fff; transition-delay: 1s; }
.svc.is-active .web-sw--2 { transition-delay: 1.3s; }
.svc.is-active .web-knob--2 { transition-delay: 1.3s; }
.svc.is-active .web-sw--3, .web-sw--3 { fill: rgba(140, 168, 255, .16); }
.svc.is-active .web-knob--3 { transform: none; fill: #aab3cc; }
.web-toast { opacity: 0; transform: translateY(-24px); transition: opacity .6s var(--ease), transform .8s var(--ease); }
.svc.is-active .web-toast { opacity: 1; transform: none; transition-delay: 2s; }

/* ---------- stack ---------- */
.stack { position: relative; }
.stack__pin { position: relative; min-height: 100vh; display: flex; align-items: center; padding: clamp(100px, 10vw, 140px) 0; }
.stack__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: center; }
.sigpath { margin-top: 44px; }
.sigpath__title { font-family: var(--f-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.sigpath ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sigpath li {
  position: relative;
  padding: 7px 12px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--muted);
  transition: color .5s, border-color .5s, box-shadow .5s, background-color .5s;
}
.sigpath li:not(:last-child)::after { content: '→'; position: absolute; right: -15px; top: 50%; transform: translateY(-50%); color: var(--line-2); font-size: 11px; }
.sigpath li:not(:last-child) { margin-right: 14px; }
.sigpath li.is-lit { color: var(--ink); border-color: rgba(46, 242, 255, .6); background: rgba(46, 242, 255, .07); box-shadow: 0 0 18px -4px rgba(46, 242, 255, .6); }
html:not(.motion) .sigpath li { color: var(--ink-2); }

.stack__visual { position: relative; }
.layers {
  --p: 230px;
  --t: 12px;
  --gap: 86px;
  --cx: 34%;
  position: relative;
  height: calc(var(--p) * .72 + 4 * 92px + 60px);
}
.motion .layers { --gap: 16px; }
.layer {
  position: absolute;
  left: var(--cx);
  top: 50%;
  width: var(--p);
  height: var(--p);
  margin: calc(var(--p) / -2) 0 0 calc(var(--p) / -2);
  transform: translateY(calc((var(--i) - 2) * var(--gap) * -1));
  z-index: calc(var(--i) + 1);
}
.plate {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  border: 1px solid rgba(140, 170, 255, .24);
  background: rgba(9, 13, 25, .86);
  transform: rotateX(60deg) rotateZ(-45deg);
  transform-style: preserve-3d;
  transition: border-color .6s, background-color .6s, box-shadow .6s;
}
.plate svg {
  position: absolute;
  inset: 9%;
  width: 82%;
  height: 82%;
  color: #6f8cc4;
  opacity: .35;
  transition: opacity .6s, color .6s;
}
.plate__side { position: absolute; background: linear-gradient(90deg, #0b1222, #17223b); transition: background .6s; }
.plate__side--a { left: 0; right: 0; top: 100%; height: var(--t); transform-origin: top; transform: rotateX(-90deg); }
.plate__side--b { top: 0; bottom: 0; right: 100%; width: var(--t); transform-origin: right; transform: rotateY(-90deg); background: linear-gradient(180deg, #0e1729, #0a1020); }
.layer.is-lit .plate {
  border-color: rgba(46, 242, 255, .8);
  background: rgba(8, 24, 40, .9);
  box-shadow: 0 0 46px rgba(46, 242, 255, .28), inset 0 0 36px rgba(46, 242, 255, .16);
}
.layer.is-lit .plate svg { opacity: 1; color: var(--cyan); }
.layer.is-lit .plate__side--a { background: linear-gradient(90deg, #0b3442, #1a5a6c); }
.layer.is-lit .plate__side--b { background: linear-gradient(180deg, #0f4152, #0a2a36); }
html:not(.motion) .layer .plate svg { opacity: .8; }
.layer__line {
  position: absolute;
  left: calc(50% + var(--p) * .71 + 10px);
  top: 50%;
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, rgba(46, 242, 255, .1), rgba(46, 242, 255, .6));
}
.layer__line::after { content: ''; position: absolute; right: -3px; top: -3px; width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--cyan); }
.layer__label {
  position: absolute;
  left: calc(50% + var(--p) * .71 + 56px);
  top: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  align-items: baseline;
  align-content: center;
  width: max-content;
  max-width: 260px;
}
.layer__num { grid-row: span 2; font-family: var(--f-mono); font-size: 11px; color: var(--cyan); }
.layer__label strong { font-family: var(--f-display); font-weight: 500; font-size: 1.05rem; letter-spacing: -.02em; }
.layer__label small { font-family: var(--f-mono); font-size: 11px; color: var(--muted); letter-spacing: .02em; }
.layer.is-lit .layer__label small { color: var(--ink-2); }
.motion .layer__line, .motion .layer__label { opacity: 0; }
.layers__beam {
  position: absolute;
  left: var(--cx); top: 50%;
  width: 2px;
  height: calc(var(--gap) * 4);
  margin-left: -1px;
  transform: translateY(-50%);
  background: linear-gradient(0deg, rgba(46, 242, 255, 0), rgba(46, 242, 255, .7), rgba(139, 92, 255, .7), rgba(139, 92, 255, 0));
  box-shadow: 0 0 12px rgba(46, 242, 255, .6);
  z-index: 0;
}
.layers__pulse {
  --pp: 0;
  position: absolute;
  left: var(--cx); top: 50%;
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(46, 242, 255, .25), 0 0 26px 8px rgba(46, 242, 255, .8);
  transform: translateY(calc((2 - var(--pp) * 4) * var(--gap)));
  z-index: 10;
  opacity: 0;
  transition: opacity .4s;
}
.layers.is-flowing .layers__pulse { opacity: 1; }

/* ---------- process ---------- */
.process { overflow: hidden; padding-top: clamp(40px, 6vw, 90px); }
.section-head { position: relative; z-index: 1; max-width: 860px; }
.section-head--row { max-width: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; }
.section-head--row .lead { max-width: 28em; }
.timeline { position: relative; z-index: 1; margin-top: clamp(60px, 8vw, 110px); }
.timeline__rail { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--line); }
.timeline__fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--cyan), var(--violet));
  box-shadow: 0 0 14px rgba(46, 242, 255, .7);
  transform-origin: top;
  transform: scaleY(0);
}
html:not(.motion) .timeline__fill { transform: none; }
.timeline__head {
  position: absolute;
  left: 50%; top: 0;
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(46, 242, 255, .25), 0 0 24px 6px rgba(46, 242, 255, .85);
}
html:not(.motion) .timeline__head { display: none; }
.step { position: relative; display: grid; grid-template-columns: 1fr 1fr; column-gap: 180px; padding: clamp(28px, 3.5vw, 48px) 0; }
.step__node {
  position: absolute;
  left: 50%; top: 50%;
  width: 54px; height: 54px;
  margin: -27px 0 0 -27px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  transform: rotate(45deg);
  transition: border-color .5s, box-shadow .5s, background-color .5s;
  z-index: 1;
}
.step__node span { transform: rotate(-45deg); font-family: var(--f-mono); font-size: 13px; color: var(--muted); transition: color .5s; }
.step.is-on .step__node, html:not(.motion) .step__node { border-color: var(--cyan); background: #071824; box-shadow: 0 0 34px rgba(46, 242, 255, .45), inset 0 0 14px rgba(46, 242, 255, .3); }
.step.is-on .step__node span, html:not(.motion) .step__node span { color: var(--cyan); }
.step__card {
  position: relative;
  grid-column: 1;
  justify-self: end;
  width: 100%;
  max-width: 460px;
  padding: 28px 30px 30px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(17, 22, 40, .7), rgba(7, 9, 17, .85));
  transition: border-color .6s, opacity .8s var(--ease), transform 1s var(--ease), box-shadow .6s;
}
.step--r .step__card { grid-column: 2; justify-self: start; }
.step__card::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 100%;
  width: 63px;
  height: 1px;
  background: linear-gradient(90deg, var(--line-2), var(--line-2));
  transition: background .6s;
}
.step--r .step__card::before { left: auto; right: 100%; }
.step.is-on .step__card::before { background: linear-gradient(90deg, var(--cyan), rgba(46, 242, 255, .3)); }
.step--r.is-on .step__card::before { background: linear-gradient(90deg, rgba(46, 242, 255, .3), var(--cyan)); }
.motion .step__card { opacity: .25; transform: translateX(-40px); }
.motion .step--r .step__card { transform: translateX(40px); }
.motion .step.is-on .step__card { opacity: 1; transform: none; border-color: rgba(46, 242, 255, .25); box-shadow: 0 30px 80px -50px rgba(46, 242, 255, .5); }
.step__meta { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; color: var(--muted); }
.step__card h3 { margin: 12px 0 10px; font-family: var(--f-display); font-weight: 500; font-size: clamp(1.25rem, 1.8vw, 1.6rem); letter-spacing: -.03em; }
.step__card p:last-child { color: var(--ink-2); }

/* ---------- why / bento ---------- */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: clamp(50px, 6vw, 80px); }
.card {
  --mx: 50%;
  --my: 50%;
  position: relative;
  padding: 32px 30px 34px;
  border-radius: 24px;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(17, 22, 40, .72), rgba(7, 9, 17, .9));
  overflow: hidden;
  isolation: isolate;
  transition: opacity 1s var(--ease), transform .6s var(--ease), border-color .4s;
  transition-delay: calc(var(--rd, 0) * 1ms), 0s, 0s;
}
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(46, 242, 255, .1), transparent 45%);
  opacity: 0;
  transition: opacity .4s;
}
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(300px circle at var(--mx) var(--my), rgba(46, 242, 255, .8), rgba(139, 92, 255, .4) 35%, transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
}
.card:hover::before, .card:hover::after { opacity: 1; }
.motion .card.is-ready { transition: transform .6s var(--ease), border-color .4s; transition-delay: 0s; }
.card--big { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; }
.card__icon {
  width: 50px; height: 50px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  border: 1px solid var(--line-2);
  background: rgba(46, 242, 255, .05);
  color: var(--cyan);
}
.card__icon svg { width: 24px; height: 24px; }
.card__icon svg * { stroke-dasharray: 1; stroke-dashoffset: 0; }
.card:hover .card__icon svg * { animation: redraw 1.1s var(--ease); }
@keyframes redraw { 0% { stroke-dashoffset: 1; } 100% { stroke-dashoffset: 0; } }
.card h3 { margin: 24px 0 10px; font-family: var(--f-display); font-weight: 500; font-size: 1.2rem; letter-spacing: -.025em; line-height: 1.25; }
.card p { color: var(--ink-2); font-size: 15px; }
.card--big h3 { font-size: clamp(1.4rem, 2.2vw, 2rem); }
.card--big > p { max-width: 30em; font-size: 16px; }

.monitor {
  margin-top: auto;
  padding-top: 34px;
}
.monitor__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.monitor__ok { display: inline-flex; align-items: center; gap: 9px; color: var(--green); }
.monitor__wave {
  position: relative;
  height: 130px;
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(3, 6, 12, .6);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.monitor__wave svg { width: 100%; height: 100%; }
.monitor__grid { stroke: rgba(140, 170, 255, .08); stroke-dasharray: 2 4; fill: none; }
.monitor__ecg {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 4px rgba(46, 242, 255, .9));
  animation: ecg 3.2s linear infinite;
}
@keyframes ecg { to { transform: translateX(-300px); } }
.monitor__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
.monitor__stats > div { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; gap: 6px; }
.monitor__stats span { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.monitor__stats b { font-family: var(--f-display); font-weight: 500; font-size: 1.05rem; }
.monitor__bars { display: flex; gap: 3px; align-items: flex-end; height: 18px; }
.monitor__bars i { width: 5px; background: var(--cyan); border-radius: 1px; animation: sig 1.4s infinite; }
.monitor__bars i:nth-child(1) { height: 30%; } .monitor__bars i:nth-child(2) { height: 50%; animation-delay: .1s; }
.monitor__bars i:nth-child(3) { height: 70%; animation-delay: .2s; } .monitor__bars i:nth-child(4) { height: 90%; animation-delay: .3s; }
.monitor__bars i:nth-child(5) { height: 100%; animation-delay: .4s; opacity: .35; }
.monitor__load { display: block; height: 6px; margin-top: 8px; border-radius: 3px; background: rgba(140, 170, 255, .12); overflow: hidden; }
.monitor__load i { display: block; height: 100%; width: 42%; background: var(--grad); border-radius: 3px; transition: width 1.2s var(--ease); }

/* ---------- contact ---------- */
.contact { overflow: hidden; }
.contact__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(40px, 6vw, 100px); align-items: start; }
.contact__copy { position: sticky; top: 120px; }
.contact__meta { margin-top: 48px; display: flex; flex-direction: column; gap: 22px; }
.contact__mail { display: inline-flex; flex-direction: column; gap: 6px; align-self: flex-start; }
.contact__mail small { font-family: var(--f-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.contact__mail span {
  font-family: var(--f-display);
  font-size: clamp(1.15rem, 2vw, 1.7rem);
  letter-spacing: -.02em;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  padding-bottom: 4px;
  transition: background-size .6s var(--ease), color .4s;
}
.contact__mail:hover span { background-size: 100% 1px; color: var(--cyan); }
.contact__status { display: inline-flex; align-items: center; gap: 12px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }

.console {
  position: relative;
  border-radius: 26px;
  border: 1px solid var(--line-2);
  background:
    radial-gradient(90% 60% at 100% 0%, rgba(139, 92, 255, .1), transparent 60%),
    linear-gradient(170deg, rgba(14, 19, 35, .92), rgba(6, 8, 15, .96));
  box-shadow: 0 40px 120px -50px rgba(46, 242, 255, .3), inset 0 1px 0 rgba(255, 255, 255, .04);
  overflow: hidden;
}
.console__bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 22px;
  border-bottom: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--muted);
}
.console__dots { display: flex; gap: 6px; }
.console__dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(140, 170, 255, .2); }
.console__dots i:first-child { background: rgba(255, 107, 136, .6); }
.console__title { flex: 1; }
.console__secure { display: inline-flex; align-items: center; gap: 8px; text-transform: uppercase; color: var(--ink-2); }

.form { padding: clamp(24px, 3.4vw, 44px); transition: opacity .5s, filter .5s; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.field { position: relative; margin-bottom: 26px; }
.field input, .field textarea {
  display: block;
  width: 100%;
  padding: 24px 0 10px;
  border: 0;
  border-bottom: 1px solid var(--line-2);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  outline: none;
  transition: border-color .3s;
}
.field textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
.field label {
  position: absolute;
  left: 0; top: 24px;
  color: var(--muted);
  font-size: 15.5px;
  pointer-events: none;
  transform-origin: 0 0;
  transition: transform .45s var(--ease), color .3s;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label,
.field input:-webkit-autofill + label {
  transform: translateY(-22px) scale(.76);
  color: var(--cyan);
}
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  transition: background-color 99999s;
}
.field__line {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .7s var(--ease);
  box-shadow: 0 0 10px rgba(46, 242, 255, .6);
}
.field--area .field__line { bottom: 6px; }
.field input:focus ~ .field__line, .field textarea:focus ~ .field__line { transform: scaleX(1); }
.field__err { display: block; min-height: 0; margin-top: 7px; font-family: var(--f-mono); font-size: 11.5px; color: var(--red); }
.field__err:empty { display: none; }
.field.is-invalid .field__line { transform: scaleX(1); background: var(--red); box-shadow: 0 0 10px rgba(255, 107, 136, .5); }
.field.is-invalid label { color: var(--red); }

.opts { margin: 4px 0 26px; padding: 0; border: 0; }
.opts legend { margin-bottom: 14px; padding: 0; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.opt { position: relative; display: inline-block; margin: 0 6px 9px 0; }
.opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.has-cursor .opt input { cursor: none; }
.opt span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  font-size: 14px;
  color: var(--ink-2);
  transition: border-color .3s, color .3s, background-color .3s, box-shadow .3s;
}
.opt span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); transition: background-color .3s, box-shadow .3s; }
.opt:hover span { border-color: rgba(46, 242, 255, .4); color: var(--ink); }
.opt input:checked + span { border-color: var(--cyan); color: var(--ink); background: rgba(46, 242, 255, .09); box-shadow: 0 0 22px -6px rgba(46, 242, 255, .7); }
.opt input:checked + span::before { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.opt input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 2px; }

.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.field--check { margin-top: 6px; }
.field .check { position: relative; top: auto; display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: var(--ink-2); cursor: pointer; line-height: 1.5; pointer-events: auto; transform: none; }
.check input { position: absolute; opacity: 0; width: 20px; height: 20px; margin: 0; }
.check__box {
  position: relative;
  flex: none;
  width: 20px; height: 20px;
  margin-top: 1px;
  border-radius: 6px;
  border: 1px solid var(--line-2);
  transition: border-color .3s, background-color .3s, box-shadow .3s;
}
.check__box::after {
  content: '';
  position: absolute;
  left: 6px; top: 2px;
  width: 6px; height: 11px;
  border: solid #03040a;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform .3s var(--ease);
}
.check input:checked + .check__box { background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 14px rgba(46, 242, 255, .6); }
.check input:checked + .check__box::after { transform: rotate(45deg) scale(1); }
.check input:focus-visible + .check__box { outline: 2px solid var(--cyan); outline-offset: 2px; }
.field.is-invalid .check__box { border-color: var(--red); }

.form__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 24px; margin-top: 14px; }
.btn--submit { min-width: 220px; }
.btn__sending { display: none; gap: 4px; align-items: center; }
.btn__sending i { width: 4px; height: 14px; border-radius: 2px; background: #03040a; animation: sig .8s infinite; }
.btn__sending i:nth-child(2) { animation-delay: .1s; } .btn__sending i:nth-child(3) { animation-delay: .2s; } .btn__sending i:nth-child(4) { animation-delay: .3s; }
.btn--submit[data-state="sending"] .btn__sending { display: inline-flex; }
.btn--submit[data-state="sending"] .btn__arrow { display: none; }
.btn--submit:disabled { cursor: progress; }
.form__status { font-size: 14px; color: var(--ink-2); }
.form__legal { margin-top: 22px; font-size: 12px; line-height: 1.6; color: var(--muted); }
.form__legal a { color: var(--ink-2); border-bottom: 1px solid var(--line-2); }
.form__legal a:hover { color: var(--cyan); }
/* the badge is replaced by the notice under the form, as Google allows */
.grecaptcha-badge { visibility: hidden; }
.form__status.is-error { color: var(--red); }
.form__status a { color: var(--ink); border-bottom: 1px solid currentColor; }

.console__done {
  position: absolute;
  inset: 54px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 40px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s var(--ease), visibility 0s .6s;
}
.console.is-sent .form { opacity: 0; filter: blur(6px); pointer-events: none; }
.console.is-sent .console__done { opacity: 1; visibility: visible; transition: opacity .8s var(--ease) .2s, visibility 0s; }
.done__icon { position: relative; width: 96px; height: 96px; display: grid; place-items: center; color: var(--cyan); margin-bottom: 10px; }
.done__icon svg { width: 52px; height: 52px; filter: drop-shadow(0 0 10px var(--cyan)); }
.done__icon path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.console.is-sent .done__icon path { animation: drawIn .9s var(--ease) .5s forwards; }
.done__ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--cyan); opacity: 0; }
.console.is-sent .done__ring { animation: ping 2.4s var(--ease) .3s infinite; }
.console.is-sent .done__ring--2 { animation-delay: 1.5s; }
.console__done h3 { font-family: var(--f-display); font-weight: 500; font-size: 1.7rem; letter-spacing: -.03em; }
.console__done p { color: var(--ink-2); max-width: 26em; }
.console__again { margin-top: 12px; }

/* ---------- footer ---------- */
.footer { position: relative; padding: 40px 0 34px; border-top: 1px solid var(--line); overflow: hidden; }
.footer__mark {
  display: block;
  width: calc(100% - 2 * var(--pad));
  max-width: 1500px;
  height: auto;
  margin: 30px auto 0;
  overflow: visible;
}
.fm { opacity: .14; pointer-events: bounding-box; transition: opacity .35s, filter .35s; }
.fm path, .fm circle { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease); transition-delay: calc(var(--i) * .12s); }
.footer__mark.is-on .fm path, .footer__mark.is-on .fm circle, html:not(.motion) .fm path, html:not(.motion) .fm circle { stroke-dashoffset: 0; }
html:not(.motion) .fm { opacity: .5; }
.footer__mark.is-on .fm { animation: neon 2s steps(1, end) forwards; animation-delay: calc(1s + var(--i) * .16s); }
@keyframes neon {
  0% { opacity: .14; filter: none; }
  8% { opacity: 1; filter: drop-shadow(0 0 14px rgba(46, 242, 255, .8)); }
  12% { opacity: .14; filter: none; }
  20% { opacity: 1; filter: drop-shadow(0 0 14px rgba(46, 242, 255, .8)); }
  24% { opacity: .14; filter: none; }
  40%, 100% { opacity: .55; filter: drop-shadow(0 0 10px rgba(46, 242, 255, .45)); }
}
.fm:hover { opacity: 1 !important; filter: drop-shadow(0 0 16px rgba(46, 242, 255, .9)) !important; transition: opacity .08s, filter .08s; }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-top: 60px; }
.footer__brand p { margin-top: 18px; max-width: 22em; color: var(--ink-2); }
.footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.footer__col a { color: var(--ink-2); transition: color .3s; }
.footer__col a:hover { color: var(--cyan); }
.footer__h { margin-bottom: 6px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 60px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--muted);
}
.footer__top { color: var(--ink-2); transition: color .3s; }
.footer__top:hover { color: var(--cyan); }
.footer__links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }

/* ---------- cookie consent ---------- */
.consent {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 120;
  display: none;
  width: min(440px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  border-radius: 22px;
  border: 1px solid var(--line-2);
  background:
    radial-gradient(90% 60% at 100% 0%, rgba(46, 242, 255, .09), transparent 60%),
    linear-gradient(170deg, rgba(14, 19, 35, .97), rgba(6, 8, 15, .98));
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .85), 0 0 60px -24px rgba(46, 242, 255, .45);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  opacity: 0;
  transform: translateY(28px) scale(.98);
  transition: opacity .6s var(--ease), transform .8s var(--ease);
}
.consent::before {
  content: '';
  position: absolute;
  left: 12%; right: 12%; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
}
.consent.is-mounted { display: block; }
.consent.is-open { opacity: 1; transform: none; }
.consent__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--muted);
}
.consent__body { padding: 20px 22px 18px; }
.consent__title { font-family: var(--f-display); font-weight: 500; font-size: 1.15rem; letter-spacing: -.02em; }
.consent__text { margin-top: 10px; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.consent__prefs { display: none; margin-top: 16px; }
.consent.is-custom .consent__prefs { display: block; animation: prefsIn .5s var(--ease); }
@keyframes prefsIn { from { opacity: 0; transform: translateY(-6px); } }
.consent__row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 0; border-top: 1px solid var(--line); }
.consent__row strong { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.consent__row p, .consent__desc { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
label.consent__row { cursor: pointer; }
.has-cursor label.consent__row { cursor: none; }
.consent__always { flex: none; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); }
.consent__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.consent__actions .btn { flex: 1 1 auto; }
.consent:not(.is-custom) [data-consent="save"],
.consent.is-custom [data-consent="all"],
.consent.is-custom [data-consent="necessary"],
.consent.is-custom [data-consent="customize"] { display: none; }
.consent__link {
  padding: 8px 4px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
  border-bottom: 1px solid transparent;
  transition: color .3s, border-color .3s;
}
.consent__link:hover { color: var(--cyan); border-bottom-color: var(--cyan); }
.consent__policy { display: inline-block; margin-top: 14px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; color: var(--muted); border-bottom: 1px solid var(--line-2); transition: color .3s; }
.consent__policy:hover { color: var(--cyan); }

.switch { position: relative; flex: none; width: 46px; height: 26px; }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.has-cursor .switch input { cursor: none; }
.switch__track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: rgba(140, 170, 255, .14);
  pointer-events: none;
  transition: background-color .3s, border-color .3s, box-shadow .3s;
}
.switch__track::after {
  content: '';
  position: absolute;
  top: 4px; left: 4px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--ink-2);
  transition: transform .45s var(--ease), background-color .3s;
}
.switch input:checked + .switch__track { border-color: var(--cyan); background: rgba(46, 242, 255, .3); box-shadow: 0 0 16px -4px rgba(46, 242, 255, .8); }
.switch input:checked + .switch__track::after { transform: translateX(20px); background: #fff; }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* the form's reCAPTCHA consent prompt */
.form__status .btn { margin-top: 12px; }

/* ---------- legal page ---------- */
html:not([lang="ro"]) [data-only="ro"],
html[lang="ro"] [data-only="en"] { display: none !important; }

.check a { color: var(--ink); border-bottom: 1px solid rgba(46, 242, 255, .5); transition: color .3s; }
.check a:hover { color: var(--cyan); }
.footer__company { display: inline-block; margin-top: 4px; opacity: .75; }
.footer__legal { color: var(--ink-2); transition: color .3s; }
.footer__legal:hover { color: var(--cyan); }

.legal-hero { position: relative; padding: clamp(140px, 15vw, 200px) 0 clamp(50px, 6vw, 80px); overflow: hidden; }
.legal-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(140, 170, 255, .16) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(70% 80% at 72% 40%, #000, transparent 75%);
  mask-image: radial-gradient(70% 80% at 72% 40%, #000, transparent 75%);
}
.legal-hero .orb { right: -12vw; top: -25%; }
.legal-hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.3fr .7fr; gap: 40px; align-items: center; }
.legal-hero__title { font-size: clamp(1.6rem, 5.2vw, 4rem); }
.motion .legal-hero__title[data-hero] { opacity: 1; transform: none; }
.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-top: 30px;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.legal-meta > span { display: inline-flex; align-items: center; gap: 10px; }
.legal-meta time { color: var(--ink-2); }
.legal-art {
  width: 100%;
  max-width: 520px;
  margin-left: auto;
  overflow: visible;
  -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
}
.la-flow path { stroke-dasharray: 6 94; stroke-dashoffset: 100; filter: drop-shadow(0 0 3px #2ef2ff); animation: flow 2.6s linear infinite; animation-delay: var(--fd, 0s); }
.la-ring { transform-box: fill-box; transform-origin: center; animation: spin 40s linear infinite; }
.la-ring--rev { animation-direction: reverse; animation-duration: 70s; }
.la-core { transform-box: fill-box; transform-origin: center; animation: corePulse 2.6s ease-in-out infinite; }

.legal { position: relative; padding-bottom: clamp(90px, 10vw, 150px); }
.tldr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: clamp(60px, 8vw, 110px); }
.tldr__item {
  padding: 28px 26px 30px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(17, 22, 40, .72), rgba(7, 9, 17, .9));
}
.tldr__item h3 { margin: 20px 0 8px; font-family: var(--f-display); font-weight: 500; font-size: 1.12rem; letter-spacing: -.02em; }
.tldr__item p { color: var(--ink-2); font-size: 15px; }

.legal__grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(36px, 6vw, 100px); align-items: start; }
.toc { position: sticky; top: 110px; }
.toc__title { margin-bottom: 18px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.toc__body { position: relative; padding-left: 22px; }
.toc__rail { position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: var(--line-2); }
.toc__fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--cyan), var(--violet));
  box-shadow: 0 0 10px rgba(46, 242, 255, .7);
  transform-origin: top;
  transform: scaleY(0);
}
.toc ol { margin: 0; padding: 0; list-style: none; }
.toc a { display: flex; gap: 12px; padding: 7px 0; font-size: 14px; line-height: 1.4; color: var(--muted); transition: color .3s, transform .4s var(--ease); }
.toc a span { flex: none; padding-top: 2px; font-family: var(--f-mono); font-size: 11px; color: var(--muted); transition: color .3s; }
.toc a:hover { color: var(--ink); }
.toc a.is-active { color: var(--ink); transform: translateX(4px); }
.toc a.is-active span { color: var(--cyan); }

.doc { min-width: 0; max-width: 780px; }
.doc__sec { padding-bottom: clamp(44px, 5vw, 64px); margin-bottom: clamp(44px, 5vw, 64px); border-bottom: 1px solid var(--line); scroll-margin-top: 110px; }
.doc__sec:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.doc__num { font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em; color: var(--cyan); }
.doc h2 { margin: 12px 0 20px; font-family: var(--f-display); font-weight: 500; font-size: clamp(1.45rem, 2.4vw, 2.1rem); line-height: 1.15; letter-spacing: -.03em; }
.doc p, .doc li { color: var(--ink-2); font-size: 16.5px; line-height: 1.75; }
.doc p + p, .doc ul + p, .doc .table-wrap + p, .doc .rights + p { margin-top: 16px; }
.doc ul { margin: 16px 0 0; padding: 0; list-style: none; }
.doc li { position: relative; padding-left: 28px; }
.doc li + li { margin-top: 12px; }
.doc li::before {
  content: '';
  position: absolute;
  left: 3px; top: .62em;
  width: 7px; height: 7px;
  border: 1px solid var(--cyan);
  transform: rotate(45deg);
  box-shadow: 0 0 8px rgba(46, 242, 255, .5);
}
.doc strong { color: var(--ink); font-weight: 600; }
.doc a:not(.btn) { color: var(--cyan); border-bottom: 1px solid rgba(46, 242, 255, .35); transition: border-color .3s; }
.doc a:not(.btn):hover { border-color: var(--cyan); }
.callout { margin-top: 22px; padding: 20px 22px; border-radius: 16px; border: 1px solid var(--line-2); background: rgba(46, 242, 255, .03); }
.doc .callout p + p { margin-top: 8px; }
.callout--cta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.callout--cta .btn { text-transform: none; letter-spacing: .02em; }
.table-wrap { margin-top: 20px; border: 1px solid var(--line); border-radius: 16px; overflow-x: auto; }
.doc table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14.5px; }
.doc th {
  padding: 14px 18px;
  text-align: left;
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line-2);
  background: rgba(255, 255, 255, .015);
}
.doc td { padding: 14px 18px; color: var(--ink-2); border-bottom: 1px solid var(--line); vertical-align: top; }
.doc tr:last-child td { border-bottom: 0; }
.doc code { font-family: var(--f-mono); font-size: 13px; color: var(--cyan); white-space: nowrap; }
.rights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; }
.right { padding: 18px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .015); transition: border-color .4s, background-color .4s; }
.right:hover { border-color: rgba(46, 242, 255, .4); background: rgba(46, 242, 255, .04); }
.right span { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em; color: var(--cyan); }
.right strong { display: block; margin: 8px 0 4px; font-family: var(--f-display); font-weight: 500; font-size: 1rem; }
.doc .right p { font-size: 14px; line-height: 1.55; }

/* ---------- regular WordPress pages (index.php) ---------- */
.wp-page { padding: clamp(140px, 15vw, 190px) 0 clamp(90px, 10vw, 140px); }
.wp-page__inner { max-width: 860px; }
.wp-entry + .wp-entry { margin-top: 70px; padding-top: 70px; border-top: 1px solid var(--line); }
.wp-entry__title { margin: 0 0 28px; }
.wp-entry__title a { transition: color .3s; }
.wp-entry__title a:hover { color: var(--cyan); }
.wp-entry__content > * + * { margin-top: 16px; }
.wp-entry__content h2, .wp-entry__content h3 { margin-top: 36px; }
.wp-entry__content img { height: auto; border-radius: 14px; }
.wp-page .nav-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 60px; font-family: var(--f-mono); font-size: 13px; }
.wp-page .page-numbers { padding: 8px 14px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--ink-2); }
.wp-page .page-numbers.current { color: var(--bg); background: var(--cyan); border-color: var(--cyan); }

@media (max-width: 1000px) {
  .legal-hero__grid { grid-template-columns: 1fr; }
  .legal-art { max-width: 460px; margin: 0 auto; }
  .legal__grid { grid-template-columns: 1fr; }
  .toc { position: relative; top: 0; padding: 22px 24px; border: 1px solid var(--line); border-radius: 18px; background: rgba(8, 10, 18, .5); }
  .toc__body { padding-left: 0; }
  .toc__rail { display: none; }
  .toc ol { columns: 2; column-gap: 28px; }
  .toc li { break-inside: avoid; }
  .rights { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .tldr { grid-template-columns: 1fr; }
  .toc ol { columns: 1; }
  .rights { gap: 10px; }
  .right { padding: 14px; }
  .doc p, .doc li { font-size: 15.5px; }
  .callout { padding: 18px; }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1180px) {
  .nav__links a { padding: 8px 12px; }
  .layers { --p: 200px; }
}

@media (max-width: 1000px) {
  .nav__links, .nav__cta { display: none; }
  .burger { display: block; }
  /* the EN/RO switch stays in the top bar, left of the menu button; the open menu doesn't repeat it */
  .menu .lang-switch { display: none; }

  .stack__grid { grid-template-columns: 1fr; gap: 50px; }
  .layers { --cx: 36%; }
  .contact__grid { grid-template-columns: 1fr; }
  .contact__copy { position: relative; top: 0; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: span 2; }
}

@media (min-width: 701px) and (max-width: 1000px) {
  .svc__card { grid-template-columns: 1fr 1fr; align-items: center; }
}

@media (max-width: 900px) {
  :root { --chip: clamp(150px, 40vw, 210px); }
  .hero { height: auto; min-height: 100svh; }
  .chip { left: calc(50% - var(--chip) / 2); top: 112px; }
  .hero__stage { transform-origin: 50% 25%; }
  .hero__shade {
    background:
      radial-gradient(120% 60% at 50% 22%, transparent 25%, rgba(4, 5, 10, .55) 70%, var(--bg) 100%),
      linear-gradient(0deg, rgba(4, 5, 10, .96) 0%, rgba(4, 5, 10, .82) 38%, rgba(4, 5, 10, 0) 62%);
  }
  .hero__content { justify-content: flex-end; padding-top: calc(112px + var(--chip) + 70px); padding-bottom: 100px; }
  .hud__block--tr, .hud__block--br .hud__xy, #hudXY { display: none; }
  .hud__block--tl { display: none; }
  .hud { inset: 84px 14px 20px; }
  .hud__block--bl { left: 18px; bottom: 16px; }
  .hud__block--br { right: 18px; bottom: 16px; }

  .about__grid { grid-template-columns: 1fr; gap: 26px; }
  .facts { grid-template-columns: 1fr; gap: 0; }
  .fact { padding: 22px 0 26px; }

  .timeline__rail { left: 27px; } /* the glowing head sits inside the rail and follows it */
  .step { grid-template-columns: 1fr; padding: 22px 0; }
  .step__node { left: 27px; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 11px; }
  .step__card, .step--r .step__card { grid-column: 1; justify-self: stretch; max-width: none; margin-left: 74px; width: auto; padding: 24px 22px; }
  .step__card::before, .step--r .step__card::before { left: auto; right: 100%; width: 25px; }
  .step.is-on .step__card::before, .step--r.is-on .step__card::before { background: linear-gradient(90deg, rgba(46, 242, 255, .3), var(--cyan)); }
  .motion .step__card, .motion .step--r .step__card { transform: translateX(30px); }

  .bento { grid-template-columns: 1fr 1fr; }
  .card--big { grid-column: span 2; grid-row: auto; }
}

@media (max-width: 700px) {
  body { font-size: 15.5px; }
  .hero__title { font-size: clamp(2.35rem, 11vw, 3.4rem); margin: 22px 0 20px; }
  .hero__ctas { margin-top: 30px; }
  .hero__ctas .btn { flex: 1 1 auto; }
  .hud__block--br span:last-child { display: none; }
  .eyebrow { font-size: 10px; letter-spacing: .1em; padding: 7px 13px 7px 10px; }

  .svc__card { border-radius: 22px; }
  .svc__num { font-size: 4.6rem; right: 18px; }
  .code-win { left: 30%; width: 70%; top: 56%; }

  .layers { --p: 128px; --t: 8px; --cx: 28%; height: 440px; }
  .layer__line { width: 10px; left: calc(50% + var(--p) * .71 + 4px); }
  .layer__line::after { display: none; }
  .layer__label { left: calc(50% + var(--p) * .71 + 18px); max-width: 140px; column-gap: 8px; }
  .layer__num { grid-row: auto; font-size: 10px; }
  .layer__label strong { font-size: .86rem; }
  .layer__label small { display: none; }
  .sigpath li { font-size: 11px; padding: 6px 9px; }

  .bento { grid-template-columns: 1fr; }
  .card--big { grid-column: auto; }
  .monitor__stats { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .monitor__stats > div { padding: 10px; }
  .monitor__stats b { font-size: .9rem; }

  .form__row { grid-template-columns: 1fr; }
  .btn--submit { width: 100%; }
  .console__bar { padding: 13px 16px; }
  .console__title { display: none; }

  .footer__grid { grid-template-columns: 1fr; gap: 30px; }
  .footer__brand { grid-column: auto; }

  .consent { left: 12px; right: 12px; bottom: 12px; width: auto; max-height: calc(100vh - 24px); border-radius: 18px; }
  .consent__body { padding: 18px 18px 16px; }
}

/* narrow phones: logo, EN/RO switch and menu button share one row */
@media (max-width: 380px) {
  .nav__right { gap: 8px; }
  .brand { gap: 8px; }
  .brand__mark { width: 26px; height: 26px; }
  .brand__word { font-size: 15px; letter-spacing: .16em; }
  .lang-switch button, .lang-switch__thumb { width: 34px; height: 30px; }
  .lang-switch[data-active="ro"] .lang-switch__thumb { transform: translateX(34px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .grain { display: none; }
  .hw-traces path, .web-line, .done__icon path { stroke-dashoffset: 0; }
  .web-gauge { stroke-dashoffset: 28; }
  .auto-box { opacity: 1; }
  .auto-box:nth-child(2) { transform: translateX(140px); }
  .auto-box:nth-child(3) { transform: translateX(260px); }
}