:root {
  color-scheme: dark;
  --ink: #f7f9ff;
  --muted: rgba(224, 232, 249, 0.58);
  --dim: rgba(224, 232, 249, 0.34);
  --line: rgba(255, 255, 255, 0.11);
  --line-strong: rgba(255, 255, 255, 0.2);
  --blue: #74a7ff;
  --blue-deep: #275dbb;
  --bg: #02050b;
  --shell: min(1180px, calc(100% - 48px));
  --ease: cubic-bezier(.2, .8, .2, 1);
  --mx: 50vw;
  --my: 35vh;
  --nav-x: 50%;
  --nav-wave: 0px;
  --scroll-progress: 0;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.menu-open { overflow: hidden; }
button, a { color: inherit; font: inherit; }
a { text-decoration: none; }
button { border: 0; }
img, svg { display: block; }
[hidden] { display: none !important; }
::selection { background: rgba(111, 165, 255, .32); color: #fff; }

.ambient {
  position: fixed;
  inset: 0;
  z-index: -5;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% -8%, rgba(39, 91, 183, .18), transparent 37%),
    linear-gradient(180deg, #02050b 0%, #020711 56%, #010309 100%);
}
#ambient-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .58; }
.ambient-grid {
  position: absolute;
  inset: 0;
  opacity: .14;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 74px 74px;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 76%);
}
.ambient-light {
  position: absolute;
  width: 58vw;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(110px);
  opacity: .17;
  will-change: transform;
}
.ambient-light-a {
  top: -24vw;
  right: -18vw;
  background: #2c67d5;
  animation: drift-a 18s ease-in-out infinite alternate;
}
.ambient-light-b {
  left: -28vw;
  top: 42vh;
  background: #123774;
  animation: drift-b 23s ease-in-out infinite alternate;
}
.cursor-light {
  position: absolute;
  left: 0;
  top: 0;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(106, 159, 255, .12), transparent 66%);
  filter: blur(16px);
  transform: translate3d(calc(var(--mx) - 280px), calc(var(--my) - 280px), 0);
  will-change: transform;
}
@keyframes drift-a { to { transform: translate(-10vw, 16vh) scale(1.12); } }
@keyframes drift-b { to { transform: translate(18vw, -14vh) scale(.9); } }

.section-shell { width: var(--shell); margin-inline: auto; }

.site-header {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  left: 50%;
  z-index: 1000;
  width: max-content;
  max-width: calc(100% - 28px);
  transform: translateX(-50%);
}
.nav-shell {
  --liquid-opacity: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: 100%;
  min-height: 54px;
  margin-inline: auto;
  padding: 0 28px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 18px;
  background: rgba(255,255,255,.035);
  box-shadow:
    0 18px 52px rgba(0,0,0,.2),
    inset 0 1px 1px rgba(255,255,255,.5),
    inset 0 -1px 1px rgba(255,255,255,.16),
    inset 10px 0 24px rgba(255,255,255,.055),
    inset -10px 0 24px rgba(104,151,255,.045);
  backdrop-filter: blur(18px) saturate(230%) contrast(1.18) brightness(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(230%) contrast(1.18) brightness(1.08);
  transform: translateY(var(--nav-wave));
  transition:
    min-height 260ms var(--ease),
    border-color 260ms ease,
    box-shadow 260ms ease,
    backdrop-filter 260ms ease,
    -webkit-backdrop-filter 260ms ease,
    transform 150ms ease;
}
.nav-shell::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  border-radius: inherit;
  opacity: var(--liquid-opacity);
  background:
    radial-gradient(220px circle at 16% 120%, rgba(152,190,255,.16), transparent 64%),
    linear-gradient(115deg, transparent 4%, rgba(255,255,255,.12) 36%, transparent 70%);
  mix-blend-mode: screen;
  transition: opacity 260ms ease;
}
.nav-shell::after {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 0;
  height: 1px;
  content: "";
  opacity: var(--liquid-opacity);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.88), rgba(255,255,255,.3), transparent);
  transition: opacity 260ms ease;
}
.site-header.scrolled .nav-shell {
  --liquid-opacity: 1;
  min-height: 52px;
  border-color: rgba(255,255,255,.34);
  background: rgba(255,255,255,.045);
  box-shadow:
    0 20px 58px rgba(0,0,0,.24),
    inset 0 1px 1px rgba(255,255,255,.55),
    inset 0 -1px 1px rgba(255,255,255,.18),
    inset 12px 0 26px rgba(255,255,255,.065),
    inset -12px 0 26px rgba(104,151,255,.055);
  backdrop-filter: blur(20px) saturate(245%) contrast(1.22) brightness(1.1);
  -webkit-backdrop-filter: blur(20px) saturate(245%) contrast(1.22) brightness(1.1);
}
.site-header > .nav-shell > .brand { display: none; }
.brand {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .68rem;
  min-width: 0;
  color: rgba(248,250,255,.92);
  font-size: .92rem;
  font-weight: 690;
  letter-spacing: -.025em;
}
.brand-mark {
  color: #fff;
  font-size: .95rem;
  font-weight: 850;
  letter-spacing: -.09em;
  text-shadow: 0 0 20px rgba(112,166,255,.62);
}
.brand-domain { color: rgba(227,235,251,.38); }
.desktop-nav { display: flex; align-items: center; justify-content: center; gap: 1.45rem; }
.desktop-nav a {
  position: relative;
  padding: .46rem .62rem;
  border-radius: 999px;
  background: transparent;
  color: rgba(232,238,250,.52);
  font-size: .84rem;
  font-weight: 610;
  letter-spacing: -.01em;
  transition:
    background 180ms ease,
    box-shadow 180ms ease,
    color 180ms ease,
    text-shadow 180ms ease,
    transform 180ms var(--ease);
}
.desktop-nav a::after {
  position: absolute;
  left: .72rem;
  right: .72rem;
  bottom: .32rem;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(225,236,255,.82), transparent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 220ms var(--ease);
}
.desktop-nav a:hover,
.desktop-nav a.active {
  background: rgba(255,255,255,.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(255,255,255,.07),
    0 8px 22px rgba(0,0,0,.14);
  color: #fff;
  text-shadow: 0 0 16px rgba(206,225,255,.42);
  transform: translateY(-1px) scale(1.04);
}
.desktop-nav a:hover::after,
.desktop-nav a.active::after { transform: scaleX(1); transform-origin: left; }
.menu-toggle, .menu-back {
  display: none;
  position: relative;
  z-index: 2;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.menu-toggle span {
  position: absolute;
  left: 11px;
  width: 20px;
  height: 1px;
  background: #fff;
  transition: transform 240ms var(--ease), top 240ms var(--ease);
}
.menu-toggle span:first-child { top: 17px; }
.menu-toggle span:last-child { top: 24px; }
.menu-toggle[aria-expanded="true"] span:first-child { top: 21px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { top: 21px; transform: rotate(-45deg); }
.mobile-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  display: grid;
  gap: .35rem;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 18px;
  background: rgba(3,8,17,.58);
  box-shadow: 0 28px 70px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.13);
  backdrop-filter: blur(28px) saturate(170%);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(.985);
  transform-origin: top;
  transition: opacity 200ms ease, transform 240ms var(--ease), visibility 200ms;
}
.mobile-menu.open { opacity: 1; visibility: visible; transform: none; }
.mobile-menu a { padding: .9rem 1rem; border-radius: 12px; color: rgba(240,244,255,.76); font-weight: 620; }
.mobile-menu a:hover { background: rgba(255,255,255,.06); color: #fff; }

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(390px, .78fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 7rem);
  padding-top: 112px;
  padding-bottom: 126px;
}
.hero-copy { position: relative; z-index: 4; }
.hero-label,
.eyebrow {
  margin: 0;
  color: rgba(210,223,247,.46);
  font-size: .72rem;
  font-weight: 760;
  letter-spacing: .18em;
}
.hero-title {
  margin: 1.25rem 0 0;
  font-size: clamp(4.4rem, 8.4vw, 8.7rem);
  font-weight: 710;
  line-height: .84;
  letter-spacing: -.085em;
}
.hero-line { display: block; overflow: hidden; padding-right: .08em; }
.hero-line > span { display: block; }
.hero-line-accent {
  color: transparent;
  background: linear-gradient(112deg, #fff 4%, #9abfff 45%, #467cd5 90%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 0 70px rgba(82,135,231,.22);
}
.hero-sub { margin: 1.65rem 0 0; color: rgba(224,232,247,.52); font-size: .94rem; letter-spacing: .06em; }
.glass-action {
  --magnetic-x: 0px;
  --magnetic-y: 0px;
  --ripple-x: 50%;
  --ripple-y: 50%;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  min-height: 50px;
  margin-top: 2rem;
  padding: 0 1.25rem;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.21);
  border-radius: 15px;
  background: linear-gradient(130deg, rgba(255,255,255,.105), rgba(255,255,255,.015));
  box-shadow: 0 18px 44px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.22);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  color: #fff;
  font-size: .84rem;
  font-weight: 700;
  transform: translate(var(--magnetic-x), var(--magnetic-y));
  transition: transform 180ms var(--ease), border-color 180ms ease, box-shadow 180ms ease;
}
.glass-action::before {
  position: absolute;
  inset: 0;
  content: "";
  background: radial-gradient(160px circle at 25% 0%, rgba(255,255,255,.23), transparent 55%);
  pointer-events: none;
}
.glass-action::after {
  position: absolute;
  left: var(--ripple-x);
  top: var(--ripple-y);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  content: "";
  background: rgba(255,255,255,.25);
  opacity: 0;
  transform: translate(-50%,-50%) scale(0);
  pointer-events: none;
}
.glass-action svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform 180ms var(--ease); }
.glass-action:hover { border-color: rgba(255,255,255,.34); box-shadow: 0 24px 58px rgba(18,64,145,.24), inset 0 1px 0 rgba(255,255,255,.3); }
.glass-action:hover svg { transform: translateX(3px); }
.glass-action.is-pressed { transform: translate(var(--magnetic-x), var(--magnetic-y)) scale(.965); }
.glass-action.rippling::after { animation: button-ripple 620ms ease-out; }
@keyframes button-ripple { 0% { opacity: .7; transform: translate(-50%,-50%) scale(0); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(18); } }

.hero-field {
  position: relative;
  min-height: min(62vw, 680px);
  transform-style: preserve-3d;
  perspective: 1000px;
}
.hero-lens {
  --rx: 0deg;
  --ry: 0deg;
  --tx: 0px;
  --ty: 0px;
  position: absolute;
  left: 50%;
  top: 48%;
  width: clamp(245px, 27vw, 390px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 43% 57% 53% 47% / 48% 46% 54% 52%;
  background:
    radial-gradient(circle at 33% 23%, rgba(255,255,255,.34), transparent 23%),
    radial-gradient(circle at 61% 67%, rgba(65,119,216,.34), transparent 49%),
    linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.012));
  box-shadow:
    0 70px 140px rgba(0,0,0,.4),
    inset 18px 20px 42px rgba(255,255,255,.09),
    inset -20px -25px 58px rgba(0,0,0,.25),
    0 0 110px rgba(52,105,206,.16);
  backdrop-filter: blur(34px) saturate(190%);
  -webkit-backdrop-filter: blur(34px) saturate(190%);
  transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) rotateX(var(--rx)) rotateY(var(--ry));
  animation: lens-morph 12s ease-in-out infinite alternate;
  will-change: transform, border-radius;
}
.hero-lens::before {
  position: absolute;
  inset: 9%;
  content: "";
  border: 1px solid rgba(255,255,255,.13);
  border-radius: inherit;
  box-shadow: inset 0 0 52px rgba(95,148,244,.12);
}
.hero-lens::after {
  position: absolute;
  inset: -18%;
  content: "";
  border-radius: 50%;
  background: radial-gradient(circle, rgba(67,119,216,.18), transparent 67%);
  filter: blur(32px);
  z-index: -1;
}
.lens-core { font-size: clamp(2.2rem, 4vw, 4.2rem); font-weight: 850; letter-spacing: -.12em; text-shadow: 0 0 38px rgba(150,190,255,.48); }
.lens-glint {
  position: absolute;
  left: 20%;
  top: 12%;
  width: 42%;
  height: 15%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.48), transparent);
  filter: blur(6px);
  transform: rotate(-20deg);
}
.hero-ring { position: absolute; left: 50%; top: 48%; border: 1px solid rgba(143,181,247,.18); border-radius: 50%; transform: translate(-50%,-50%); }
.ring-a { width: 76%; aspect-ratio: 1; animation: orbit-spin 24s linear infinite; }
.ring-b { width: 58%; aspect-ratio: 1; border-style: dashed; animation: orbit-spin 17s linear infinite reverse; }
.ring-c { width: 92%; aspect-ratio: 1; opacity: .38; animation: breathe 6s ease-in-out infinite; }
.hero-dataflow,
.hero-node-map {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.hero-dataflow span {
  position: absolute;
  display: block;
  width: clamp(90px, 12vw, 180px);
  height: 1px;
  overflow: hidden;
  border-radius: 999px;
  opacity: .62;
  background: linear-gradient(90deg, transparent, rgba(142,184,255,.72), rgba(132,242,214,.48), transparent);
  filter: drop-shadow(0 0 12px rgba(108,160,255,.32));
  transform-origin: center;
  animation: dataflow-sweep 4.8s var(--ease) infinite;
}
.hero-dataflow span:nth-child(1) { left: 19%; top: 31%; transform: rotate(18deg); }
.hero-dataflow span:nth-child(2) { right: 4%; top: 50%; transform: rotate(-10deg); animation-delay: .75s; }
.hero-dataflow span:nth-child(3) { left: 14%; bottom: 26%; transform: rotate(-8deg); animation-delay: 1.5s; }
.hero-dataflow span:nth-child(4) { right: 18%; bottom: 21%; transform: rotate(10deg); animation-delay: 2.25s; }
.hero-node-map span {
  position: absolute;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(206,225,255,.55);
  border-radius: 2px;
  background: rgba(116,167,255,.2);
  box-shadow: 0 0 18px rgba(108,160,255,.34);
  animation: node-tick 3.2s ease-in-out infinite;
}
.hero-node-map span:nth-child(1) { left: 34%; top: 18%; }
.hero-node-map span:nth-child(2) { right: 23%; top: 28%; animation-delay: .45s; }
.hero-node-map span:nth-child(3) { left: 22%; top: 58%; animation-delay: .9s; }
.hero-node-map span:nth-child(4) { right: 12%; bottom: 28%; animation-delay: 1.35s; }
.hero-node-map span:nth-child(5) { left: 48%; bottom: 13%; animation-delay: 1.8s; }
@keyframes dataflow-sweep {
  0%, 100% { opacity: .18; clip-path: inset(0 100% 0 0); }
  34%, 64% { opacity: .76; clip-path: inset(0 0 0 0); }
  86% { opacity: .2; clip-path: inset(0 0 0 100%); }
}
@keyframes node-tick {
  0%, 100% { opacity: .22; transform: scale(.84); }
  50% { opacity: .88; transform: scale(1.08); }
}
@keyframes bridge-drift {
  0%, 100% { opacity: .18; clip-path: inset(0 88% 0 0); }
  42%, 66% { opacity: .74; clip-path: inset(0 0 0 0); }
  90% { opacity: .2; clip-path: inset(0 0 0 88%); }
}
.signal {
  position: absolute;
  display: flex;
  align-items: center;
  gap: .55rem;
  color: rgba(226,235,252,.42);
  font-size: .64rem;
  font-weight: 760;
  letter-spacing: .16em;
}
.signal i { width: 5px; height: 5px; border-radius: 50%; background: #8bb6ff; box-shadow: 0 0 15px #6da2ff; }
.signal-a { left: 2%; top: 26%; }
.signal-b { right: 0; top: 34%; }
.signal-c { right: 12%; bottom: 16%; }
@keyframes lens-morph { 0% { border-radius: 43% 57% 53% 47% / 48% 46% 54% 52%; } 100% { border-radius: 57% 43% 45% 55% / 42% 57% 43% 58%; } }
@keyframes orbit-spin { to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes breathe { 50% { opacity: .7; transform: translate(-50%,-50%) scale(1.03); } }

.hero-bridge {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(178px, 20vw, 260px);
  margin-top: clamp(-48px, -3vw, -24px);
  isolation: isolate;
}
.hero-bridge::before {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(980px, 96vw);
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(120,166,255,.28), rgba(132,242,214,.2), rgba(120,166,255,.28), transparent);
  transform: translate(-50%, -50%);
}
.hero-bridge::after {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: min(760px, 78vw);
  aspect-ratio: 5 / 1;
  content: "";
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(78,132,235,.13), rgba(78,132,235,.045) 38%, transparent 72%);
  filter: blur(28px);
  transform: translate(-50%, -50%);
}
.bridge-visual {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.bridge-visual span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(110px, 15vw, 210px);
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(177,205,255,.42), transparent);
  transform-origin: 0 50%;
  animation: bridge-drift 7s ease-in-out infinite;
}
.bridge-visual span:nth-child(1) { transform: translate(-50%, -50%) rotate(0deg); }
.bridge-visual span:nth-child(2) { transform: translate(-50%, -50%) rotate(32deg); animation-delay: .6s; }
.bridge-visual span:nth-child(3) { transform: translate(-50%, -50%) rotate(-32deg); animation-delay: 1.2s; }
.bridge-visual span:nth-child(4) { transform: translate(-50%, -50%) rotate(44deg); animation-delay: 1.8s; }
.bridge-visual span:nth-child(5) { transform: translate(-50%, -50%) rotate(-44deg); animation-delay: 2.4s; }
.identity-hud {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  justify-content: center;
  gap: clamp(2rem, 8vw, 7rem);
  width: min(880px, 88vw);
  margin: 0;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.18);
}
.identity-hud > div { min-width: 0; text-align: center; }
.identity-hud dt { color: rgba(219,229,247,.31); font-size: .61rem; font-weight: 760; letter-spacing: .18em; }
.identity-hud dd { margin: .34rem 0 0; color: rgba(245,248,255,.76); font-size: clamp(.78rem, 1.2vw, .95rem); font-weight: 660; letter-spacing: .025em; font-variant-numeric: tabular-nums; }

.about, .work, .discord { padding-top: clamp(96px, 11vw, 168px); }
.about { padding-bottom: clamp(80px, 10vw, 145px); }
.section-marker { display: flex; align-items: center; gap: 1rem; margin-bottom: 3rem; }
.section-marker span { color: rgba(216,226,244,.31); font-size: .68rem; font-weight: 760; letter-spacing: .14em; }
.section-marker i { display: block; width: 46px; height: 1px; background: rgba(255,255,255,.12); }
.about-content { max-width: 960px; }
.about-content h2 {
  margin: 1rem 0 0;
  font-size: clamp(2.5rem, 5.8vw, 6.1rem);
  font-weight: 610;
  line-height: .98;
  letter-spacing: -.065em;
}
.section-title-row { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 3rem; }
.section-title-row h2, .tools-header h2, .presence-heading h2 {
  margin: .75rem 0 0;
  font-size: clamp(2.45rem, 5.2vw, 5.4rem);
  line-height: .96;
  letter-spacing: -.065em;
}

.concept-stack { display: grid; gap: 18px; }
.concept {
  --cx: 50%;
  --cy: 50%;
  position: relative;
  min-height: 500px;
  overflow: hidden;
  display: grid;
  grid-template-columns: .42fr 1fr;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 26px;
  background:
    radial-gradient(500px circle at var(--cx) var(--cy), rgba(111,164,255,.1), transparent 56%),
    linear-gradient(140deg, rgba(255,255,255,.035), transparent 38%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 40px 100px rgba(0,0,0,.22);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transform: translateZ(0);
  transition: border-color 260ms ease, box-shadow 260ms ease, transform 260ms var(--ease);
}
.concept::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(115deg, transparent 0 34%, rgba(255,255,255,.07) 48%, transparent 63%),
    radial-gradient(420px circle at var(--cx) var(--cy), rgba(132,242,214,.08), transparent 58%);
  transform: translateX(-8%);
  transition: opacity 260ms ease, transform 420ms var(--ease);
}
.concept:hover {
  border-color: rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 55px 120px rgba(0,0,0,.3);
  transform: translateY(-2px);
}
.concept:hover::after,
.concept:focus-within::after {
  opacity: 1;
  transform: translateX(0);
}
.concept-copy { position: relative; z-index: 3; align-self: end; padding: clamp(2rem, 4vw, 4rem); }
.concept-copy span { color: rgba(219,230,250,.34); font-size: .64rem; font-weight: 760; letter-spacing: .16em; }
.concept-copy h3 { margin: .75rem 0 0; font-size: clamp(3rem, 6vw, 6.5rem); line-height: .9; letter-spacing: -.075em; }
.concept-visual { position: relative; z-index: 2; min-width: 0; overflow: hidden; }
.concept-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}
.concept-meta li {
  min-width: min(100%, 112px);
  padding: .62rem .72rem;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 10px;
  background: rgba(255,255,255,.035);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.concept-meta b {
  display: block;
  color: rgba(246,249,255,.92);
  font-size: .78rem;
  line-height: 1;
}
.concept-meta span {
  display: block;
  margin-top: .28rem;
  color: rgba(220,230,248,.42);
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.15;
  text-transform: uppercase;
}
.concept-nox { background-color: rgba(4,7,14,.42); }
.nox-word { position: absolute; right: 5%; top: 50%; color: rgba(255,255,255,.93); font-size: clamp(6rem, 17vw, 16rem); font-weight: 820; line-height: .8; letter-spacing: -.1em; transform: translateY(-50%); }
.nox-disc { position: absolute; right: 14%; top: 50%; width: clamp(180px, 25vw, 330px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 32% 27%, #d9e8ff 0 4%, #6799ed 12%, #15356d 45%, #02060d 69%); box-shadow: 0 0 110px rgba(56,111,210,.42); transform: translateY(-50%); animation: disc-float 5s ease-in-out infinite; }
.nox-disc i { position: absolute; inset: 12%; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; }
.nox-disc b { position: absolute; inset: 38%; border-radius: 50%; background: #02050b; box-shadow: inset 0 0 17px rgba(255,255,255,.1); }
.scan-line { position: absolute; top: -20%; right: 0; width: 3px; height: 140%; background: linear-gradient(transparent, rgba(163,197,255,.8), transparent); filter: blur(1px); animation: scan 5s ease-in-out infinite; }
@keyframes disc-float { 50% { transform: translateY(calc(-50% - 12px)) rotate(4deg); } }
@keyframes scan { 0%,100% { right: 4%; opacity: 0; } 25% { opacity: 1; } 70% { right: 92%; opacity: .6; } }

.concept-vertex {
  background:
    radial-gradient(680px circle at 78% 42%, rgba(55,93,163,.18), transparent 60%),
    radial-gradient(520px circle at 22% 82%, rgba(12,20,38,.36), transparent 64%),
    rgba(3,7,15,.56);
}
.vertex-ui {
  position: absolute;
  inset: 12% 7% 8%;
  padding: clamp(1.35rem, 2.5vw, 2.4rem);
  overflow: hidden;
  border: 1px solid rgba(171,202,255,.14);
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(177,202,246,.07), rgba(35,57,97,.035) 42%, rgba(2,6,14,.22)),
    rgba(3,7,16,.62);
  box-shadow:
    0 34px 92px rgba(0,0,0,.34),
    0 0 0 1px rgba(255,255,255,.035) inset,
    inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(18px) saturate(128%);
  -webkit-backdrop-filter: blur(18px) saturate(128%);
  transform: perspective(1100px) rotateY(-2deg) rotateX(1deg);
  transform-origin: center;
  transition: transform 420ms var(--ease), border-color 260ms ease, box-shadow 260ms ease;
}
.concept-vertex:hover .vertex-ui {
  border-color: rgba(160,196,255,.24);
  box-shadow:
    0 42px 110px rgba(0,0,0,.42),
    0 0 0 1px rgba(255,255,255,.055) inset,
    inset 0 1px 0 rgba(255,255,255,.11);
  transform: perspective(1100px) rotateY(0deg) rotateX(0deg) translateY(-3px);
}
.vertex-ui small { color: rgba(216,228,248,.46); font-weight: 760; letter-spacing: .18em; }
.vertex-ui > small {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
}
.vertex-ui > small::after {
  display: block;
  width: clamp(72px, 13vw, 150px);
  height: 1px;
  content: "";
  background: linear-gradient(90deg, rgba(158,194,255,.42), transparent);
}
.vertex-ui strong {
  display: block;
  max-width: 86%;
  margin-top: .95rem;
  color: rgba(246,249,255,.96);
  font-size: clamp(2.45rem, 4.7vw, 5.1rem);
  letter-spacing: -.055em;
  text-shadow: 0 16px 46px rgba(84,139,238,.24);
}
.vertex-candles {
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: 11%;
  width: 88%;
  height: 45%;
  overflow: hidden;
  padding-top: 6%;
  border-top: 1px solid rgba(255,255,255,.07);
  background:
    linear-gradient(180deg, rgba(255,255,255,.026), transparent 50%),
    repeating-linear-gradient(0deg, rgba(163,191,241,.055) 0 1px, transparent 1px 34%),
    repeating-linear-gradient(90deg, rgba(163,191,241,.04) 0 1px, transparent 1px 12.5%);
  opacity: .96;
}
.vertex-candles::before {
  position: absolute;
  right: 2%;
  bottom: 12%;
  left: 0;
  height: 44%;
  content: "";
  background: linear-gradient(18deg, transparent 0 9%, rgba(105,151,232,.1) 10% 48%, transparent 49% 100%);
  opacity: var(--vertex-progress, 0);
  transform: translateY(12px);
  transition: opacity 520ms ease, transform 720ms var(--ease);
}
.vertex-ui.has-progress .vertex-candles::before {
  opacity: 1;
  transform: none;
}
.vertex-candle {
  position: absolute;
  left: var(--x);
  top: 0;
  bottom: 0;
  width: clamp(7px, 1.1vw, 12px);
  opacity: 0;
  transform: translateY(18px) scaleY(.65);
  transform-origin: 50% 100%;
  filter: blur(2px);
  transition: opacity 220ms ease, transform 320ms var(--ease), filter 220ms ease;
}
.vertex-candle::before,
.vertex-candle::after {
  position: absolute;
  left: 50%;
  content: "";
  transform: translateX(-50%);
}
.vertex-candle::before {
  top: var(--wick-top);
  width: 1px;
  height: var(--wick-height);
  background: rgba(176,202,247,.5);
}
.vertex-candle::after {
  top: var(--body-top);
  width: 100%;
  height: var(--body-height);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(161,193,248,.98), rgba(77,124,205,.84));
  box-shadow: 0 0 18px rgba(98,147,231,.24);
}
.vertex-candle.down::after {
  background: linear-gradient(180deg, rgba(112,132,165,.82), rgba(49,65,95,.78));
  box-shadow: 0 0 14px rgba(85,113,164,.16);
}
.vertex-candle.final::after {
  background: linear-gradient(180deg, #d9e7ff, #78a9ff);
  box-shadow: 0 0 24px rgba(112,165,255,.42);
}
.vertex-candle.is-on {
  opacity: 1;
  transform: none;
  filter: blur(0);
}
.vertex-ui:not(.has-progress) {
  border-color: rgba(118,151,207,.12);
  box-shadow:
    0 28px 84px rgba(0,0,0,.4),
    0 0 0 1px rgba(255,255,255,.025) inset,
    inset 0 1px 0 rgba(255,255,255,.055);
}

.concept-nexus { background-color: rgba(3,7,15,.48); }
.nexus-ui { position: absolute; inset: 12% 8% 8%; display: grid; grid-template-columns: 80px 1fr; border: 1px solid rgba(255,255,255,.09); background: rgba(5,11,23,.38); box-shadow: 0 30px 80px rgba(0,0,0,.3); transform: perspective(900px) rotateY(-4deg) rotateX(2deg); }
.nexus-rail { padding: 1.4rem 1rem; display: grid; align-content: start; justify-items: center; gap: 1rem; border-right: 1px solid rgba(255,255,255,.08); }
.nexus-rail i { width: 30px; height: 30px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: rgba(91,140,228,.13); }
.nexus-rail i:first-child { background: #5f8fe5; box-shadow: 0 0 25px rgba(78,131,227,.36); }
.nexus-content { padding: 2rem; overflow: hidden; }
.nexus-content > strong { font-size: clamp(1.7rem, 3vw, 3rem); letter-spacing: -.05em; }
.nexus-content > span { display: block; width: 48%; height: 8px; margin-top: .75rem; border-radius: 20px; background: rgba(255,255,255,.08); }
.nexus-content > span:nth-of-type(2) { width: 31%; }
.nexus-content > span:nth-of-type(3) { width: 40%; }
.nexus-content > div { display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 1rem; margin-top: 1.7rem; }
.nexus-content > div i { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(145deg, #6d9cf0, #193b74); }
.nexus-content > div b { display: block; width: 68%; height: 10px; border-radius: 20px; background: rgba(255,255,255,.1); animation: message-glow 2.6s ease-in-out infinite; }
.nexus-content > div:last-child b { width: 48%; animation-delay: .7s; }
@keyframes message-glow { 50% { background: rgba(116,165,255,.23); } }

.discord { padding-bottom: clamp(100px, 13vw, 170px); }
.presence { display: grid; grid-template-columns: .72fr 1.28fr; align-items: start; gap: clamp(2rem, 8vw, 8rem); padding: clamp(2rem, 4vw, 4.5rem) 0; border-top: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); }
.presence-profile { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 1.25rem; min-width: 0; }
.discord-avatar-wrap { position: relative; width: 58px; height: 58px; flex: 0 0 auto; }
.discord-avatar-wrap img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 12px 34px rgba(0,0,0,.32); }
.status-indicator { position: absolute; right: -2px; bottom: -1px; width: 15px; height: 15px; border: 3px solid #02050b; border-radius: 50%; }
.status-indicator.online, .mini-status.online { background: #43d68d; }
.status-indicator.idle, .mini-status.idle { background: #f2b34c; }
.status-indicator.dnd, .mini-status.dnd { background: #ef5d67; }
.status-indicator.offline, .mini-status.offline { background: #667083; }
.discord-identity { min-width: 0; }
.discord-name-line { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.discord-name-line h3 { margin: 0; overflow: hidden; color: #fff; font-size: clamp(1.2rem, 2.2vw, 1.65rem); letter-spacing: -.035em; text-overflow: ellipsis; white-space: nowrap; }
.discord-identity p { margin: .14rem 0 0; color: rgba(221,231,248,.42); font-size: .8rem; }
.discord-badges { display: flex; gap: .3rem; }
.discord-badge { display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; color: rgba(239,245,255,.78); font-size: .55rem; font-weight: 800; }
.discord-state { display: flex; align-items: center; gap: .5rem; color: rgba(238,243,255,.72); font-size: .78rem; white-space: nowrap; }
.mini-status { width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 14px currentColor; }
.activity-card { grid-column: 2 / -1; display: grid; grid-template-columns: 46px minmax(0,1fr); align-items: center; gap: .8rem; min-width: 0; padding-top: .55rem; }
.activity-art { display: grid; place-items: center; width: 46px; height: 46px; overflow: hidden; border-radius: 11px; background: rgba(255,255,255,.06); color: rgba(255,255,255,.72); }
.activity-art img { width: 100%; height: 100%; object-fit: cover; }
.activity-card strong, .activity-card p, .activity-card small { display: block; overflow: hidden; margin: 0; text-overflow: ellipsis; white-space: nowrap; }
.activity-card strong { font-size: .78rem; }
.activity-card p, .activity-card small { color: rgba(219,229,246,.38); font-size: .68rem; }
.text-action { grid-column: 2 / -1; justify-self: start; display: inline-flex; align-items: center; gap: .45rem; margin-top: .35rem; color: rgba(230,238,253,.58); font-size: .76rem; font-weight: 680; transition: color 180ms ease, transform 180ms var(--ease); }
.text-action:hover { color: #fff; transform: translateX(3px); }

.tools-section { overflow: hidden; padding: clamp(80px, 10vw, 145px) 0; }
.tools-header { margin-bottom: 2.6rem; }
.tools-header .section-marker { margin-bottom: 1.4rem; }
.tools-marquee { position: relative; width: 100%; overflow: hidden; contain: layout paint; mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.tools-track { display: flex; width: max-content; transform: translate3d(0,0,0); will-change: transform; backface-visibility: hidden; }
.tools-group { flex: 0 0 auto; display: flex; align-items: center; gap: clamp(2.5rem, 5vw, 6rem); padding-right: clamp(2.5rem, 5vw, 6rem); }
.tool { position: relative; display: grid; place-items: center; width: clamp(54px, 5vw, 78px); height: clamp(54px, 5vw, 78px); flex: 0 0 auto; border-radius: 18px; outline: none; cursor: default; }
.tool::before { position: absolute; inset: -18px; content: ""; border-radius: 50%; background: radial-gradient(circle, rgba(86,143,244,.15), transparent 68%); opacity: 0; transform: scale(.72); transition: opacity 220ms ease, transform 260ms var(--ease); }
.tool img { position: relative; width: 74%; height: 74%; object-fit: contain; filter: saturate(.9) brightness(1.08); opacity: .9; transition: opacity 220ms ease, filter 220ms ease, transform 260ms var(--ease); }
.tool:hover::before { opacity: 1; transform: scale(1); }
.tool:hover img { opacity: 1; filter: saturate(1.08) brightness(1.18); transform: translateY(-5px) scale(1.08); }

.contact { padding: clamp(80px, 10vw, 145px) 0 clamp(110px, 13vw, 175px); }
.contact-line { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: clamp(2rem, 4vw, 4rem) 0; border-top: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); }
.contact-line h2 { margin: 0; font-size: clamp(2.8rem, 6.5vw, 7rem); line-height: .9; letter-spacing: -.075em; }
.contact-line .glass-action { margin-top: 0; flex: 0 0 auto; }
.site-footer { display: flex; align-items: center; justify-content: space-between; padding: 0 0 max(34px, env(safe-area-inset-bottom)); color: rgba(221,230,247,.35); font-size: .75rem; }
.site-footer .brand { color: rgba(242,246,255,.62); }

.intro { opacity: 0; transform: translateY(18px); animation: intro-fade 850ms var(--ease) forwards; }
.intro-line > span { transform: translateY(112%) rotate(2deg); animation: intro-line 950ms var(--ease) forwards; }
.intro-1 { animation-delay: 80ms; }
.intro-2 > span { animation-delay: 150ms; }
.intro-3 > span { animation-delay: 235ms; }
.intro-4 { animation-delay: 380ms; }
.intro-5 { animation-delay: 470ms; }
.intro-6 { animation-delay: 250ms; }
.intro-7 { animation-delay: 640ms; }
@keyframes intro-fade { to { opacity: 1; transform: none; } }
@keyframes intro-line { to { transform: none; } }
.reveal { opacity: 0; filter: none; transform: translateY(28px); transition: opacity 620ms var(--ease), transform 620ms var(--ease); }
.reveal.is-visible { opacity: 1; filter: none; transform: none; }
.pressable { -webkit-tap-highlight-color: transparent; }
.pressable.is-pressed { transform: scale(.97); }

.toast { position: fixed; left: 50%; bottom: 24px; z-index: 2000; padding: .72rem 1rem; border: 1px solid rgba(255,255,255,.15); border-radius: 12px; background: rgba(3,8,17,.65); box-shadow: 0 20px 60px rgba(0,0,0,.4); backdrop-filter: blur(20px); color: #fff; font-size: .8rem; opacity: 0; pointer-events: none; transform: translate(-50%, 14px); transition: opacity 180ms ease, transform 220ms var(--ease); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.contact-page-body { min-height: 100svh; }
.contact-page { min-height: calc(100svh - 100px); display: grid; align-items: center; padding-top: 120px; padding-bottom: 80px; }
.contact-hero { width: 100%; }
.contact-title { margin: 1.25rem 0 0; font-size: clamp(4rem, 10vw, 10rem); line-height: .84; letter-spacing: -.085em; }
.contact-links { margin-top: clamp(3rem, 7vw, 7rem); border-top: 1px solid rgba(255,255,255,.11); }
.contact-link { display: grid; grid-template-columns: .3fr 1fr auto; align-items: center; gap: 1.5rem; padding: clamp(1.4rem, 2.5vw, 2rem) 0; border-bottom: 1px solid rgba(255,255,255,.11); transition: padding 220ms var(--ease), color 180ms ease; }
.contact-link span { color: rgba(220,230,248,.37); font-size: .67rem; font-weight: 760; letter-spacing: .16em; text-transform: uppercase; }
.contact-link strong { overflow-wrap: anywhere; font-size: clamp(1.05rem, 2.5vw, 1.7rem); letter-spacing: -.03em; }
.contact-link i { color: rgba(234,241,255,.48); font-style: normal; }
.contact-link:hover { padding-left: .8rem; color: #a9c8ff; }

@media (max-width: 980px) {
  :root { --shell: min(760px, calc(100% - 36px)); }
  .site-header { width: calc(100% - 28px); max-width: none; }
  .desktop-nav { display: none; }
  .menu-toggle, .menu-back { display: grid; place-items: center; }
  .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 150px; padding-bottom: 92px; }
  .hero-copy { max-width: 760px; }
  .hero-field { min-height: 520px; margin-top: -70px; }
  .hero-bridge { min-height: 210px; margin-top: -48px; }
  .identity-hud { width: min(720px, 92vw); gap: clamp(1.4rem, 8vw, 4.5rem); }
  .concept { grid-template-columns: 1fr; min-height: 680px; }
  .concept-copy { align-self: start; }
  .concept-visual { position: absolute; inset: 24% 0 0; }
  .presence { grid-template-columns: 1fr; gap: 2.5rem; }
  .presence-profile { max-width: 720px; }
}

@media (max-width: 640px) {
  :root { --shell: calc(100% - 28px); }
  .site-header { width: calc(100% - 20px); top: max(8px, env(safe-area-inset-top)); }
  .nav-shell { min-height: 50px; padding: 0 14px; border-radius: 17px; }
  .site-header.scrolled .nav-shell { min-height: 48px; }
  .brand { font-size: .84rem; }
  .brand-domain { display: none; }
  .hero { padding-top: 114px; padding-bottom: 64px; gap: 0; }
  .hero-title { font-size: clamp(4rem, 20vw, 6.4rem); }
  .hero-sub { font-size: .78rem; }
  .hero-field { min-height: 420px; margin-top: -24px; }
  .hero-lens { width: min(68vw, 290px); }
  .ring-a { width: 92%; }
  .ring-b { width: 70%; }
  .ring-c { width: 110%; }
  .signal { font-size: .55rem; }
  .signal-a { left: 1%; top: 26%; }
  .signal-b { right: 0; top: 37%; }
  .signal-c { bottom: 12%; }
  .hero-bridge { min-height: 160px; margin-top: -26px; }
  .hero-bridge::before { width: 100%; }
  .hero-bridge::after { width: 110%; filter: blur(22px); opacity: .8; }
  .bridge-visual span { width: 120px; }
  .bridge-visual span:nth-child(4),
  .bridge-visual span:nth-child(5) { display: none; }
  .identity-hud { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; width: 100%; padding-top: 14px; }
  .identity-hud dt { font-size: .49rem; }
  .identity-hud dd { font-size: .66rem; }
  .about, .work, .discord { padding-top: 78px; }
  .about { padding-bottom: 72px; }
  .about-content h2 { font-size: clamp(2.4rem, 12vw, 4.2rem); }
  .section-marker { margin-bottom: 2rem; }
  .section-title-row { margin-bottom: 2rem; }
  .concept-stack { gap: 12px; }
  .concept { min-height: 520px; border-radius: 20px; }
  .concept-copy { padding: 1.5rem; }
  .concept-copy h3 { font-size: 3.7rem; }
  .concept-visual { inset: 24% 0 0; }
  .nox-word { right: 1%; font-size: 7.6rem; }
  .nox-disc { right: 4%; width: 210px; }
  .vertex-ui { inset: 10% 5% 6%; padding: 1.2rem; border-radius: 17px; transform: none; }
  .vertex-ui strong { margin-top: .85rem; }
  .vertex-candles { bottom: 8%; height: 40%; }
  .nexus-ui { inset: 9% 4% 5%; grid-template-columns: 58px 1fr; }
  .nexus-rail { padding: 1rem .65rem; }
  .nexus-rail i { width: 25px; height: 25px; }
  .nexus-content { padding: 1.25rem; }
  .presence { padding: 2rem 0; }
  .presence-profile { grid-template-columns: auto minmax(0,1fr); gap: .9rem; }
  .discord-avatar-wrap { width: 50px; height: 50px; }
  .discord-state { grid-column: 2; justify-self: start; }
  .activity-card { grid-column: 1 / -1; }
  .text-action { grid-column: 1 / -1; }
  .tools-section { padding: 92px 0; }
  .tools-group { gap: 2.25rem; padding-right: 2.25rem; }
  .tool { width: 55px; height: 55px; }
  .contact-line { align-items: flex-start; flex-direction: column; }
  .contact-line .glass-action { width: 100%; }
  .contact-link { grid-template-columns: 1fr auto; gap: .45rem 1rem; }
  .contact-link span { grid-column: 1 / -1; }
  .contact-link strong { font-size: 1rem; }
  .contact-link i { grid-column: 2; grid-row: 2; }
  .site-footer { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
}

@media (hover: none), (pointer: coarse) {
  #ambient-canvas,
  .cursor-light { display: none; }
  .ambient-light,
  body:not(.contact-page-body) .ambient::before,
  body:not(.contact-page-body) .ambient::after,
  body:not(.contact-page-body) .hero::before,
  body:not(.contact-page-body) .hero::after {
    animation: none !important;
  }
  .concept:hover, .glass-action:hover, .tool:hover img, .text-action:hover, .contact-link:hover { transform: none; }
  .tool:hover img { opacity: .78; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
  #ambient-canvas, .cursor-light { display: none; }
  .intro, .reveal { opacity: 1 !important; filter: none !important; transform: none !important; }
  .intro-line > span { transform: none !important; }
}

/* Final rendering safeguards. */
html { overflow-x: clip; }
.hero { overflow: clip; }
.hero-line-accent {
  color: inherit;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  text-shadow: none;
}
.hero-line-accent > span {
  color: transparent;
  background: linear-gradient(112deg, #ffffff 4%, #9abfff 45%, #467cd5 90%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 0 70px rgba(82,135,231,.22);
}
.tool img { width: 76%; height: 76%; opacity: .92; }

/* v11 refinements: centered about, readable work titles, interactive All Tech UI. */
.about {
  display: grid;
  justify-items: center;
  text-align: center;
}
.about .section-marker { justify-content: center; }
.about-content {
  width: min(100%, 760px);
  margin-inline: auto;
}
.about-content h2 {
  font-size: clamp(2rem, 4.25vw, 4.35rem);
  font-weight: 590;
  line-height: 1.04;
  letter-spacing: -.052em;
  text-wrap: balance;
}

.section-title-row h2,
.tools-header h2,
.presence-heading h2 {
  font-size: clamp(2.25rem, 4.5vw, 4.55rem);
}

.concept {
  grid-template-columns: minmax(180px, .32fr) minmax(0, 1fr);
}
.concept-copy {
  min-width: 0;
  padding: clamp(1.8rem, 3.5vw, 3.5rem);
}
.concept-copy h3 {
  max-width: 100%;
  font-size: clamp(2.7rem, 5vw, 5.25rem);
  line-height: .96;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.concept-visual { min-width: 0; }
.nox-word {
  left: 4%;
  right: auto;
  font-size: clamp(5.5rem, 13vw, 11rem);
  white-space: nowrap;
}
.nox-disc { right: 4%; }

.concept-alltech {
  min-height: 570px;
  background-color: rgba(3,7,15,.5);
}
.concept-visual-interactive {
  position: relative;
  z-index: 3;
  overflow: hidden;
}
.alltech-ui {
  position: absolute;
  inset: 8% 5% 7%;
  display: grid;
  grid-template-columns: 62px minmax(170px, 210px) minmax(270px, 1fr) minmax(128px, 160px);
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 16px;
  background: rgba(5,9,18,.68);
  box-shadow:
    0 34px 90px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(18px) saturate(128%);
  -webkit-backdrop-filter: blur(18px) saturate(128%);
  transform: perspective(1200px) rotateY(-2deg) rotateX(1deg);
  transform-origin: center;
  transition: transform 420ms var(--ease), border-color 260ms ease, box-shadow 260ms ease;
}
.concept-alltech:hover .alltech-ui {
  border-color: rgba(132,177,255,.22);
  box-shadow: 0 42px 110px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.1);
  transform: perspective(1200px) rotateY(0deg) rotateX(0deg) translateY(-3px);
}
.alltech-serverbar,
.alltech-channelbar,
.alltech-chat,
.alltech-members { min-width: 0; }

.alltech-serverbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  padding: 14px 9px;
  border-right: 1px solid rgba(255,255,255,.07);
  background: rgba(1,4,10,.72);
}
.alltech-server {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 13px;
  background: rgba(255,255,255,.045);
  color: rgba(236,242,255,.62);
  cursor: default;
  transition: border-radius 180ms var(--ease), transform 180ms var(--ease), color 180ms ease, background 180ms ease;
}
.alltech-server span { font-size: .7rem; font-weight: 820; letter-spacing: -.04em; }
.alltech-server.active {
  border-color: rgba(144,183,255,.38);
  border-radius: 11px;
  background: linear-gradient(145deg, #79a9ff, #2a62c7);
  color: #fff;
  box-shadow: 0 9px 26px rgba(45,101,207,.34), inset 0 1px 0 rgba(255,255,255,.35);
}
.alltech-server.active::before {
  position: absolute;
  left: -10px;
  width: 3px;
  height: 23px;
  border-radius: 0 4px 4px 0;
  content: "";
  background: #fff;
}
.alltech-server.muted:hover { border-radius: 10px; background: rgba(105,154,243,.14); color: #fff; transform: translateY(-2px); }

.alltech-channelbar {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0 9px 12px;
  border-right: 1px solid rgba(255,255,255,.07);
  background: rgba(7,12,23,.76);
}
.alltech-serverhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  padding: 0 8px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.alltech-serverhead strong { font-size: .79rem; letter-spacing: .05em; }
.alltech-serverhead span { color: rgba(232,239,252,.35); }
.alltech-category {
  margin: 14px 8px 5px;
  color: rgba(218,228,246,.28);
  font-size: .48rem;
  font-weight: 800;
  letter-spacing: .15em;
}
.alltech-channel {
  display: grid;
  grid-template-columns: 18px minmax(0,1fr) auto;
  align-items: center;
  gap: 4px;
  width: 100%;
  min-height: 31px;
  padding: 0 8px;
  border-radius: 7px;
  background: transparent;
  color: rgba(219,228,244,.45);
  text-align: left;
  cursor: pointer;
  transition: color 150ms ease, background 160ms ease, transform 160ms var(--ease);
}
.alltech-channel > span { color: rgba(205,218,240,.3); font-size: .92rem; }
.alltech-channel b {
  overflow: hidden;
  font-size: .68rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.alltech-channel i {
  display: grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding-inline: 4px;
  border-radius: 8px;
  background: rgba(255,255,255,.055);
  color: rgba(223,233,249,.34);
  font-size: .48rem;
  font-style: normal;
  opacity: 0;
  transform: translateX(4px);
  transition: opacity 150ms ease, transform 180ms var(--ease);
}
.alltech-channel:hover,
.alltech-channel:focus-visible {
  background: rgba(255,255,255,.06);
  color: rgba(245,248,255,.9);
  outline: none;
  transform: translateX(2px);
}
.alltech-channel:hover i,
.alltech-channel:focus-visible i,
.alltech-channel.active i { opacity: 1; transform: none; }
.alltech-channel.active {
  background: linear-gradient(90deg, rgba(92,144,238,.2), rgba(92,144,238,.07));
  color: #fff;
  box-shadow: inset 2px 0 0 #77a8ff;
}
.alltech-channel.active > span { color: #90b7ff; }
.alltech-open {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: auto 7px 0;
  padding: 9px 8px 4px;
  border-top: 1px solid rgba(255,255,255,.07);
  color: rgba(221,231,248,.43);
  font-size: .62rem;
  font-weight: 650;
  transition: color 160ms ease, padding-left 180ms var(--ease);
}
.alltech-open:hover { color: #fff; padding-left: 11px; }

.alltech-chat {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 0;
  background:
    radial-gradient(circle at 70% 0%, rgba(66,118,211,.1), transparent 37%),
    rgba(8,13,24,.62);
}
.alltech-chathead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 50px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.alltech-chathead > div { display: flex; align-items: center; min-width: 0; gap: 7px; }
.alltech-chathead span { color: rgba(221,231,248,.3); }
.alltech-chathead strong { overflow: hidden; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.alltech-chathead p { overflow: hidden; margin: 0; color: rgba(219,229,246,.28); font-size: .56rem; text-overflow: ellipsis; white-space: nowrap; }
.alltech-messages {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 3px;
  min-height: 0;
  padding: 17px 16px;
  overflow: hidden;
}
.alltech-message {
  display: grid;
  grid-template-columns: 30px minmax(0,1fr);
  gap: 9px;
  padding: 7px 8px;
  border-radius: 8px;
  opacity: 0;
  transform: translateY(8px);
  animation: alltech-message-in 360ms var(--ease) forwards;
  transition: background 150ms ease;
}
.alltech-message:nth-child(2) { animation-delay: 70ms; }
.alltech-message:hover { background: rgba(255,255,255,.035); }
.alltech-avatar,
.member-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: linear-gradient(145deg, #253d67, #111c32);
  color: rgba(245,248,255,.8);
  font-weight: 800;
}
.alltech-avatar { width: 30px; height: 30px; font-size: .64rem; }
.avatar-blue { background: linear-gradient(145deg, #79aaff, #285dbd); color: #fff; }
.avatar-violet { background: linear-gradient(145deg, #aa8cff, #5e42aa); color: #fff; }
.alltech-message > div { min-width: 0; }
.alltech-message strong { margin-right: 6px; font-size: .66rem; }
.alltech-message small { color: rgba(214,225,244,.25); font-size: .48rem; }
.alltech-message p { overflow: hidden; margin: 1px 0 0; color: rgba(229,236,249,.6); font-size: .61rem; text-overflow: ellipsis; white-space: nowrap; }
.alltech-composer {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  margin: 0 13px 13px;
  padding: 0 11px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 9px;
  background: rgba(255,255,255,.045);
  color: rgba(218,228,245,.3);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms var(--ease);
}
.alltech-composer p { overflow: hidden; margin: 0; font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }
.alltech-composer i { font-size: .68rem; font-style: normal; }
.alltech-composer:hover,
.alltech-composer:focus-visible {
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.07);
  color: rgba(238,244,255,.58);
  outline: none;
}
.alltech-composer:active { transform: scale(.992); }

.alltech-members {
  padding: 17px 10px;
  background: rgba(4,8,16,.56);
}
.alltech-members > p { margin: 0 5px 12px; color: rgba(216,227,245,.25); font-size: .48rem; font-weight: 800; letter-spacing: .12em; }
.alltech-members > div {
  position: relative;
  display: grid;
  grid-template-columns: 27px minmax(0,1fr);
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 5px;
  border-radius: 8px;
  color: rgba(222,231,247,.49);
  transition: background 150ms ease, color 150ms ease, transform 160ms var(--ease);
}
.alltech-members > div:hover { background: rgba(255,255,255,.045); color: #fff; transform: translateX(2px); }
.member-avatar { width: 27px; height: 27px; font-size: .56rem; }
.alltech-members b { overflow: hidden; font-size: .58rem; font-weight: 580; text-overflow: ellipsis; white-space: nowrap; }
.alltech-members i {
  position: absolute;
  left: 26px;
  bottom: 5px;
  width: 7px;
  height: 7px;
  border: 2px solid #070c16;
  border-radius: 50%;
  background: #43d68d;
}
@keyframes alltech-message-in { to { opacity: 1; transform: none; } }

@media (max-width: 1120px) {
  .alltech-ui { grid-template-columns: 58px 180px minmax(250px,1fr); }
  .alltech-members { display: none; }
}

@media (max-width: 980px) {
  .concept { grid-template-columns: 1fr; }
  .concept-copy { align-self: start; }
  .concept-alltech { min-height: 720px; }
  .concept-alltech .concept-visual { inset: 20% 0 0; }
  .alltech-ui { inset: 5% 4% 5%; }
}

@media (max-width: 640px) {
  .about-content h2 { font-size: clamp(1.9rem, 8.8vw, 3rem); }
  .section-title-row { align-items: flex-start; flex-direction: column; gap: .2rem; }
  .section-title-row h2 { font-size: 2.7rem; }
  .concept-copy h3 { font-size: clamp(2.8rem, 14vw, 4rem); }
  .concept-meta { gap: .4rem; margin-top: .95rem; }
  .concept-meta li { min-width: 0; padding: .52rem .6rem; }
  .concept-meta b { font-size: .68rem; }
  .concept-meta span { font-size: .47rem; letter-spacing: .08em; }
  .nox-word { left: 3%; font-size: clamp(5rem, 25vw, 7rem); }
  .nox-disc { right: -4%; width: 190px; }
  .concept-alltech { min-height: 650px; }
  .concept-alltech .concept-visual { inset: 19% 0 0; }
  .alltech-ui {
    inset: 4% 3% 4%;
    grid-template-columns: 45px minmax(112px, 136px) minmax(155px,1fr);
    border-radius: 12px;
    transform: none;
  }
  .concept-alltech:hover .alltech-ui { transform: none; }
  .alltech-serverbar { gap: 8px; padding: 10px 6px; }
  .alltech-server { width: 31px; height: 31px; border-radius: 10px; }
  .alltech-server.active::before { left: -7px; height: 18px; }
  .alltech-serverhead { height: 43px; padding-inline: 6px; }
  .alltech-serverhead strong { font-size: .64rem; }
  .alltech-category { margin: 11px 5px 4px; font-size: .4rem; }
  .alltech-channelbar { padding-inline: 5px; }
  .alltech-channel { grid-template-columns: 14px minmax(0,1fr); min-height: 28px; padding-inline: 5px; }
  .alltech-channel b { font-size: .56rem; }
  .alltech-channel i { display: none; }
  .alltech-open { margin-inline: 4px; padding-inline: 4px; font-size: .5rem; }
  .alltech-chathead { min-height: 43px; padding-inline: 10px; }
  .alltech-chathead strong { font-size: .65rem; }
  .alltech-chathead p { display: none; }
  .alltech-messages { padding: 10px 8px; }
  .alltech-message { grid-template-columns: 25px minmax(0,1fr); gap: 6px; padding: 5px 4px; }
  .alltech-avatar { width: 25px; height: 25px; }
  .alltech-message strong { display: block; font-size: .55rem; }
  .alltech-message small { display: none; }
  .alltech-message p { font-size: .5rem; }
  .alltech-composer { margin: 0 7px 8px; padding-inline: 8px; }
}

@media (max-width: 390px) {
  .alltech-ui { grid-template-columns: 40px 108px minmax(140px,1fr); }
  .alltech-server { width: 28px; height: 28px; }
  .alltech-channel b { font-size: .52rem; }
}

/* Keep every project title fully readable. */
@media (min-width: 981px) {
  .concept { grid-template-columns: minmax(245px, .37fr) minmax(0, 1fr); }
  .concept-systems .systems-word { left: 12%; }
  .concept-copy h3 {
    font-size: clamp(2.65rem, 4.15vw, 4.45rem);
    overflow-wrap: normal;
    white-space: nowrap;
  }
}
@media (max-width: 640px) {
  .concept-alltech { min-height: 700px; }
}
@media (max-width: 980px) {
  .concept-alltech .concept-visual {
    position: absolute;
    inset: 20% 0 0;
  }
}
@media (max-width: 640px) {
  .concept-alltech .concept-visual { inset: 19% 0 0; }
}

/* v12: text-only branding, real All Tech interface, and Discord systems showcase. */
.brand { gap: 0; }
.brand > span:last-child { display: inline-flex; align-items: baseline; }
.lens-core { display: none; }
.tools-header { margin-bottom: 2.2rem; }
.about, .work, .discord { scroll-margin-top: 110px; }

/* First showcase: real Discord server + custom bot work. */
.concept-systems {
  background:
    radial-gradient(540px circle at 72% 45%, rgba(61,118,225,.18), transparent 58%),
    rgba(4,7,14,.44);
}
.systems-word {
  position: absolute;
  left: 3%;
  top: 50%;
  box-sizing: content-box;
  padding-right: .16em;
  color: rgba(255,255,255,.92);
  font-size: clamp(5.2rem, 13vw, 11.5rem);
  font-weight: 840;
  line-height: .84;
  letter-spacing: -.095em;
  white-space: nowrap;
  transform: translateY(-50%);
}
.systems-disc {
  position: absolute;
  right: 7%;
  top: 50%;
  display: grid;
  place-items: center;
  width: clamp(170px, 22vw, 300px);
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 27%, rgba(245,249,255,.95) 0 3%, rgba(113,164,255,.78) 8%, rgba(22,57,119,.76) 36%, rgba(2,7,15,.93) 72%),
    rgba(5,10,20,.8);
  box-shadow: 0 0 100px rgba(49,105,211,.38), inset 0 1px 0 rgba(255,255,255,.3);
  transform: translateY(-50%);
  animation: disc-float 5s ease-in-out infinite;
}
.systems-disc::before {
  position: absolute;
  inset: 10%;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  content: "";
}
.systems-disc img {
  position: relative;
  z-index: 2;
  width: 38%;
  aspect-ratio: 1;
  border-radius: 26%;
  object-fit: cover;
  box-shadow: 0 12px 35px rgba(0,0,0,.44), 0 0 0 1px rgba(255,255,255,.15);
}
.systems-orbit {
  position: absolute;
  inset: -15%;
  border: 1px solid rgba(128,174,255,.18);
  border-radius: 50%;
  animation: systems-orbit 12s linear infinite;
}
.systems-orbit::before {
  position: absolute;
  left: 47%;
  top: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  content: "";
  background: #9dc1ff;
  box-shadow: 0 0 22px rgba(128,174,255,.95);
}
.systems-lines {
  position: absolute;
  right: 3.8%;
  bottom: 8%;
  display: grid;
  gap: .42rem;
  color: rgba(220,231,249,.44);
  font-size: .58rem;
  font-weight: 720;
  letter-spacing: .14em;
  text-align: right;
  text-transform: uppercase;
}
.systems-lines span { transition: color 180ms ease, transform 220ms var(--ease); }
.concept-systems:hover .systems-lines span { color: rgba(239,245,255,.82); transform: translateX(-4px); }
@keyframes systems-orbit { to { transform: rotate(360deg); } }
@media (min-width: 981px) {
  .concept-systems .systems-word { left: 12%; }
}

/* Screenshot-accurate All Tech mini client. */
.concept-alltech { min-height: 590px; }
.alltech-ui {
  inset: 7% 4.2% 6.5%;
  grid-template-columns: 52px minmax(188px, 220px) minmax(300px, 1fr) minmax(142px, 170px);
  border-radius: 14px;
  background: #050607;
  box-shadow: 0 34px 90px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.055);
}
.alltech-serverbar {
  gap: 10px;
  padding: 12px 7px;
  border-right: 1px solid rgba(255,255,255,.07);
  background: #090a0c;
}
.alltech-server {
  width: 38px;
  height: 38px;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 13px;
  background: #111214;
}
.alltech-server img { width: 100%; height: 100%; object-fit: cover; }
.alltech-server.active { border-radius: 12px; background: transparent; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 8px 22px rgba(0,0,0,.35); }
.alltech-server.active::before { left: -8px; height: 22px; }
.alltech-channelbar {
  padding: 0 7px 9px;
  background: #08090b;
}
.alltech-serverhead { height: 46px; padding-inline: 8px; }
.alltech-serverhead strong { font-size: .72rem; letter-spacing: 0; }
.alltech-boost {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 8px 2px 9px;
  padding: 7px 8px;
  border-radius: 7px;
  background: #111214;
  color: rgba(235,239,247,.6);
  font-size: .48rem;
}
.alltech-boost b { color: rgba(235,239,247,.55); font-size: .46rem; font-weight: 650; }
.alltech-utility {
  display: grid;
  grid-template-columns: 17px minmax(0,1fr);
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding-inline: 7px;
  color: rgba(220,226,238,.44);
}
.alltech-utility span { font-size: .62rem; }
.alltech-utility b { overflow: hidden; font-size: .57rem; font-weight: 590; text-overflow: ellipsis; white-space: nowrap; }
.alltech-channel-scroll {
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
  overscroll-behavior: contain;
}
.alltech-channel-scroll::-webkit-scrollbar { display: none; }
.alltech-category {
  position: relative;
  margin: 12px 7px 4px;
  color: rgba(215,220,231,.4);
  font-size: .46rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: none;
}
.alltech-category::after {
  position: absolute;
  left: 34px;
  right: 4px;
  top: 50%;
  height: 1px;
  content: "";
  background: rgba(255,255,255,.07);
}
.alltech-channel {
  grid-template-columns: 16px minmax(0,1fr);
  min-height: 27px;
  padding-inline: 7px;
  border-radius: 5px;
  color: rgba(216,221,233,.46);
}
.alltech-channel > span { font-size: .7rem; }
.alltech-channel b { font-size: .56rem; font-weight: 570; }
.alltech-channel:hover,
.alltech-channel:focus-visible { background: #1a1b1e; color: rgba(245,247,252,.88); transform: none; }
.alltech-channel.active {
  background: #26272b;
  color: #fff;
  box-shadow: none;
}
.alltech-channel.active > span { color: rgba(245,247,252,.8); }
.alltech-open { margin: 7px 5px 0; padding: 7px 6px 2px; }

.alltech-chat {
  grid-template-rows: auto 1fr auto;
  background: #050607;
}
.alltech-chathead { min-height: 46px; padding-inline: 14px; }
.alltech-chathead strong { font-size: .7rem; }
.alltech-chathead p { font-size: .5rem; }
.alltech-messages {
  justify-content: flex-end;
  padding: 12px 14px;
  overflow-y: auto;
  scrollbar-width: none;
}
.alltech-messages::-webkit-scrollbar { display: none; }
.alltech-channel-intro {
  margin: auto 0 12px;
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  text-align: center;
}
.alltech-channel-intro h4 { margin: 0; font-size: 1rem; line-height: 1.05; letter-spacing: -.035em; }
.alltech-channel-intro p { margin: .35rem 0 0; color: rgba(220,225,235,.54); font-size: .52rem; }
.alltech-channel-intro small { display: block; margin-top: .65rem; color: rgba(214,220,231,.32); font-size: .43rem; }
.alltech-verification-message {
  display: grid;
  grid-template-columns: 28px minmax(0,1fr);
  gap: 8px;
  align-items: start;
  opacity: 0;
  transform: translateY(7px);
  animation: alltech-message-in 360ms var(--ease) forwards;
}
.alltech-verification-message > img {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  object-fit: cover;
}
.alltech-message-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.alltech-message-meta strong { font-size: .58rem; }
.alltech-message-meta small { color: rgba(220,225,235,.28); font-size: .42rem; }
.alltech-app-badge {
  padding: 1px 4px;
  border-radius: 3px;
  background: #5865f2;
  color: #fff;
  font-size: .39rem;
  font-weight: 800;
}
.alltech-verification-embed {
  margin-top: 5px;
  padding: 8px 9px;
  border: 1px solid rgba(255,255,255,.1);
  border-left: 3px solid #8b5cf6;
  border-radius: 4px;
  background: #151619;
}
.alltech-verification-embed strong { display: block; font-size: .55rem; }
.alltech-verification-embed p { margin: 5px 0 0; color: rgba(236,239,245,.75); font-size: .49rem; line-height: 1.45; }
.alltech-demo-actions { display: flex; gap: 5px; margin-top: 7px; }
.alltech-demo-actions button {
  min-height: 24px;
  padding: 0 10px;
  border: 0;
  border-radius: 5px;
  background: #1f9d55;
  color: #fff;
  font: inherit;
  font-size: .48rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 150ms var(--ease), filter 150ms ease;
}
.alltech-demo-actions button:last-child { background: #202225; }
.alltech-demo-actions button:hover { filter: brightness(1.12); transform: translateY(-1px); }
.alltech-demo-actions button:active { transform: scale(.96); }
.alltech-demo-actions button.verified { background: #5865f2; }
.alltech-message { border-radius: 4px; }
.alltech-composer { min-height: 36px; margin: 0 10px 10px; border-radius: 7px; background: #151619; }

.alltech-members { padding: 14px 8px; background: #08090b; }
.alltech-members > p { margin: 0 5px 8px; font-size: .43rem; }
.alltech-members > div {
  grid-template-columns: 25px minmax(0,1fr);
  gap: 7px;
  padding: 4px 5px;
  border-radius: 5px;
}
.alltech-members > div > span:nth-child(2) { min-width: 0; display: grid; }
.alltech-members b { font-size: .54rem; }
.alltech-members small { overflow: hidden; color: rgba(215,221,232,.35); font-size: .4rem; text-overflow: ellipsis; white-space: nowrap; }
.member-avatar { width: 25px; height: 25px; }
.member-owner { background: linear-gradient(145deg, #17191d, #060708); color: #fff; }
.member-bot-blue { background: linear-gradient(145deg, #237dd8, #14396a); }
.member-bot-violet { background: linear-gradient(145deg, #813bc2, #3e145d); }
.member-bot-cyan { background: linear-gradient(145deg, #2ba5c9, #16526a); }
.alltech-members i.member-dnd { background: #ed4245; }
.alltech-members .member-offline { opacity: .34; }

@media (max-width: 1120px) {
  .alltech-ui { grid-template-columns: 50px 198px minmax(270px,1fr); }
}
@media (max-width: 980px) {
  .concept-systems .concept-visual { inset: 24% 0 0; }
  .systems-word { left: 4%; }
  .systems-disc { right: 5%; }
  .concept-alltech { min-height: 735px; }
  .alltech-ui { inset: 5% 4%; }
}
@media (max-width: 640px) {
  .concept-systems { min-height: 620px; }
  .concept-systems .concept-visual { inset: 25% 0 0; }
  .systems-word { left: 3%; font-size: clamp(4.8rem, 25vw, 7rem); }
  .systems-disc { right: -2%; width: 185px; }
  .systems-lines { right: 5%; bottom: 7%; font-size: .46rem; }
  .concept-alltech { min-height: 700px; }
  .alltech-ui { grid-template-columns: 42px minmax(112px, 132px) minmax(152px,1fr); }
  .alltech-serverbar { padding-inline: 5px; }
  .alltech-server { width: 30px; height: 30px; }
  .alltech-serverhead { height: 42px; }
  .alltech-boost, .alltech-utility { display: none; }
  .alltech-channel b { font-size: .5rem; }
  .alltech-category { font-size: .38rem; }
  .alltech-chathead { min-height: 42px; padding-inline: 9px; }
  .alltech-chathead p { display: none; }
  .alltech-channel-intro h4 { font-size: .78rem; }
  .alltech-channel-intro p { font-size: .43rem; }
  .alltech-verification-message { grid-template-columns: 23px minmax(0,1fr); gap: 6px; }
  .alltech-verification-message > img { width: 23px; height: 23px; border-radius: 7px; }
  .alltech-verification-embed { padding: 6px 7px; }
  .alltech-verification-embed p { font-size: .42rem; }
  .alltech-demo-actions button { min-height: 22px; padding-inline: 8px; font-size: .42rem; }
}
@media (max-width: 390px) {
  .alltech-ui { grid-template-columns: 38px 105px minmax(135px,1fr); }
  .alltech-open { font-size: .44rem; }
}

/* Keep the embedded Discord client inside its fixed showcase frame. */
.alltech-ui { grid-template-rows: minmax(0, 1fr); }
.alltech-serverbar,
.alltech-channelbar,
.alltech-chat,
.alltech-members { min-height: 0; overflow: hidden; }
.alltech-channel-scroll { flex: 1 1 auto; }

/* Tool icon glow fix — extra breathing room and a soft fade into the page. */
.tools-section {
  overflow: visible;
}

.tools-marquee {
  /* Keep the moving row clipped left/right, while giving the glow enough
     vertical room so it fades naturally instead of hitting a hard edge. */
  overflow: hidden;
  contain: layout;
  padding-block: clamp(42px, 5vw, 68px);
  margin-block: clamp(-68px, -5vw, -42px);
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, .28) 3%,
    #000 9%,
    #000 91%,
    rgba(0, 0, 0, .28) 97%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, .28) 3%,
    #000 9%,
    #000 91%,
    rgba(0, 0, 0, .28) 97%,
    transparent 100%
  );
}

.tool {
  isolation: isolate;
}

.tool::before {
  inset: -34px;
  z-index: -1;
  background: radial-gradient(
    circle,
    rgba(86, 143, 244, .24) 0%,
    rgba(86, 143, 244, .14) 34%,
    rgba(86, 143, 244, .055) 58%,
    transparent 80%
  );
  filter: blur(9px);
  transform: scale(.78);
}

.tool:hover::before {
  opacity: 1;
  transform: scale(1);
}

@media (max-width: 640px) {
  .tools-marquee {
    padding-block: 48px;
    margin-block: -48px;
  }

  .tool::before {
    inset: -28px;
    filter: blur(8px);
  }
}

/* Keep normal wheel/trackpad scrolling. Apply overscroll control only to the root
   scroller so the body never becomes accidentally locked. */
html {
  min-height: 100%;
  overflow-y: auto;
  overscroll-behavior-x: none;
  overscroll-behavior-y: none;
}

body {
  min-height: 100%;
  overflow-y: visible;
}

/* Slide-up labels for the tool icons. */
.tool::after {
  position: absolute;
  left: 50%;
  bottom: -31px;
  z-index: 3;
  content: attr(data-tool-label);
  width: max-content;
  max-width: 150px;
  padding: .34rem .55rem;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  background: rgba(4, 10, 22, .62);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .08);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  color: rgba(241, 246, 255, .88);
  font-size: .61rem;
  font-weight: 680;
  letter-spacing: .015em;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 10px) scale(.96);
  transition: opacity 180ms ease, transform 240ms var(--ease);
}

.tool:hover::after,
.tool:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

@media (hover: none), (pointer: coarse) {
  .tool::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tool::after { transition: opacity 120ms linear; }
}

/* Front-page liquid bubble polish.
   Keep the existing design, but allow its light to fade naturally into the page
   instead of being clipped by the hero section. */
.hero {
  overflow: visible;
  isolation: isolate;
}

.hero-field {
  overflow: visible;
  isolation: isolate;
}

.hero-field::before,
.hero-field::after {
  position: absolute;
  left: 50%;
  top: 48%;
  content: "";
  pointer-events: none;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
}

.hero-field::before {
  width: min(118%, 760px);
  aspect-ratio: 1;
  background:
    radial-gradient(circle at 42% 38%, rgba(146, 188, 255, .18) 0%, rgba(86, 143, 244, .10) 24%, rgba(35, 82, 170, .045) 48%, transparent 74%),
    radial-gradient(circle at 61% 62%, rgba(30, 75, 161, .10), transparent 67%);
  filter: blur(28px);
  opacity: .9;
  animation: hero-aura-breathe 7.5s ease-in-out infinite;
}

.hero-field::after {
  width: min(150%, 940px);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(41, 95, 196, .075) 0%, rgba(25, 63, 137, .035) 38%, transparent 72%);
  filter: blur(42px);
  opacity: .75;
  animation: hero-aura-drift 11s ease-in-out infinite alternate;
}

.hero-lens {
  z-index: 3;
  overflow: visible;
  box-shadow:
    0 70px 150px rgba(0, 0, 0, .34),
    0 0 80px rgba(72, 132, 235, .18),
    0 0 180px rgba(43, 97, 196, .12),
    inset 18px 20px 42px rgba(255,255,255,.10),
    inset -20px -25px 58px rgba(0,0,0,.25);
}

.hero-lens::after {
  inset: -52%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 46% 43%, rgba(108, 165, 255, .17) 0%, rgba(61, 119, 221, .085) 30%, rgba(29, 70, 154, .035) 53%, transparent 74%);
  filter: blur(26px);
  opacity: .92;
  animation: lens-aura-pulse 6.5s ease-in-out infinite;
}

.hero-lens::before {
  inset: 8%;
  background:
    radial-gradient(circle at 31% 24%, rgba(255,255,255,.12), transparent 25%),
    linear-gradient(135deg, rgba(255,255,255,.035), transparent 48%);
  box-shadow:
    inset 0 0 58px rgba(95,148,244,.12),
    inset 0 1px 0 rgba(255,255,255,.13);
}

.lens-glint {
  opacity: .8;
  animation: lens-glint-drift 5.8s ease-in-out infinite;
}

.hero-ring {
  z-index: 1;
  box-shadow: 0 0 28px rgba(87, 143, 242, .035);
}

.signal {
  z-index: 4;
}

@keyframes hero-aura-breathe {
  0%, 100% { opacity: .72; transform: translate(-50%, -50%) scale(.96); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.045); }
}

@keyframes hero-aura-drift {
  0% { transform: translate(-53%, -48%) scale(.98); opacity: .58; }
  100% { transform: translate(-47%, -52%) scale(1.06); opacity: .82; }
}

@keyframes lens-aura-pulse {
  0%, 100% { opacity: .68; transform: scale(.95); }
  50% { opacity: 1; transform: scale(1.05); }
}

@keyframes lens-glint-drift {
  0%, 100% { transform: translate3d(-3%, 0, 0) rotate(-20deg) scale(.94); opacity: .55; }
  50% { transform: translate3d(12%, 10%, 0) rotate(-15deg) scale(1.08); opacity: .95; }
}

@media (max-width: 640px) {
  .hero-field::before { width: 130%; filter: blur(24px); }
  .hero-field::after { width: 165%; filter: blur(34px); }
  .hero-lens::after { inset: -44%; }
  .hero-dataflow span { width: 96px; opacity: .42; }
  .hero-dataflow span:nth-child(1) { left: 2%; top: 33%; }
  .hero-dataflow span:nth-child(2) { right: -6%; top: 49%; }
  .hero-dataflow span:nth-child(3),
  .hero-node-map span:nth-child(5) { display: none; }
  .hero-node-map span { width: 6px; height: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-field::before,
  .hero-field::after,
  .hero-lens::after,
  .lens-glint,
  .hero-dataflow span,
  .hero-node-map span { animation: none !important; }
}

/* Contact email composer modal — isolated from the rest of the site. */
body.email-modal-open {
  overflow: hidden;
}

.email-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 360ms ease,
    visibility 0s linear 380ms;
}

.email-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.email-modal-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 38%, rgba(31, 74, 154, .16), transparent 48%),
    rgba(0, 2, 7, .64);
  backdrop-filter: blur(0) saturate(100%);
  -webkit-backdrop-filter: blur(0) saturate(100%);
  opacity: 0;
  transition:
    opacity 360ms ease,
    backdrop-filter 380ms ease,
    -webkit-backdrop-filter 380ms ease;
  will-change: opacity, backdrop-filter;
}

.email-modal.is-open .email-modal-backdrop {
  opacity: 1;
  backdrop-filter: blur(15px) saturate(125%);
  -webkit-backdrop-filter: blur(15px) saturate(125%);
}

.email-modal-panel {
  position: relative;
  width: min(760px, 100%);
  max-height: min(92svh, 850px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(1.2rem, 3vw, 2.15rem);
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: clamp(22px, 3vw, 30px);
  outline: none;
  background:
    radial-gradient(520px circle at 86% -4%, rgba(111, 166, 255, .16), transparent 52%),
    radial-gradient(420px circle at 0% 100%, rgba(50, 104, 206, .08), transparent 58%),
    linear-gradient(145deg, rgba(10, 18, 34, .92), rgba(2, 7, 16, .89));
  box-shadow:
    0 45px 140px rgba(0, 0, 0, .62),
    0 0 95px rgba(54, 113, 220, .18),
    inset 0 1px 0 rgba(255, 255, 255, .14),
    inset 0 -1px 0 rgba(0, 0, 0, .28);
  backdrop-filter: blur(30px) saturate(165%);
  -webkit-backdrop-filter: blur(30px) saturate(165%);
  opacity: 0;
  transform: translateY(34px) scale(.965);
  transition:
    opacity 290ms ease,
    transform 470ms cubic-bezier(.18, .86, .24, 1);
}

.email-modal.is-open .email-modal-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.email-modal-glow {
  position: absolute;
  inset: -55px;
  z-index: -1;
  border-radius: 44px;
  background: radial-gradient(ellipse at 55% 42%, rgba(73, 137, 244, .15), transparent 65%);
  filter: blur(34px);
  pointer-events: none;
  animation: email-modal-glow 5.8s ease-in-out infinite;
}

.email-modal-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: 1.35rem;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.email-modal-kicker {
  margin: 0 0 .55rem;
  color: rgba(168, 199, 255, .56);
  font-size: .61rem;
  font-weight: 780;
  letter-spacing: .19em;
}

.email-modal-header h2 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.65rem);
  font-weight: 650;
  line-height: .94;
  letter-spacing: -.065em;
}

.email-modal-header p:not(.email-modal-kicker) {
  max-width: 470px;
  margin: .75rem 0 0;
  color: rgba(219, 230, 249, .48);
  font-size: .82rem;
}

.email-modal-header-actions {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex: 0 0 auto;
}

.email-modal-mailapp,
.email-modal-close {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .045);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09);
  color: rgba(243, 247, 255, .78);
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease, transform 180ms var(--ease);
}

.email-modal-mailapp {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 40px;
  padding: 0 .85rem;
  border-radius: 12px;
  font-size: .7rem;
  font-weight: 700;
}

.email-modal-mailapp i {
  font-style: normal;
  color: rgba(162, 199, 255, .72);
}

.email-modal-close {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
}

.email-modal-close span {
  position: absolute;
  left: 11px;
  top: 19px;
  width: 18px;
  height: 1px;
  background: currentColor;
}

.email-modal-close span:first-child { transform: rotate(45deg); }
.email-modal-close span:last-child { transform: rotate(-45deg); }

.email-modal-mailapp:hover,
.email-modal-close:hover {
  border-color: rgba(255, 255, 255, .27);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  transform: translateY(-1px);
}

.email-compose-form {
  display: grid;
  gap: 1rem;
  min-width: 0;
  max-width: 100%;
  padding-top: 1.2rem;
}

.email-modal-panel > *,
.email-compose-form > *,
.email-form-grid > *,
.email-field {
  min-width: 0;
  max-width: 100%;
}

.email-recipient-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  min-height: 48px;
  padding: 0 .95rem;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 14px;
  background: rgba(255, 255, 255, .025);
}

.email-recipient-row span,
.email-field > span {
  color: rgba(211, 224, 247, .42);
  font-size: .63rem;
  font-weight: 740;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.email-recipient-row strong {
  overflow: hidden;
  color: rgba(245, 248, 255, .82);
  font-size: .83rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.email-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.email-field {
  position: relative;
  display: grid;
  gap: .55rem;
  min-width: 0;
}

.email-field input,
.email-field textarea {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, .105);
  border-radius: 14px;
  outline: none;
  background:
    radial-gradient(240px circle at 15% 0%, rgba(108, 165, 255, .055), transparent 64%),
    rgba(255, 255, 255, .027);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
  color: rgba(247, 249, 255, .93);
  caret-color: #8db7ff;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.email-field input {
  min-height: 50px;
  padding: 0 .95rem;
}

.email-field textarea {
  min-height: 142px;
  max-height: 390px;
  padding: .9rem 3.5rem 1.8rem .95rem;
  overflow-y: auto;
  line-height: 1.55;
  resize: vertical;
}

.email-field input::placeholder,
.email-field textarea::placeholder {
  color: rgba(212, 224, 246, .25);
}

.email-field input:focus,
.email-field textarea:focus {
  border-color: rgba(119, 173, 255, .46);
  background-color: rgba(77, 126, 213, .055);
  box-shadow:
    0 0 0 3px rgba(78, 139, 242, .08),
    0 15px 38px rgba(0, 0, 0, .17),
    inset 0 1px 0 rgba(255, 255, 255, .07);
}

.email-character-count {
  position: absolute;
  right: .85rem;
  bottom: .7rem;
  color: rgba(211, 225, 249, .32);
  font-size: .65rem;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.email-character-count b {
  color: rgba(222, 234, 255, .58);
  font-weight: 670;
}

.email-message-field.is-near-limit .email-character-count,
.email-message-field.is-near-limit .email-character-count b {
  color: #efb774;
}

.email-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.3rem;
  padding-top: .35rem;
}

.email-modal-footer > p {
  max-width: 340px;
  margin: 0;
  color: rgba(207, 221, 246, .34);
  font-size: .68rem;
}

.email-modal-submit.glass-action {
  flex: 0 0 auto;
  min-height: 48px;
  margin-top: 0;
  cursor: pointer;
}

@keyframes email-modal-glow {
  0%, 100% { opacity: .62; transform: scale(.97); }
  50% { opacity: 1; transform: scale(1.035); }
}

@media (max-width: 680px) {
  .email-modal {
    align-items: end;
    padding: 10px;
  }

  .email-modal-panel {
    width: 100%;
    max-height: calc(100svh - 20px);
    padding: 1.15rem;
    border-radius: 24px;
    transform: translateY(42px) scale(.98);
  }

  .email-modal-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .85rem;
  }

  .email-modal-header-actions {
    align-self: start;
  }

  .email-modal-mailapp span { display: none; }
  .email-modal-mailapp { width: 40px; padding: 0; justify-content: center; border-radius: 50%; }
  .email-form-grid { grid-template-columns: 1fr; }
  .email-modal-footer { align-items: stretch; flex-direction: column; }
  .email-modal-footer > p { max-width: none; }
  .email-modal-submit.glass-action { width: 100%; }
  .email-field textarea { min-height: 126px; }
}

@media (prefers-reduced-motion: reduce) {
  .email-modal,
  .email-modal-backdrop,
  .email-modal-panel,
  .email-modal-glow {
    animation: none !important;
    transition-duration: .01ms !important;
  }
}

/* Final contact polish: invisible scrollbars, no modal edge-bounce, softer blur. */
html,
body,
.email-modal-panel,
.email-field textarea {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
.email-modal-panel::-webkit-scrollbar,
.email-field textarea::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.email-modal-panel {
  overscroll-behavior: none;
  overflow-anchor: none;
  scroll-behavior: auto;
}

/* Keep the blur active and animate only its opacity. This avoids the abrupt
   blur-filter jump some browsers produce when interpolating from blur(0). */
.email-modal {
  opacity: 1;
  transition: visibility 0s linear 780ms;
}

.email-modal.is-open {
  opacity: 1;
  transition-delay: 0s;
}

.email-modal-backdrop {
  opacity: 0;
  backdrop-filter: blur(17px) saturate(124%);
  -webkit-backdrop-filter: blur(17px) saturate(124%);
  transition: opacity 760ms cubic-bezier(.22, .78, .2, 1);
  will-change: opacity;
}

.email-modal.is-open .email-modal-backdrop {
  opacity: 1;
  backdrop-filter: blur(17px) saturate(124%);
  -webkit-backdrop-filter: blur(17px) saturate(124%);
}

.email-modal-panel {
  transition:
    opacity 420ms ease,
    transform 560ms cubic-bezier(.18, .86, .24, 1);
}

/* Make Email read as an in-page composer rather than another outbound link. */
.contact-link-email {
  grid-template-columns: .3fr minmax(0, 1fr) auto auto;
  margin: .85rem 0;
  padding: clamp(1.4rem, 2.5vw, 2rem) clamp(1rem, 2vw, 1.45rem);
  border: 1px solid rgba(130, 178, 255, .22);
  border-radius: 18px;
  background:
    radial-gradient(420px circle at 12% 0%, rgba(102, 158, 255, .12), transparent 62%),
    linear-gradient(130deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018));
  box-shadow:
    0 18px 52px rgba(16, 57, 127, .14),
    inset 0 1px 0 rgba(255, 255, 255, .09);
}

.contact-link-email:hover {
  padding-left: clamp(1.15rem, 2.3vw, 1.75rem);
  border-color: rgba(150, 195, 255, .38);
  box-shadow:
    0 25px 65px rgba(21, 72, 157, .22),
    inset 0 1px 0 rgba(255, 255, 255, .13);
}

.contact-link-email em {
  padding: .38rem .58rem;
  border: 1px solid rgba(144, 190, 255, .2);
  border-radius: 999px;
  background: rgba(96, 151, 244, .08);
  color: rgba(202, 224, 255, .72);
  font-size: .6rem;
  font-style: normal;
  font-weight: 720;
  letter-spacing: .05em;
  white-space: nowrap;
}

.contact-link-email i {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(148, 193, 255, .22);
  border-radius: 50%;
  background: rgba(96, 151, 244, .09);
  color: rgba(229, 240, 255, .9);
}

.email-modal-submit.is-sending {
  cursor: wait;
  opacity: .72;
}

.email-modal-submit.is-sent {
  border-color: rgba(101, 221, 164, .34);
  box-shadow:
    0 20px 55px rgba(37, 157, 99, .16),
    inset 0 1px 0 rgba(255, 255, 255, .18);
}

@media (max-width: 680px) {
  .contact-link-email {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .contact-link-email span {
    grid-column: 1 / -1;
  }

  .contact-link-email strong {
    grid-column: 1;
  }

  .contact-link-email em {
    display: none;
  }

  .contact-link-email i {
    grid-column: 2;
    grid-row: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .email-modal-backdrop {
    transition-duration: .01ms !important;
  }
}

/* Contact delivery + alignment polish. */
.email-honeypot,
#email-submit-frame {
  display: none !important;
}

/* Notifications must sit above the modal blur and panel. */
.toast {
  z-index: 5200;
}

.toast.toast-success {
  border-color: rgba(101, 221, 164, .28);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, .42),
    0 0 34px rgba(57, 194, 128, .12);
}

.toast.toast-error {
  border-color: rgba(244, 116, 130, .28);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, .42),
    0 0 34px rgba(220, 72, 91, .1);
}

/* Keep both contact choices on the same visual baseline. */
.contact-links .contact-link,
.contact-links .contact-link-email {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
}

.contact-links .contact-link strong,
.contact-links .contact-link-email strong {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
}

.contact-links .contact-link i,
.contact-links .contact-link-email i {
  grid-column: 2;
  grid-row: 1;
}

.contact-links .contact-link span,
.contact-links .contact-link em {
  display: none;
}

.email-message-field.is-too-short:not(.is-near-limit) .email-character-count,
.email-message-field.is-too-short:not(.is-near-limit) .email-character-count b {
  color: rgba(196, 215, 247, .4);
}

@media (max-width: 680px) {
  .contact-links .contact-link,
  .contact-links .contact-link-email {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .contact-links .contact-link strong,
  .contact-links .contact-link-email strong,
  .contact-links .contact-link i,
  .contact-links .contact-link-email i {
    grid-row: 1;
  }
}

.contact-link-discord {
  padding-inline: clamp(1rem, 2vw, 1.45rem);
}

.contact-link-discord:hover {
  padding-left: clamp(1.15rem, 2.3vw, 1.75rem);
}

.email-modal-footer {
  justify-content: flex-end;
}

/* v5 — composer status cards and direct-delivery feedback. */
.email-compose-notice {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 28px;
  align-items: center;
  gap: .8rem;
  max-height: 0;
  margin: 0;
  padding: 0 .8rem;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 15px;
  background: rgba(255,255,255,.025);
  opacity: 0;
  transform: translateY(10px) scale(.985);
  transition:
    max-height 420ms cubic-bezier(.2,.8,.2,1),
    margin 420ms cubic-bezier(.2,.8,.2,1),
    padding 420ms cubic-bezier(.2,.8,.2,1),
    opacity 260ms ease,
    transform 360ms cubic-bezier(.2,.8,.2,1),
    border-color 260ms ease,
    background 260ms ease,
    box-shadow 260ms ease;
}

.email-compose-notice.is-visible {
  max-height: 120px;
  margin: .15rem 0 .25rem;
  padding: .78rem .8rem;
  opacity: 1;
  transform: none;
}

.email-compose-notice::before {
  position: absolute;
  inset: 0;
  content: "";
  border-radius: inherit;
  background: linear-gradient(115deg, rgba(255,255,255,.075), transparent 35%, transparent 70%, rgba(255,255,255,.035));
  pointer-events: none;
}

.email-compose-notice-icon {
  position: relative;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(142,183,255,.24);
  border-radius: 12px;
  background: rgba(88,142,235,.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 28px rgba(74,127,222,.08);
}

.email-compose-notice-icon::before,
.email-compose-notice-icon::after {
  position: absolute;
  left: 50%;
  top: 50%;
  content: "";
  transform: translate(-50%,-50%);
}

.email-compose-notice-icon::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #8eb9ff;
  box-shadow: 0 0 16px rgba(116,171,255,.85);
}

.email-compose-notice-copy {
  position: relative;
  min-width: 0;
}

.email-compose-notice-copy strong,
.email-compose-notice-copy p {
  display: block;
  margin: 0;
}

.email-compose-notice-copy strong {
  color: rgba(247,250,255,.94);
  font-size: .79rem;
  letter-spacing: -.01em;
}

.email-compose-notice-copy p {
  margin-top: .15rem;
  color: rgba(210,223,246,.5);
  font-size: .68rem;
  line-height: 1.45;
}

.email-compose-notice-close {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 50%;
  background: rgba(255,255,255,.025);
  color: rgba(228,236,251,.42);
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease, transform 180ms var(--ease);
}

.email-compose-notice-close:hover {
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: #fff;
  transform: rotate(4deg) scale(1.04);
}

.email-compose-notice.is-loading {
  border-color: rgba(119,171,255,.24);
  background: radial-gradient(300px circle at 10% 0%, rgba(93,151,255,.12), transparent 62%), rgba(68,113,196,.035);
  box-shadow: 0 16px 42px rgba(24,67,142,.11), inset 0 1px 0 rgba(255,255,255,.06);
}

.email-compose-notice.is-loading .email-compose-notice-icon::before {
  width: 17px;
  height: 17px;
  border: 2px solid rgba(146,190,255,.22);
  border-top-color: #a9c9ff;
  background: transparent;
  box-shadow: none;
  animation: email-notice-spin .8s linear infinite;
}

.email-compose-notice.is-warning {
  border-color: rgba(239,183,116,.26);
  background: radial-gradient(300px circle at 10% 0%, rgba(222,151,71,.12), transparent 62%), rgba(130,86,34,.035);
  box-shadow: 0 16px 42px rgba(113,71,21,.1), inset 0 1px 0 rgba(255,255,255,.06);
}

.email-compose-notice.is-warning .email-compose-notice-icon {
  border-color: rgba(239,183,116,.28);
  background: rgba(222,151,71,.08);
}

.email-compose-notice.is-warning .email-compose-notice-icon::before {
  width: 3px;
  height: 11px;
  border-radius: 4px;
  background: #f0bb7b;
  box-shadow: 0 0 13px rgba(239,183,116,.5);
  transform: translate(-50%,-68%);
}

.email-compose-notice.is-warning .email-compose-notice-icon::after {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #f0bb7b;
  transform: translate(-50%,235%);
}

.email-compose-notice.is-error {
  border-color: rgba(244,116,130,.27);
  background: radial-gradient(300px circle at 10% 0%, rgba(220,72,91,.12), transparent 62%), rgba(129,37,51,.035);
  box-shadow: 0 16px 42px rgba(115,30,44,.11), inset 0 1px 0 rgba(255,255,255,.06);
}

.email-compose-notice.is-error .email-compose-notice-icon {
  border-color: rgba(244,116,130,.3);
  background: rgba(220,72,91,.08);
}

.email-compose-notice.is-error .email-compose-notice-icon::before,
.email-compose-notice.is-error .email-compose-notice-icon::after {
  width: 15px;
  height: 2px;
  border-radius: 2px;
  background: #f28b98;
  box-shadow: 0 0 11px rgba(244,116,130,.38);
}
.email-compose-notice.is-error .email-compose-notice-icon::before { transform: translate(-50%,-50%) rotate(45deg); }
.email-compose-notice.is-error .email-compose-notice-icon::after { transform: translate(-50%,-50%) rotate(-45deg); }

.email-compose-notice.is-success {
  border-color: rgba(101,221,164,.28);
  background: radial-gradient(300px circle at 10% 0%, rgba(57,194,128,.12), transparent 62%), rgba(33,122,79,.035);
  box-shadow: 0 16px 44px rgba(26,122,74,.11), inset 0 1px 0 rgba(255,255,255,.07);
}

.email-compose-notice.is-success .email-compose-notice-icon {
  border-color: rgba(101,221,164,.3);
  background: rgba(57,194,128,.08);
}

.email-compose-notice.is-success .email-compose-notice-icon::before {
  width: 14px;
  height: 7px;
  border: solid #75dfa9;
  border-width: 0 0 2px 2px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: translate(-50%,-62%) rotate(-45deg);
}

.email-field input.is-invalid,
.email-field textarea.is-invalid {
  border-color: rgba(244,116,130,.48);
  background-color: rgba(220,72,91,.035);
  box-shadow: 0 0 0 3px rgba(220,72,91,.07), inset 0 1px 0 rgba(255,255,255,.055);
  animation: email-field-nudge 360ms cubic-bezier(.2,.8,.2,1);
}

@keyframes email-notice-spin { to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes email-field-nudge {
  0%,100% { transform: translateX(0); }
  30% { transform: translateX(-4px); }
  65% { transform: translateX(3px); }
}

@media (max-width: 520px) {
  .email-compose-notice {
    grid-template-columns: 34px minmax(0, 1fr) 26px;
    gap: .65rem;
  }
  .email-compose-notice-icon { width: 34px; height: 34px; border-radius: 11px; }
  .email-compose-notice-copy p { font-size: .64rem; }
}

@media (prefers-reduced-motion: reduce) {
  .email-compose-notice,
  .email-compose-notice-icon::before,
  .email-field input.is-invalid,
  .email-field textarea.is-invalid {
    animation: none !important;
  }
}


/* v6 — auto-growing composer with no internal scrollers or resize handle. */
.email-modal {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.email-modal::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.email-modal-panel {
  flex: 0 0 auto;
  max-height: none;
  margin-block: auto;
  overflow: visible;
  overscroll-behavior: none;
}

.email-field textarea {
  max-height: none;
  overflow: hidden;
  resize: none;
}

/* The custom warning card uses the same glass structure and entrance as
   successful delivery feedback, without invoking browser validation UI. */
.email-compose-notice.is-warning {
  background:
    radial-gradient(300px circle at 10% 0%, rgba(222,151,71,.13), transparent 62%),
    linear-gradient(135deg, rgba(255,255,255,.045), rgba(130,86,34,.028));
  box-shadow:
    0 18px 48px rgba(79,48,15,.13),
    0 0 32px rgba(222,151,71,.055),
    inset 0 1px 0 rgba(255,255,255,.075);
}

@media (max-width: 680px) {
  .email-modal {
    align-items: flex-start;
  }

  .email-modal-panel {
    margin-block: auto;
  }
}

/* v9 — richer homepage atmosphere without changing the contact page. */
body:not(.contact-page-body) .ambient::before,
body:not(.contact-page-body) .ambient::after {
  position: absolute;
  inset: -18%;
  content: "";
  pointer-events: none;
  will-change: transform, opacity;
}

body:not(.contact-page-body) .ambient::before {
  background:
    conic-gradient(
      from 215deg at 62% 38%,
      transparent 0 17%,
      rgba(42, 91, 184, .11) 26%,
      rgba(108, 157, 255, .055) 36%,
      transparent 48% 69%,
      rgba(27, 73, 157, .09) 80%,
      transparent 92%
    );
  filter: blur(72px) saturate(125%);
  opacity: .82;
  animation: home-aurora-drift 24s ease-in-out infinite alternate;
}

body:not(.contact-page-body) .ambient::after {
  inset: -8%;
  background-image:
    radial-gradient(circle, rgba(202, 222, 255, .22) 0 1px, transparent 1.4px),
    radial-gradient(circle, rgba(104, 158, 255, .16) 0 .8px, transparent 1.3px),
    linear-gradient(115deg, transparent 22%, rgba(89, 139, 229, .035) 48%, transparent 72%);
  background-position: 0 0, 31px 19px, 0 0;
  background-size: 86px 86px, 117px 117px, 100% 100%;
  mask-image: radial-gradient(ellipse at 58% 33%, #000 0 30%, rgba(0,0,0,.65) 56%, transparent 84%);
  -webkit-mask-image: radial-gradient(ellipse at 58% 33%, #000 0 30%, rgba(0,0,0,.65) 56%, transparent 84%);
  opacity: .34;
  animation: home-stars-drift 34s linear infinite;
}

body:not(.contact-page-body) .hero::before,
body:not(.contact-page-body) .hero::after {
  position: absolute;
  z-index: 0;
  content: "";
  pointer-events: none;
}

body:not(.contact-page-body) .hero::before {
  right: clamp(-220px, -10vw, -80px);
  top: 8%;
  width: min(64vw, 840px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 42% 43%, rgba(114, 168, 255, .15), transparent 31%),
    radial-gradient(circle at 50% 50%, rgba(34, 81, 169, .115), transparent 57%),
    radial-gradient(circle at 50% 50%, rgba(10, 31, 72, .21), transparent 72%);
  filter: blur(30px);
  opacity: .9;
  transform: translate3d(0, 0, 0);
  animation: home-orb-breathe 8.5s ease-in-out infinite;
}

body:not(.contact-page-body) .hero::after {
  left: 46%;
  top: 17%;
  width: min(48vw, 620px);
  height: min(42vw, 520px);
  border: 1px solid rgba(139, 180, 250, .055);
  border-radius: 50%;
  box-shadow:
    0 0 0 72px rgba(105, 155, 244, .018),
    0 0 0 145px rgba(88, 133, 220, .012),
    inset 0 0 90px rgba(95, 145, 235, .03);
  opacity: .72;
  transform: rotate(-8deg);
  animation: home-field-float 14s ease-in-out infinite alternate;
}

body:not(.contact-page-body) .hero-copy,
body:not(.contact-page-body) .hero-field,
body:not(.contact-page-body) .identity-hud {
  position: relative;
  z-index: 2;
}

@keyframes home-aurora-drift {
  0% { transform: translate3d(-3%, -2%, 0) rotate(-3deg) scale(1); }
  100% { transform: translate3d(4%, 5%, 0) rotate(6deg) scale(1.08); }
}

@keyframes home-stars-drift {
  to { transform: translate3d(-42px, 34px, 0); }
}

@keyframes home-orb-breathe {
  0%, 100% { opacity: .68; transform: scale(.96); }
  50% { opacity: 1; transform: scale(1.045); }
}

@keyframes home-field-float {
  0% { transform: translate3d(-10px, 6px, 0) rotate(-10deg) scale(.98); }
  100% { transform: translate3d(18px, -14px, 0) rotate(-3deg) scale(1.035); }
}

@media (max-width: 720px) {
  body:not(.contact-page-body) .ambient::before { opacity: .62; }
  body:not(.contact-page-body) .ambient::after { opacity: .2; }
  body:not(.contact-page-body) .hero::before {
    right: -38vw;
    top: 28%;
    width: 118vw;
  }
  body:not(.contact-page-body) .hero::after {
    left: 20%;
    top: 34%;
    width: 82vw;
    height: 82vw;
    opacity: .42;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:not(.contact-page-body) .ambient::before,
  body:not(.contact-page-body) .ambient::after,
  body:not(.contact-page-body) .hero::before,
  body:not(.contact-page-body) .hero::after {
    animation: none !important;
  }
}

/* v13 hero cleanup: match reference layout and remove duplicated divider visuals */
.hero {
  grid-template-columns: minmax(0, .92fr) minmax(500px, .98fr);
  gap: clamp(3rem, 6vw, 8rem);
  min-height: auto;
  padding-top: 138px;
  padding-bottom: 92px;
}
.hero-copy {
  max-width: 560px;
}
.hero-field {
  min-height: clamp(460px, 46vw, 760px);
}
.hero-lens {
  left: 54%;
  top: 50%;
  width: clamp(320px, 31vw, 510px);
  border-radius: 46% 54% 52% 48% / 49% 47% 53% 51%;
  animation: lens-morph 16s ease-in-out infinite alternate;
}
.ring-a { width: 82%; }
.ring-b { width: 64%; }
.ring-c { width: 104%; opacity: .32; }
.hero-dataflow,
.hero-node-map,
.hero-lens::before {
  display: none;
}
.signal {
  color: rgba(226,235,252,.5);
  font-size: .72rem;
  letter-spacing: .15em;
}
.signal i {
  width: 6px;
  height: 6px;
}
.signal-a { left: 16%; top: 22%; }
.signal-b { right: 0; top: 34%; }
.signal-c { right: 12%; bottom: 11%; }

.hero-bridge {
  min-height: 132px;
  margin-top: 0;
}
.hero-bridge::before,
.hero-bridge::after,
.bridge-visual {
  display: none;
}
.identity-hud {
  width: min(1020px, 76vw);
  padding-top: 18px;
  gap: clamp(2rem, 14vw, 18rem);
  border-top: 1px solid rgba(255,255,255,.15);
}
.identity-hud dd {
  font-size: clamp(.86rem, 1.25vw, 1.05rem);
}

@media (max-width: 1120px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding-top: 128px;
    padding-bottom: 80px;
  }
  .hero-copy {
    max-width: 700px;
  }
  .hero-field {
    min-height: 500px;
    margin-top: -16px;
  }
  .hero-lens {
    left: 50%;
    width: min(62vw, 420px);
  }
  .signal-a { left: 14%; top: 21%; }
  .signal-b { right: 10%; top: 34%; }
  .signal-c { right: 18%; bottom: 10%; }
  .identity-hud {
    width: min(820px, 86vw);
    gap: clamp(2rem, 10vw, 8rem);
  }
}

@media (max-width: 640px) {
  .hero {
    padding-top: 116px;
    padding-bottom: 52px;
  }
  .hero-title {
    font-size: clamp(4rem, 20vw, 6.1rem);
  }
  .hero-sub {
    font-size: .8rem;
  }
  .hero-field {
    min-height: 380px;
    margin-top: 0;
  }
  .hero-lens {
    top: 48%;
    width: min(74vw, 310px);
  }
  .signal {
    font-size: .58rem;
  }
  .signal-a { left: 10%; top: 22%; }
  .signal-b { right: 4%; top: 34%; }
  .signal-c { right: 10%; bottom: 16%; }
  .hero-bridge {
    min-height: 112px;
  }
  .identity-hud {
    width: min(100%, 96vw);
    padding-top: 14px;
    gap: 1rem;
  }
  .identity-hud dt {
    font-size: .5rem;
  }
  .identity-hud dd {
    font-size: .72rem;
  }
}

/* v14 — lock every hero layer to one center and isolate Discord copy from BOTS. */
.hero-field {
  --hero-center-x: 54%;
  --hero-center-y: 50%;
}

.hero-lens,
.hero-ring,
.hero-field::before,
.hero-field::after {
  left: var(--hero-center-x);
  top: var(--hero-center-y);
}

/* This older decorative ellipse was independent of the actual orb and caused
   the visibly detached glowing ring. The hero-field already supplies the glow. */
body:not(.contact-page-body) .hero::after {
  display: none;
}

/* Keep the server title in its own column and BOTS entirely inside the visual. */
@media (min-width: 981px) {
  .concept-systems {
    grid-template-columns: minmax(300px, 35%) minmax(0, 1fr);
  }

  .concept-systems .concept-copy {
    overflow: hidden;
    padding-right: clamp(1.5rem, 2.5vw, 2.75rem);
  }

  .concept-systems .concept-copy h3 {
    max-width: 290px;
    font-size: clamp(3.1rem, 4.55vw, 4.8rem);
    white-space: normal !important;
    overflow-wrap: normal;
    text-wrap: wrap;
  }

  .concept-systems .concept-visual {
    min-width: 0;
    overflow: visible;
  }

  .concept-systems .systems-word {
    left: clamp(1.25rem, 4vw, 4.5rem);
    font-size: clamp(6.2rem, 10vw, 9.6rem);
  }

  .concept-systems .systems-disc {
    right: clamp(1.5rem, 4vw, 4.5rem);
    width: clamp(175px, 20vw, 285px);
  }
}

@media (max-width: 1120px) {
  .hero-field {
    --hero-center-x: 50%;
    --hero-center-y: 50%;
  }
}

@media (min-width: 981px) and (max-width: 1180px) {
  .concept-systems {
    grid-template-columns: minmax(285px, 38%) minmax(0, 1fr);
  }

  .concept-systems .concept-copy h3 {
    max-width: 250px;
    font-size: clamp(2.9rem, 4.4vw, 3.8rem);
  }

  .concept-systems .systems-word {
    left: 1.25rem;
    font-size: clamp(5.3rem, 8.6vw, 6.7rem);
  }

  .concept-systems .systems-disc {
    right: 1.25rem;
    width: clamp(165px, 19vw, 220px);
  }
}

@media (max-width: 980px) {
  .concept-systems {
    min-height: 720px;
  }

  .concept-systems .concept-copy h3 {
    max-width: 100%;
    white-space: normal !important;
  }

  .concept-systems .concept-visual {
    inset: 42% 0 0;
  }

  .concept-systems .systems-word {
    left: 5%;
    font-size: clamp(5rem, 17vw, 8rem);
  }

  .concept-systems .systems-disc {
    right: 5%;
    width: clamp(165px, 30vw, 235px);
  }
}

@media (max-width: 640px) {
  .hero-field {
    --hero-center-x: 50%;
    --hero-center-y: 48%;
  }

  .concept-systems {
    min-height: 720px;
  }

  .concept-systems .concept-visual {
    inset: 43% 0 0;
  }

  /* Stack these two visual elements on phones instead of allowing collision. */
  .concept-systems .systems-word {
    left: 50%;
    top: 24%;
    font-size: clamp(4.3rem, 19vw, 5.5rem);
    transform: translate(-50%, -50%);
  }

  .concept-systems .systems-disc {
    left: 50%;
    right: auto;
    top: 66%;
    width: min(40vw, 155px);
    animation: none;
    transform: translate(-50%, -50%);
  }

  .concept-systems .systems-lines {
    right: 5%;
    bottom: 3%;
  }
}

/* The logo should never be cropped inside either Discord treatment. */
.systems-disc img,
.alltech-server img {
  object-fit: contain;
}

/* v5: make the tools stream truly viewport-wide, including ultrawide screens. */
.tools-marquee {
  inline-size: 100%;
  max-inline-size: none;
}

.tools-track {
  display: flex;
  inline-size: max-content;
  min-inline-size: max-content;
}

.tools-group {
  box-sizing: border-box;
  flex: 0 0 auto;
}

/* v7 — stable blur navigation, rebuilt from the last known-good v5 layout. */
.page-blur-transition { display: none; }

.js .page-blur-transition {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: block;
  pointer-events: none;
  opacity: 0;
  background: rgba(2, 5, 11, 0);
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
  transition:
    opacity 340ms ease,
    background-color 340ms ease,
    -webkit-backdrop-filter 380ms var(--ease),
    backdrop-filter 380ms var(--ease);
}

.js.page-loading .page-blur-transition,
.js.page-leaving .page-blur-transition {
  opacity: 1;
  background: rgba(2, 5, 11, .34);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
  backdrop-filter: blur(18px) saturate(115%);
}

.js.page-leaving .page-blur-transition { pointer-events: auto; }

/* Footer navigation shared by all three pages. */
.footer-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.footer-link {
  position: relative;
  color: rgba(221,230,247,.45);
  transition: color 180ms ease;
}

.footer-link::after {
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -5px;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, #8bb6ff, rgba(132,242,214,.72));
  transition: right 240ms var(--ease);
}

.footer-link:hover,
.footer-link:focus-visible { color: rgba(244,248,255,.92); }
.footer-link:hover::after,
.footer-link:focus-visible::after { right: 0; }

.email-modal-footer {
  justify-content: space-between;
  gap: 1rem;
}

.email-privacy-note {
  max-width: 390px;
  margin: 0;
  color: rgba(220,230,247,.38);
  font-size: .66rem;
  line-height: 1.5;
}

.email-privacy-note a {
  color: rgba(158,194,255,.76);
  text-decoration: underline;
  text-decoration-color: rgba(139,182,255,.3);
  text-underline-offset: 3px;
}

.email-privacy-note a:hover { color: #fff; }

/* Privacy page — intentionally simple, fluid, and independent of fixed heights. */
.privacy-page-body { min-height: 100svh; }

.privacy-page {
  padding-top: 132px;
  padding-bottom: clamp(90px, 11vw, 155px);
}

.privacy-hero {
  position: relative;
  min-height: clamp(540px, 72svh, 760px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .72fr);
  align-items: center;
  gap: clamp(2rem, 7vw, 8rem);
}

.privacy-hero-copy { position: relative; z-index: 2; max-width: 760px; }

.privacy-title {
  margin: 1.2rem 0 0;
  font-size: clamp(4rem, 8.3vw, 8.7rem);
  font-weight: 710;
  line-height: .85;
  letter-spacing: -.085em;
}

.privacy-lead {
  max-width: 610px;
  margin: 1.8rem 0 0;
  color: rgba(222,232,248,.58);
  font-size: clamp(.94rem, 1.25vw, 1.08rem);
  line-height: 1.75;
}

.privacy-updated {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 1.5rem 0 0;
  color: rgba(217,229,248,.34);
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.privacy-updated i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8bb6ff;
  box-shadow: 0 0 18px rgba(110,165,255,.9);
}

.privacy-visual {
  position: relative;
  min-height: clamp(340px, 38vw, 520px);
  display: grid;
  place-items: center;
  isolation: isolate;
}

.privacy-visual::before {
  position: absolute;
  width: min(88%, 440px);
  aspect-ratio: 1;
  content: "";
  border-radius: 50%;
  background: radial-gradient(circle, rgba(52,111,221,.26), rgba(30,70,150,.08) 48%, transparent 72%);
  filter: blur(34px);
  animation: privacy-glow 7s ease-in-out infinite;
}

.privacy-core {
  position: relative;
  z-index: 2;
  width: min(58%, 280px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.19);
  border-radius: 47% 53% 51% 49% / 48% 46% 54% 52%;
  background:
    radial-gradient(circle at 34% 23%, rgba(255,255,255,.42), transparent 20%),
    radial-gradient(circle at 58% 64%, rgba(75,132,232,.72), rgba(13,42,96,.66) 48%, rgba(3,8,17,.9) 78%);
  box-shadow:
    0 0 100px rgba(51,108,220,.28),
    inset 14px 17px 34px rgba(255,255,255,.09),
    inset -20px -24px 50px rgba(0,0,0,.28);
  animation: privacy-core-morph 10s ease-in-out infinite alternate;
}

.privacy-core b {
  color: rgba(240,246,255,.7);
  font-size: .64rem;
  letter-spacing: .22em;
  text-shadow: 0 0 22px rgba(138,181,255,.55);
}

.privacy-ring {
  position: absolute;
  z-index: 1;
  aspect-ratio: 1;
  border: 1px solid rgba(134,178,255,.18);
  border-radius: 50%;
}

.privacy-ring-a {
  width: min(76%, 370px);
  animation: privacy-orbit 20s linear infinite;
}

.privacy-ring-b {
  width: min(98%, 480px);
  border-style: dashed;
  opacity: .5;
  animation: privacy-orbit 27s linear infinite reverse;
}

.privacy-policy { display: grid; gap: 18px; }

.policy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.policy-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  padding: clamp(1.5rem, 3.4vw, 3rem);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 24px;
  background:
    radial-gradient(380px circle at 95% 0%, rgba(82,136,237,.1), transparent 58%),
    linear-gradient(145deg, rgba(255,255,255,.034), rgba(255,255,255,.012));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 30px 80px rgba(0,0,0,.18);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: border-color 240ms ease, transform 300ms var(--ease), box-shadow 300ms ease;
}

.policy-card::after {
  position: absolute;
  right: -90px;
  bottom: -110px;
  width: 240px;
  aspect-ratio: 1;
  content: "";
  border: 1px solid rgba(125,170,255,.11);
  border-radius: 50%;
  transition: transform 600ms var(--ease), opacity 300ms ease;
}

.policy-card:hover {
  border-color: rgba(139,181,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 42px 100px rgba(0,0,0,.25);
  transform: translateY(-3px);
}

.policy-card:hover::after { transform: scale(1.12) translate(-8px, -8px); }

.policy-card-wide { min-height: 260px; }
.policy-final { margin-top: 0; }
.policy-number { color: rgba(154,190,255,.46); font-size: .68rem; font-weight: 780; letter-spacing: .12em; }

.policy-card h2 {
  margin: .7rem 0 0;
  font-size: clamp(1.8rem, 3.1vw, 3.25rem);
  font-weight: 620;
  line-height: 1;
  letter-spacing: -.055em;
}

.policy-card p:not(.eyebrow) {
  max-width: 760px;
  margin: 1.15rem 0 0;
  color: rgba(220,230,247,.54);
  font-size: clamp(.84rem, 1vw, .96rem);
  line-height: 1.76;
}

.policy-card a:not(.glass-action) {
  color: rgba(158,194,255,.8);
  text-decoration: underline;
  text-decoration-color: rgba(139,182,255,.25);
  text-underline-offset: 3px;
}

.policy-card .glass-action { margin-top: 1.8rem; }

@keyframes privacy-orbit { to { transform: rotate(360deg); } }
@keyframes privacy-glow { 50% { opacity: .65; transform: scale(1.08); } }
@keyframes privacy-core-morph {
  to { border-radius: 55% 45% 46% 54% / 43% 56% 44% 57%; transform: translateY(-8px) rotate(2deg); }
}

/* Concept polish: visual movement is confined to paint layers, not layout. */
.concept { isolation: isolate; }

.concept::before {
  position: absolute;
  inset: -45%;
  z-index: 0;
  content: "";
  pointer-events: none;
  background: conic-gradient(from 170deg, transparent 0 22%, rgba(74,129,232,.08) 31%, transparent 43% 70%, rgba(132,242,214,.045) 81%, transparent 91%);
  opacity: .38;
  transform: rotate(0deg);
  animation: concept-aurora 20s linear infinite;
}

.concept:hover::before { opacity: .62; }

.concept-copy > span,
.concept-copy > h3,
.concept-copy > .concept-meta {
  opacity: 1;
  transform: none;
}

.concept.is-visible .concept-copy > span { animation: concept-detail-in 560ms 90ms var(--ease) both; }
.concept.is-visible .concept-copy > h3 { animation: concept-detail-in 680ms 150ms var(--ease) both; }
.concept.is-visible .concept-copy > .concept-meta { animation: concept-detail-in 700ms 240ms var(--ease) both; }

.concept-meta li {
  transition: border-color 220ms ease, background-color 220ms ease, transform 240ms var(--ease);
}

.concept-meta li:hover {
  border-color: rgba(133,178,255,.22);
  background: rgba(94,146,238,.08);
  transform: translateY(-2px);
}

.systems-word {
  color: transparent;
  background: linear-gradient(100deg, #f6f8ff 0 36%, #9fc2ff 48%, #f6f8ff 62% 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: systems-shimmer 7s ease-in-out infinite;
}

.systems-disc::after {
  position: absolute;
  inset: -4%;
  content: "";
  border: 1px solid transparent;
  border-top-color: rgba(168,200,255,.62);
  border-right-color: rgba(110,163,255,.16);
  border-radius: 50%;
  filter: drop-shadow(0 0 12px rgba(112,165,255,.35));
  animation: systems-ring-spin 8s linear infinite;
}

.systems-lines span { animation: systems-label-breathe 4s ease-in-out infinite; }
.systems-lines span:nth-child(2) { animation-delay: .55s; }
.systems-lines span:nth-child(3) { animation-delay: 1.1s; }

.vertex-ui { overflow: hidden; }

.vertex-ui::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background:
    radial-gradient(360px circle at 82% 24%, rgba(91,133,204,.12), transparent 60%),
    linear-gradient(rgba(133,163,216,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(133,163,216,.038) 1px, transparent 1px);
  background-size: auto, 36px 36px, 36px 36px;
  opacity: .42;
}

.vertex-ui::after {
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: -24%;
  width: 24%;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(164,198,255,.13), transparent);
  filter: blur(7px);
  transform: skewX(-12deg);
  animation: vertex-sweep 6.5s ease-in-out infinite;
}

.alltech-ui::after {
  position: absolute;
  inset: 0;
  z-index: 20;
  content: "";
  pointer-events: none;
  background: linear-gradient(110deg, transparent 0 42%, rgba(159,193,255,.08) 50%, transparent 58% 100%);
  transform: translateX(-120%);
  animation: alltech-glass-sweep 8s ease-in-out infinite;
}

.concept-alltech .alltech-server.active img { animation: alltech-logo-pulse 4.2s ease-in-out infinite; }

@keyframes concept-aurora { to { transform: rotate(360deg); } }
@keyframes concept-detail-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes systems-shimmer { 0%, 26%, 100% { background-position: 100% 50%; } 55%, 75% { background-position: 0 50%; } }
@keyframes systems-ring-spin { to { transform: rotate(360deg); } }
@keyframes systems-label-breathe { 50% { color: rgba(228,237,252,.7); transform: translateX(-3px); } }
@keyframes vertex-sweep { 0%, 24% { left: -26%; opacity: 0; } 42% { opacity: 1; } 72%, 100% { left: 112%; opacity: 0; } }
@keyframes alltech-glass-sweep { 0%, 35% { transform: translateX(-120%); opacity: 0; } 52% { opacity: 1; } 72%, 100% { transform: translateX(120%); opacity: 0; } }
@keyframes alltech-logo-pulse { 50% { filter: brightness(1.16) drop-shadow(0 0 9px rgba(112,165,255,.34)); transform: scale(1.035); } }

@media (max-width: 900px) {
  .privacy-hero {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding-top: 44px;
    padding-bottom: 70px;
  }

  .privacy-hero-copy { max-width: 720px; }
  .privacy-visual { min-height: 390px; }
  .privacy-core { width: min(46vw, 250px); }
  .privacy-ring-a { width: min(61vw, 340px); }
  .privacy-ring-b { width: min(78vw, 430px); }
  .policy-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .privacy-page { padding-top: 106px; }
  .privacy-hero { padding-top: 28px; padding-bottom: 54px; }
  .privacy-title { font-size: clamp(3.75rem, 18vw, 5.6rem); }
  .privacy-lead { margin-top: 1.35rem; font-size: .9rem; }
  .privacy-visual { min-height: 310px; }
  .privacy-core { width: min(52vw, 205px); }
  .privacy-ring-a { width: min(68vw, 265px); }
  .privacy-ring-b { width: min(88vw, 340px); }

  .policy-card,
  .policy-card-wide {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: .75rem;
    padding: 1.4rem;
    border-radius: 19px;
  }

  .policy-card h2 { font-size: clamp(1.7rem, 9vw, 2.5rem); }
  .policy-card p:not(.eyebrow) { font-size: .82rem; }
  .footer-meta { gap: .75rem; }
  .email-modal-footer { align-items: stretch; flex-direction: column; }
  .email-privacy-note { max-width: none; }

  /* Mobile gets the polished static states without constant GPU work. */
  .concept::before,
  .systems-word,
  .systems-disc::after,
  .systems-lines span,
  .vertex-ui::before,
  .vertex-ui::after,
  .alltech-ui::after,
  .concept-alltech .alltech-server.active img {
    animation: none;
  }

  .concept::before { opacity: .26; }
  .systems-word { background-position: 42% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .js .page-blur-transition { transition-duration: 1ms !important; }
  .privacy-visual::before,
  .privacy-core,
  .privacy-ring,
  .concept::before,
  .systems-word,
  .systems-disc::after,
  .systems-lines span,
  .vertex-ui::before,
  .vertex-ui::after,
  .alltech-ui::after,
  .concept-alltech .alltech-server.active img {
    animation: none !important;
  }

  .concept-copy > span,
  .concept-copy > h3,
  .concept-copy > .concept-meta {
    opacity: 1;
    transform: none;
  }
}

/* Keep the Vertex decoration behind its actual interface content. */
.vertex-ui { isolation: isolate; }
.vertex-ui::before { z-index: 0; }
.vertex-ui::after { z-index: 1; pointer-events: none; }
.vertex-ui > small,
.vertex-ui > strong,
.vertex-ui > .vertex-candles { position: relative; z-index: 2; }
.vertex-ui > .vertex-candles { position: absolute; }

/* Mobile polish: keep the homepage immersive without forcing desktop-scale
   interface mockups into narrow iPhone widths. */
@media (max-width: 760px) {
  :root { --shell: min(520px, calc(100% - 28px)); }

  .site-header { width: calc(100% - 20px); }
  .nav-shell { min-height: 50px; padding-inline: 14px; border-radius: 17px; }
  .site-header.scrolled .nav-shell { min-height: 48px; }
  .brand { font-size: .86rem; }

  .hero {
    min-height: auto;
    padding-top: max(112px, calc(92px + env(safe-area-inset-top)));
    padding-bottom: 46px;
  }
  .hero-title {
    max-width: 6.4em;
    font-size: clamp(3.6rem, 18vw, 5.35rem);
    line-height: .86;
  }
  .hero-sub { margin-top: 1.15rem; font-size: .76rem; }
  .hero-field {
    min-height: clamp(310px, 82vw, 430px);
    margin-top: -18px;
  }
  .hero-lens { width: min(76vw, 320px); }
  .signal { font-size: .54rem; }
  .identity-hud {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }

  .about,
  .work,
  .discord { padding-top: 72px; }

  .section-title-row h2,
  .tools-header h2,
  .presence-heading h2 {
    font-size: clamp(2.25rem, 12vw, 3.55rem);
  }

  .concept {
    min-height: 590px;
    border-radius: 18px;
  }
  .concept-copy { padding: 1.35rem; }
  .concept-copy h3 {
    font-size: clamp(2.65rem, 13vw, 3.8rem);
    letter-spacing: -.065em;
  }
  .concept-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .concept-meta li {
    min-width: 0;
    border-radius: 9px;
  }

  .concept-systems { min-height: 650px; }
  .concept-systems .concept-visual { inset: 35% -3% 0; }
  .concept-systems .systems-word {
    top: 24%;
    width: max-content;
    max-width: calc(100% - 28px);
    font-size: clamp(4.35rem, 18vw, 5.85rem);
  }
  .concept-systems .systems-disc { width: min(44vw, 170px); }
  .concept-systems .systems-lines {
    right: 7%;
    bottom: 5%;
  }

  .concept-vertex { min-height: 600px; }
  .concept-vertex .concept-visual { inset: 36% 0 0; }
  .vertex-ui {
    inset: 5% 4% 6%;
    padding: 1.05rem;
    border-radius: 16px;
  }
  .vertex-ui > small { font-size: .58rem; }
  .vertex-ui strong {
    max-width: 100%;
    font-size: clamp(2.18rem, 11vw, 3.35rem);
    letter-spacing: -.045em;
  }
  .vertex-candles {
    left: 6%;
    right: 6%;
    bottom: 8%;
    width: 88%;
    height: 43%;
  }
  .vertex-candle { width: clamp(6px, 2.6vw, 9px); }

  .concept-alltech { min-height: 660px; }
  .concept-alltech .concept-visual { inset: 32% 0 0; }
  .alltech-ui {
    inset: 4% 3% 5%;
    grid-template-columns: 42px minmax(0, 1fr);
    border-radius: 14px;
    transform: none;
  }
  .concept-alltech:hover .alltech-ui { transform: none; }
  .alltech-channelbar,
  .alltech-members { display: none; }
  .alltech-serverbar { padding: 10px 6px; }
  .alltech-server {
    width: 30px;
    height: 30px;
    border-radius: 10px;
  }
  .alltech-chathead {
    min-height: 44px;
    padding-inline: 10px;
  }
  .alltech-chathead p { display: none; }
  .alltech-messages {
    justify-content: center;
    padding: 12px 9px;
  }
  .alltech-channel-intro { padding-bottom: 10px; }
  .alltech-channel-intro h4 { font-size: clamp(.9rem, 5vw, 1.1rem); }
  .alltech-verification-message,
  .alltech-message {
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 7px;
    padding-inline: 4px;
  }
  .alltech-verification-message > img,
  .alltech-avatar {
    width: 26px;
    height: 26px;
  }
  .alltech-message-meta { gap: 4px; }
  .alltech-message-meta small { display: none; }
  .alltech-verification-embed {
    padding: 8px 9px;
    border-radius: 7px;
  }
  .alltech-demo-actions button { min-height: 26px; }
  .alltech-composer {
    min-height: 36px;
    margin: 0 8px 9px;
  }

  .presence { gap: 1.35rem; }
  .presence-profile {
    grid-template-columns: 50px minmax(0, 1fr);
    gap: .85rem;
    padding: 0;
  }
  .discord-avatar-wrap {
    width: 50px;
    height: 50px;
  }
  .discord-state,
  .activity-card,
  .text-action { grid-column: 2; }
  .discord-state {
    justify-self: start;
    font-size: .72rem;
  }
  .activity-card { grid-template-columns: 40px minmax(0, 1fr); }
  .activity-art {
    width: 40px;
    height: 40px;
  }

  .tools-section { padding-block: 78px; }
  .tools-group {
    gap: 2.2rem;
    padding-right: 2.2rem;
  }
}

@media (max-width: 390px) {
  :root { --shell: calc(100% - 22px); }

  .hero-title { font-size: clamp(3.35rem, 17vw, 4.65rem); }
  .glass-action { width: 100%; }
  .concept { min-height: 570px; }
  .concept-copy { padding: 1.15rem; }
  .concept-meta { gap: .42rem; }
  .concept-meta li { padding: .5rem .54rem; }
  .concept-meta span { font-size: .43rem; }
  .concept-systems .systems-word { font-size: clamp(3.85rem, 17vw, 4.7rem); }
  .concept-vertex { min-height: 570px; }
  .vertex-ui strong { font-size: clamp(2rem, 10.4vw, 2.85rem); }
  .concept-alltech { min-height: 625px; }
  .alltech-ui { grid-template-columns: 38px minmax(0, 1fr); }
  .alltech-server {
    width: 28px;
    height: 28px;
  }
  .alltech-verification-embed p { font-size: .42rem; }
}

/* Performance pass: keep the visual identity without continuous decorative GPU work. */
.about,
.work,
.discord,
.concept,
.presence,
.tools-section,
.contact,
.site-footer,
.privacy-policy {
  content-visibility: auto;
  contain-intrinsic-size: auto 720px;
}

.ambient-light,
.hero-lens,
.hero-ring,
.hero-dataflow span,
.hero-node-map span,
.bridge-visual span,
.nox-disc,
.scan-line,
.nexus-content > div b,
.systems-orbit,
.hero-field::before,
.hero-field::after,
.lens-glint,
.email-modal-glow,
.home-hero::before,
.home-hero::after,
.home-orb,
.home-field,
.privacy-visual::before,
.privacy-core,
.privacy-ring,
.concept::before,
.concept-systems .systems-visual,
.concept-systems .systems-ring,
.systems-lines span,
.concept-vertex::after,
.concept-alltech::after,
.concept-alltech .alltech-server.active img {
  animation: none !important;
}

.ambient-light {
  filter: blur(72px);
  opacity: .12;
  will-change: auto;
}

.cursor-light {
  filter: blur(10px);
  opacity: .72;
}

.hero-lens {
  will-change: transform;
}

.hero-field::before,
.hero-field::after {
  filter: blur(20px);
}

.nav-shell,
.site-header.scrolled .nav-shell {
  -webkit-backdrop-filter: blur(10px) saturate(155%);
  backdrop-filter: blur(10px) saturate(155%);
}

.tools-track {
  will-change: auto;
}

/* v15 — MacBook/Safari GPU performance fix.
   The previous performance block missed several real selectors and pseudo-elements.
   Keep the same static appearance while stopping large blurred layers from repainting forever. */
body:not(.contact-page-body) .ambient::before,
body:not(.contact-page-body) .ambient::after,
body:not(.contact-page-body) .hero::before,
body:not(.contact-page-body) .hero::after,
.hero-lens::after,
.systems-word,
.systems-disc,
.systems-disc::after,
.systems-lines span,
.vertex-ui::after,
.alltech-ui::after,
.concept-alltech .alltech-server.active img {
  animation: none !important;
}

/* The orb already has its own gradients, so an expensive moving backdrop blur
   is not needed. Pointer parallax remains GPU-composited. */
.hero-lens {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  will-change: transform;
}

/* A radial gradient is already soft; blurring a 560px layer on every pointer
   frame forces unnecessary repainting in Safari and Chrome. */
.cursor-light {
  width: 480px;
  height: 480px;
  filter: none !important;
  opacity: .6;
  transform: translate3d(calc(var(--mx) - 240px), calc(var(--my) - 240px), 0);
  will-change: transform;
}

/* Large project cards have opaque gradient fills, so backdrop blur adds little
   visually while making scrolling and animated children substantially heavier. */
.concept,
.vertex-ui,
.alltech-ui {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Contain decorative painting so it cannot invalidate unrelated page regions. */
.ambient,
.hero-field,
.concept-visual,
.vertex-ui,
.alltech-ui {
  contain: paint;
}

/* Preserve a subtle static glow in place of the animated blurred aura. */
.hero-lens::after {
  filter: blur(18px);
  opacity: .72;
  transform: scale(1);
}

/* Stop animation work for sections outside the viewport. */
@media (min-width: 761px) {
  .concept,
  .presence,
  .tools-section {
    content-visibility: auto;
    contain-intrinsic-size: auto 720px;
  }
}

/* v16 — soft hero aura without expensive animated blur.
   Paint containment clipped the orb's oversized glow to the hero-field box,
   creating a visible rectangular cutoff. Keep containment elsewhere, but let
   this one static decorative layer extend naturally beyond the field. */
.hero-field {
  contain: layout !important;
  overflow: visible !important;
}

/* The gradient itself supplies the softness, so no large filter blur is needed. */
.hero-field::before {
  width: min(142%, 920px);
  background:
    radial-gradient(circle at 46% 44%,
      rgba(126, 178, 255, .15) 0%,
      rgba(73, 132, 230, .09) 27%,
      rgba(38, 86, 176, .038) 51%,
      rgba(24, 58, 126, .014) 68%,
      transparent 84%);
  filter: none !important;
  opacity: .9;
  animation: none !important;
}

.hero-field::after {
  width: min(178%, 1120px);
  background: radial-gradient(circle,
    rgba(57, 111, 212, .052) 0%,
    rgba(34, 77, 160, .026) 42%,
    rgba(20, 48, 108, .009) 66%,
    transparent 86%);
  filter: none !important;
  opacity: .72;
  animation: none !important;
}

/* A wide multi-stop radial fade looks like blur but is effectively a static
   background image. It follows the orb's existing parallax transform without
   causing a filter repaint on every frame. */
.hero-lens::after {
  inset: -72%;
  background: radial-gradient(circle,
    rgba(103, 160, 255, .16) 0%,
    rgba(71, 128, 229, .105) 24%,
    rgba(44, 94, 188, .055) 45%,
    rgba(29, 67, 147, .022) 62%,
    rgba(18, 43, 99, .007) 76%,
    transparent 88%);
  filter: none !important;
  opacity: .9;
  animation: none !important;
  will-change: auto;
}

@media (max-width: 640px) {
  .hero-field::before { width: 154%; filter: none !important; }
  .hero-field::after { width: 190%; filter: none !important; }
  .hero-lens::after { inset: -64%; }
}

/* v18 — terrain is part of the hero background, not a separate object. */
.hero {
  grid-template-columns: 1fr;
  min-height: 100svh;
  padding-top: 132px;
  padding-bottom: 96px;
  overflow: visible !important;
  isolation: isolate;
}

.hero-copy {
  z-index: 3;
  max-width: 590px;
}

.hero-title {
  font-size: clamp(4.5rem, 8.2vw, 8.5rem);
}

body:not(.contact-page-body) .hero .hero-topography {
  position: absolute;
  top: 0;
  bottom: auto;
  left: calc(50% - 50vw);
  z-index: 0;
  width: 100vw;
  height: 100svh;
  min-height: 620px;
  margin: 0;
  overflow: hidden !important;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  contain: paint !important;
  transform: none !important;
  pointer-events: none;
}

body:not(.contact-page-body) .hero .hero-topography::before,
body:not(.contact-page-body) .hero .hero-topography::after {
  display: none !important;
  content: none !important;
}

#topography-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .56;
}

.hero-bridge {
  min-height: 120px;
}

.identity-hud {
  width: min(920px, 78vw);
}

.about-content h2 {
  max-width: 1040px;
}

@media (max-width: 1120px) {
  .hero {
    padding-top: 126px;
  }

  .hero-copy {
    max-width: 720px;
  }

  #topography-canvas {
    opacity: .5;
  }
}

@media (max-width: 640px) {
  .hero {
    min-height: 100svh;
    padding-top: 112px;
    padding-bottom: 64px;
  }

  .hero-title {
    font-size: clamp(3.75rem, 19vw, 5.8rem);
  }

  #topography-canvas {
    opacity: .34;
  }

  .identity-hud {
    width: 100%;
  }
}

/* v19 — one continuous black surface across every page. */
:root {
  --bg: #000;
}

html,
body,
.ambient {
  background: #000 !important;
}

.ambient {
  background-image: none !important;
}

.ambient-grid,
.ambient-light,
.cursor-light,
body:not(.contact-page-body) .ambient::before,
body:not(.contact-page-body) .ambient::after,
body:not(.contact-page-body) .hero::before,
body:not(.contact-page-body) .hero::after {
  display: none !important;
}

#topography-canvas {
  opacity: .9;
  image-rendering: auto;
}

@media (max-width: 1120px) {
  #topography-canvas {
    opacity: .82;
  }
}

@media (max-width: 640px) {
  #topography-canvas {
    opacity: .72;
  }
}

/* v20 — calmer terrain, a seamless hero exit, and more confident navigation. */
.site-header {
  top: max(18px, env(safe-area-inset-top));
}

.nav-shell {
  min-height: 64px;
  padding-inline: 34px;
  border-radius: 21px;
  background: rgba(8, 11, 17, .58);
  border-color: rgba(255, 255, 255, .2);
  box-shadow:
    0 18px 52px rgba(0, 0, 0, .32),
    inset 0 1px 0 rgba(255, 255, 255, .26),
    inset 0 -1px 0 rgba(255, 255, 255, .06);
}

.site-header.scrolled .nav-shell {
  min-height: 60px;
  background: rgba(5, 8, 13, .76);
}

.desktop-nav {
  gap: 1.7rem;
}

.desktop-nav a {
  padding: .58rem .78rem;
  font-size: .91rem;
  letter-spacing: 0;
}

.hero-label {
  color: rgba(220, 231, 250, .58);
}

.hero-sub {
  color: rgba(226, 234, 248, .62);
}

body:not(.contact-page-body) .hero .hero-topography {
  height: max(100svh, 720px);
  background: #000;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 68%, rgba(0, 0, 0, .72) 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 68%, rgba(0, 0, 0, .72) 82%, transparent 100%);
}

#topography-canvas {
  opacity: .92;
}

.hero-bridge {
  margin-top: clamp(-52px, -4vw, -24px);
}

.identity-hud {
  border-top-color: rgba(255, 255, 255, .12);
}

.concept {
  border-color: rgba(255, 255, 255, .13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 30px 90px rgba(0, 0, 0, .24);
}

@media (max-width: 980px) {
  .site-header > .nav-shell > .brand {
    display: inline-flex;
  }

  .nav-shell {
    justify-content: space-between;
    width: 100%;
    min-height: 60px;
    padding-inline: 18px 10px;
  }

  .site-header.scrolled .nav-shell {
    min-height: 56px;
  }

  body:not(.contact-page-body) .hero .hero-topography {
    height: max(100svh, 680px);
  }
}

@media (max-width: 640px) {
  .site-header {
    top: max(10px, env(safe-area-inset-top));
  }

  .nav-shell {
    min-height: 58px;
    padding-inline: 16px 8px;
    border-radius: 19px;
  }

  .site-header.scrolled .nav-shell {
    min-height: 54px;
  }

  .site-header > .nav-shell > .brand {
    font-size: .88rem;
  }

  body:not(.contact-page-body) .hero .hero-topography {
    height: max(100svh, 620px);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, rgba(0, 0, 0, .64) 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 62%, rgba(0, 0, 0, .64) 80%, transparent 100%);
  }

  #topography-canvas {
    opacity: .76;
  }
}

/* v21 — stripped-back identity and one consistent black visual system. */
.reveal,
.reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: none;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.site-header > .nav-shell > .brand {
  display: inline-flex;
}

.site-header .nav-shell {
  gap: clamp(1.5rem, 3vw, 3rem);
  background: rgba(3, 3, 3, .76);
  border-color: rgba(255, 255, 255, .14);
}

.desktop-nav {
  gap: .35rem;
}

.desktop-nav a {
  color: rgba(255, 255, 255, .58);
}

.hero {
  min-height: 100svh;
  place-items: center;
  padding-block: 120px 80px;
  text-align: center;
}

.hero-copy {
  width: 100%;
  max-width: none;
}

.hero-title {
  margin: 0;
  font-size: clamp(5.2rem, 15vw, 14rem);
  font-weight: 720;
  line-height: .8;
  letter-spacing: -.09em;
}

.hero-line {
  padding: .08em;
}

.hero-line-accent > span,
.privacy-title .hero-line-accent > span,
.contact-title .hero-line-accent > span {
  color: #fff;
  background: none;
  -webkit-text-fill-color: currentColor;
  text-shadow: 0 12px 60px rgba(38, 86, 176, .15);
}

body:not(.contact-page-body) .hero .hero-topography {
  opacity: .68;
}

.work {
  padding-top: clamp(80px, 10vw, 140px);
}

.section-title-row {
  margin-bottom: clamp(2rem, 5vw, 4rem);
}

.section-title-row h2 {
  font-size: clamp(3.5rem, 8vw, 7rem);
}

.concept {
  background: #030303 !important;
  border-color: rgba(255, 255, 255, .1) !important;
  box-shadow: none !important;
}

.concept::before,
.concept::after,
.concept-vertex::after,
.concept-alltech::after {
  display: none !important;
}

.concept:hover {
  border-color: rgba(92, 134, 204, .32) !important;
  transform: none;
}

.concept-copy {
  padding: clamp(1.5rem, 3.5vw, 3rem);
}

.concept-copy h3 {
  margin: 0;
  color: #fff;
  font-size: clamp(3rem, 6vw, 6rem);
}

.concept-visual {
  filter: saturate(.08) brightness(.78) contrast(1.08);
  transition: filter 280ms ease;
}

.concept:hover .concept-visual,
.concept:focus-within .concept-visual {
  filter: saturate(.22) brightness(.9) contrast(1.05);
}

.concept-vertex,
.concept-systems,
.concept-alltech,
.vertex-ui,
.alltech-ui {
  background-color: #030303 !important;
  background-image: none !important;
}

.discord {
  padding-top: clamp(110px, 14vw, 190px);
  padding-bottom: clamp(110px, 14vw, 190px);
}

.presence {
  display: flex;
  justify-content: center;
  padding: 0;
  border: 0;
}

.presence-profile {
  width: min(620px, 100%);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .45rem 1rem;
  padding: clamp(1.25rem, 3vw, 1.8rem);
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 22px;
  background: #050505;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .36), inset 0 1px 0 rgba(255, 255, 255, .035);
}

.discord-avatar-wrap {
  grid-row: 1 / span 2;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #0b0b0b;
}

.discord-identity {
  grid-column: 2;
}

.discord-identity p {
  color: rgba(255, 255, 255, .42);
  font-size: .82rem;
}

.discord-state {
  grid-column: 2;
  justify-self: start;
  color: rgba(255, 255, 255, .7);
  font-size: .86rem;
  white-space: normal;
}

.activity-card {
  grid-column: 1 / -1;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: .9rem;
  margin-top: .8rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.activity-art {
  width: 54px;
  height: 54px;
  border-radius: 12px;
}

.activity-card strong {
  font-size: .92rem;
}

.activity-card p,
.activity-card small {
  margin-top: .14rem;
  color: rgba(255, 255, 255, .42);
  font-size: .76rem;
}

.contact {
  padding-top: 0;
}

.contact-line {
  display: block;
  padding: 0;
  border: 0;
}

.contact-word {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: clamp(2rem, 5vw, 4rem);
  border-top: 1px solid rgba(255, 255, 255, .1);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.contact-word h2 {
  margin: 0;
  font-size: clamp(4rem, 10vw, 9rem);
}

.contact-word > span {
  font-size: clamp(2rem, 5vw, 4rem);
  color: rgba(255, 255, 255, .35);
  transition: color 180ms ease, transform 220ms var(--ease);
}

.contact-word:hover > span {
  color: #fff;
  transform: translate(4px, -4px);
}

.contact-page,
.privacy-page {
  padding-top: 132px;
}

.contact-page {
  min-height: 100svh;
}

.contact-title,
.privacy-title {
  margin: 0;
  font-size: clamp(5rem, 14vw, 12rem);
}

.contact-links {
  margin-top: clamp(3rem, 7vw, 6rem);
}

.contact-link {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: clamp(1.3rem, 2.8vw, 2.1rem) 0;
}

.contact-link strong {
  font-size: clamp(1.35rem, 3vw, 2.2rem);
}

.email-modal-backdrop {
  background: rgba(0, 0, 0, .82);
}

.email-modal.is-open .email-modal-backdrop {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.email-modal-panel {
  width: min(700px, 100%);
  border-color: rgba(255, 255, 255, .12);
  border-radius: 22px;
  background: #050505;
  box-shadow: 0 40px 120px rgba(0, 0, 0, .7);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.email-modal-header {
  align-items: center;
  padding-bottom: 1rem;
}

.email-modal-header h2 {
  font-size: clamp(2.5rem, 6vw, 4rem);
}

.email-field > span {
  color: rgba(255, 255, 255, .62);
  font-size: .78rem;
  font-weight: 560;
  letter-spacing: 0;
  text-transform: none;
}

.email-field input,
.email-field textarea {
  border-color: rgba(255, 255, 255, .1);
  background: #090909;
  box-shadow: none;
}

.email-field input:focus,
.email-field textarea:focus {
  border-color: rgba(96, 143, 220, .62);
  background: #090909;
  box-shadow: 0 0 0 3px rgba(55, 102, 180, .1);
}

.email-modal-mailapp,
.email-modal-close,
.email-modal-submit.glass-action {
  background: #0b0b0b;
  border-color: rgba(255, 255, 255, .12);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.email-privacy-note {
  color: rgba(255, 255, 255, .42);
  font-size: .75rem;
}

.privacy-page {
  padding-bottom: clamp(90px, 12vw, 150px);
}

.privacy-hero {
  min-height: auto;
  display: block;
  padding: clamp(80px, 12vw, 140px) 0 clamp(60px, 9vw, 100px);
}

.privacy-updated {
  margin-top: 1.25rem;
  color: rgba(255, 255, 255, .36);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.privacy-policy {
  width: min(760px, 100%);
  display: block;
  padding-top: 1px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.privacy-policy > section {
  padding: clamp(1.8rem, 4vw, 3rem) 0;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.privacy-policy h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  letter-spacing: -.035em;
}

.privacy-policy p {
  margin: .85rem 0 0;
  color: rgba(255, 255, 255, .56);
  font-size: clamp(.9rem, 1.3vw, 1rem);
  line-height: 1.7;
}

.privacy-policy a {
  color: rgba(154, 188, 242, .85);
  text-underline-offset: 3px;
}

@media (max-width: 980px) {
  .site-header .nav-shell {
    gap: 1rem;
  }
}

@media (max-width: 640px) {
  .hero {
    min-height: 100svh;
    padding-top: 100px;
    padding-bottom: 60px;
  }

  .hero-title {
    font-size: clamp(4.5rem, 23vw, 7rem);
  }

  .concept-copy h3 {
    font-size: clamp(2.8rem, 14vw, 4rem);
  }

  .presence-profile {
    border-radius: 18px;
  }

  .discord-avatar-wrap {
    width: 56px;
    height: 56px;
  }

  .email-form-grid {
    grid-template-columns: 1fr;
  }

  .email-modal-footer {
    gap: 1rem;
  }

  .contact-title,
  .privacy-title {
    font-size: clamp(4.4rem, 21vw, 7rem);
  }
}

/* v22 — deep navy lift: still restrained, no longer crushed into pure black. */
:root {
  --bg: #02050b;
}

html,
body {
  background: #02050b !important;
}

body {
  background-image:
    radial-gradient(circle at 78% 8%, rgba(35, 74, 137, .14), transparent 28%),
    linear-gradient(180deg, #02050b 0%, #050a13 45%, #02050b 100%) !important;
}

.ambient {
  display: block !important;
  background:
    radial-gradient(circle at 15% 36%, rgba(25, 58, 116, .12), transparent 30%),
    radial-gradient(circle at 82% 68%, rgba(33, 71, 132, .11), transparent 34%) !important;
}

.site-header .nav-shell,
.site-header.scrolled .nav-shell {
  background: rgba(6, 13, 25, .78);
  border-color: rgba(153, 187, 240, .18);
  box-shadow:
    0 18px 55px rgba(0, 0, 0, .3),
    inset 0 1px 0 rgba(220, 234, 255, .12);
}

body:not(.contact-page-body) .hero .hero-topography {
  background: #02050b;
  opacity: .78;
}

.hero-line-accent > span,
.privacy-title .hero-line-accent > span,
.contact-title .hero-line-accent > span {
  color: #f5f8ff;
  text-shadow: 0 16px 70px rgba(58, 105, 183, .22);
}

.concept {
  background-color: #060b14 !important;
  background-image:
    radial-gradient(circle at 78% 34%, rgba(35, 78, 148, .13), transparent 34%),
    linear-gradient(145deg, rgba(12, 24, 43, .82), rgba(4, 9, 17, .94)) !important;
  border-color: rgba(139, 174, 229, .16) !important;
  box-shadow: inset 0 1px 0 rgba(220, 234, 255, .035) !important;
}

.concept:hover {
  border-color: rgba(120, 164, 232, .38) !important;
}

.concept-visual {
  filter: saturate(.24) brightness(.92) contrast(1.04);
}

.concept:hover .concept-visual,
.concept:focus-within .concept-visual {
  filter: saturate(.38) brightness(1) contrast(1.02);
}

.concept-vertex,
.concept-systems,
.concept-alltech {
  background-color: #060b14 !important;
}

.vertex-ui,
.alltech-ui {
  background-color: #07101d !important;
  background-image: linear-gradient(145deg, rgba(18, 36, 64, .64), rgba(5, 11, 20, .94)) !important;
  border-color: rgba(135, 171, 228, .17);
}

.presence-profile {
  background:
    radial-gradient(circle at 12% 20%, rgba(39, 82, 152, .14), transparent 35%),
    #07101c;
  border-color: rgba(139, 174, 229, .19);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(220, 234, 255, .05);
}

.discord-avatar-wrap,
.activity-art {
  background: #0b1728;
}

.contact-word,
.contact-links,
.privacy-policy {
  border-color: rgba(139, 174, 229, .16);
}

.contact-link {
  border-color: rgba(139, 174, 229, .14);
}

.contact-link:hover {
  background: rgba(20, 43, 77, .34);
}

.email-modal-backdrop {
  background: rgba(1, 4, 10, .76);
}

.email-modal-panel {
  background:
    radial-gradient(circle at 90% 0%, rgba(35, 76, 141, .16), transparent 38%),
    #07101c;
  border-color: rgba(139, 174, 229, .2);
}

.email-field input,
.email-field textarea,
.email-modal-mailapp,
.email-modal-close,
.email-modal-submit.glass-action {
  background: #0a1524;
  border-color: rgba(139, 174, 229, .16);
}

.email-field input:focus,
.email-field textarea:focus {
  background: #0b1728;
  border-color: rgba(112, 163, 240, .64);
}

.privacy-policy > section {
  border-color: rgba(139, 174, 229, .13);
}

.privacy-policy p,
.site-footer {
  color: rgba(220, 231, 248, .62);
}

.contact-word,
.privacy-policy,
.site-footer {
  position: relative;
}