/* ==========================================================================
   Pixel Fluent — design system (base Vexon)
   Compartilhado por index, servicos, portfolio e sprintpixel21.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&family=JetBrains+Mono:wght@400;500&family=Space+Grotesk:wght@700&family=Orbitron:wght@700&family=Playfair+Display:ital,wght@1,400&display=swap');

:root {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  --font-display: "Space Grotesk", sans-serif;
  --font-logo: "Orbitron", sans-serif;
  --font-serif: "Playfair Display", serif;
  --accent: #E6E6E6;
  --muted: #8E9299;
  --line: rgba(255,255,255,0.05);
  --ease: cubic-bezier(0.16,1,0.3,1);
  --ease-io: cubic-bezier(0.76,0,0.24,1);
  --pad-x: 1.5rem;
}
@media (min-width: 768px) { :root { --pad-x: 2.5rem; } }

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { -ms-overflow-style: none; scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }
body {
  background: #000; color: #fff;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
::selection { background: #fff; color: #000; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; }
img { max-width: 100%; display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Cursor custom só em mouse de verdade; toque mantém o comportamento nativo */
html.has-cursor body,
html.has-cursor a, html.has-cursor button, html.has-cursor [role=button],
html.has-cursor summary, html.has-cursor input, html.has-cursor textarea,
html.has-cursor label, html.has-cursor select { cursor: none; }

/* ============ Halo (fundo fixo) ============ */
#halo {
  position: fixed; inset: 0; z-index: 0; opacity: .45;
  transform-origin: center; will-change: transform;
  background: radial-gradient(60% 50% at 50% 22%, rgba(120,170,255,0.18), rgba(40,80,180,0.05) 40%, transparent 70%);
}
#halo canvas { display: block; width: 100%; height: 100%; }

/* ============ Page shell ============ */
.page { position: relative; z-index: 10; }
html.js .page, html.js .nav { opacity: 0; }
html.is-ready .page { opacity: 1; transition: opacity 1s ease-out; }
html.is-ready .nav { opacity: 1; }

/* ============ Preloader ============ */
#preloader {
  position: fixed; inset: 0; z-index: 200; background: #000;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 2.5rem;
  transition: opacity .6s var(--ease-io), transform .6s var(--ease-io), filter .6s var(--ease-io);
}
#preloader.out { opacity: 0; transform: scale(1.05); filter: blur(40px); pointer-events: none; }
.pre-top {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono); font-size: .75rem; letter-spacing: .4em;
  color: rgba(255,255,255,0.4);
  animation: preTop .8s var(--ease) both;
}
.pre-top .pre-brand { display: flex; align-items: center; gap: .75rem; }
.pre-top .pre-brand img { width: 18px; height: 18px; }
.pre-top .pre-count { color: #fff; }
@keyframes preTop { from { transform: translateY(-20px); opacity: 0; } to { transform: none; opacity: 1; } }
.pre-center {
  position: relative; flex: 1; width: 100%;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.pre-center canvas { width: 100%; height: 100%; }
.pre-bottom { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; text-align: center; }
.pre-tag {
  position: relative; height: 1.4em; overflow: hidden;
  font-family: var(--font-mono); font-size: .875rem; letter-spacing: .5em; color: #fff;
}
.pre-tag span { display: block; animation: tagIn .35s var(--ease) both; }
@keyframes tagIn { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
.pre-note {
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: .2em; color: rgba(255,255,255,0.2);
}

/* ============ Cursor ============ */
.cursor-layer { pointer-events: none; position: fixed; inset: 0; z-index: 300; }
.cursor-dot, .cursor-ring {
  position: absolute; left: 0; top: 0; border-radius: 9999px;
  transform: translate(-50%, -50%); will-change: left, top;
}
.cursor-dot { width: 10px; height: 10px; background: #fff; mix-blend-mode: difference; }
.cursor-ring {
  width: 40px; height: 40px; border: 1px solid rgba(255,255,255,0.3);
  transition: width .3s, height .3s;
}
.cursor-layer.hover .cursor-ring { width: 80px; height: 80px; }
.cursor-layer.hidden { opacity: 0; }

/* ============ Nav ============ */
.nav {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 50;
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 1.5rem; pointer-events: none;
}
.nav > * { pointer-events: auto; }
@media (min-width: 768px) { .nav { padding: 2rem 2.5rem; } }
.nav-left { display: flex; flex-direction: column; gap: 1.5rem; }
@media (min-width: 768px) { .nav-left { gap: 2.5rem; } }
html.is-ready .nav-left { animation: navL .8s var(--ease) both; }
html.is-ready .nav-right { animation: navR .8s var(--ease) .1s both; }
@keyframes navL { from { transform: translateX(-20px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes navR { from { transform: translateY(-10px); opacity: 0; } to { transform: none; opacity: 1; } }
.brand { display: inline-flex; align-items: center; gap: .75rem; color: #fff; }
.brand img { width: 1.75rem; height: 1.75rem; }
.brand span {
  font-family: var(--font-logo); font-weight: 700; font-size: 1.125rem;
  letter-spacing: -0.05em; line-height: 1; white-space: nowrap;
}
@media (max-width: 420px) { .nav .brand span { font-size: .95rem; } .nav .brand { gap: .5rem; } }
@media (min-width: 768px) {
  .brand img { width: 2.25rem; height: 2.25rem; }
  .brand span { font-size: 1.5rem; }
}
.nav-tag {
  display: none;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--accent); opacity: .5;
}
@media (min-width: 768px) { .nav-tag { display: block; } }
.nav-right { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; }
.nav-link {
  display: flex; align-items: center; gap: .25rem;
  font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); transition: color .2s; white-space: nowrap;
}
.nav-link:hover, .nav-link.on { color: #fff; }
.arrow { width: .75rem; height: .75rem; flex: none; transition: transform .2s; }
.nav-link:hover .arrow, .link-arrow:hover .arrow, .x-card:hover .arrow { transform: translate(.125rem, -.125rem); }
.nav-link.cta { color: #fff; margin-top: .25rem; }
/* Depois do hero a nav compacta: fundo em degradê e links em linha */
.nav::before {
  content: ""; position: absolute; inset: 0 0 -2.5rem 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,.55) 55%, transparent);
  opacity: 0; transition: opacity .4s;
}
.nav { transition: padding .4s var(--ease); }
.nav.scrolled { align-items: center; padding-block: 1.25rem; }
.nav.scrolled::before { opacity: 1; }
.nav.scrolled .nav-tag { display: none; }
.nav.scrolled .nav-link.cta { margin-top: 0; }
@media (min-width: 1024px) {
  .nav.scrolled .nav-right { flex-direction: row; align-items: center; gap: 1.75rem; }
}
@media (max-width: 1023px) {
  .nav.scrolled .nav-link:not(.cta) { display: none; }
}

/* ============ Motion primitives ============ */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(100px) rotateX(15deg) scale(.9);
  filter: blur(10px);
}
html.js [data-reveal].in {
  opacity: 1; transform: none; filter: none;
  transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease);
  transition-delay: var(--d, 0s);
}
html.js [data-reveal="card"].in { transition-duration: 1.6s; }
html.js [data-reveal="fade"] { transform: translateY(24px); }

.te-word { display: inline-block; white-space: nowrap; }
html.js .te-seg { opacity: 0; filter: blur(12px); }
.te-seg { display: inline-block; white-space: pre; }
html.js .te.in .te-seg {
  opacity: 1; filter: none;
  transition: opacity .6s ease-out, filter .6s ease-out;
  transition-delay: var(--d, 0s);
}

/* Logo girando (substitui o DiamondStar da referência) */
.spin {
  display: inline-block; flex: none; width: .8em; height: .8em;
  transform-style: preserve-3d; animation: spinY 3s linear infinite;
}
.spin img { width: 100%; height: 100%; }
@keyframes spinY { from { transform: rotateY(0); } to { transform: rotateY(360deg); } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

/* ============ Tipografia utilitária ============ */
.mono { font-family: var(--font-mono); }
.label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em;
  color: var(--accent); text-transform: uppercase;
}
@media (min-width: 768px) { .label { font-size: 11px; } }
.label.dim { opacity: .5; }
.display {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  line-height: .9; letter-spacing: -0.025em; color: #fff;
  font-size: 12vw;
}
@media (min-width: 768px) { .display { font-size: 8vw; } }
@media (min-width: 1024px) { .display { font-size: 7vw; } }
.display.sm { font-size: 11vw; }
@media (min-width: 768px) { .display.sm { font-size: 6vw; } }
@media (min-width: 1024px) { .display.sm { font-size: 5vw; } }
.fade-r { -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0.15), white 85%); mask-image: linear-gradient(to right, rgba(0,0,0,0.15), white 85%); display: inline-block; text-shadow: 0 0 15px rgba(255,255,255,0.2); }
.fade-l { -webkit-mask-image: linear-gradient(to right, white 15%, rgba(0,0,0,0.15)); mask-image: linear-gradient(to right, white 15%, rgba(0,0,0,0.15)); display: inline-block; text-shadow: 0 0 15px rgba(255,255,255,0.2); }
.glow { text-shadow: 0 0 20px rgba(255,255,255,0.3); }
.h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: 1.875rem; line-height: 1.25; letter-spacing: -0.025em; color: #fff;
}
@media (min-width: 768px) { .h2 { font-size: 3rem; } }
.muted-text { color: rgba(255,255,255,.35); }
.body-text {
  font-size: .875rem; line-height: 1.625; color: var(--accent);
  font-weight: 300; opacity: .6;
}
@media (min-width: 768px) { .body-text { font-size: 1rem; } }

/* ============ Botões ============ */
.btn {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: .5rem;
  border-radius: 2px; background: rgba(0,0,0,0.6);
  -webkit-backdrop-filter: blur(64px); backdrop-filter: blur(64px);
  padding: .75rem 1.5rem; font-size: 12px; font-weight: 500; letter-spacing: .025em;
  color: #fff; border: 1px solid rgba(255,255,255,0.3);
  transition: background .3s;
}
@media (min-width: 768px) { .btn { padding: 1rem 2rem; font-size: 14px; } }
.btn:hover { background: rgba(0,0,0,0.8); }
.btn::before, .btn::after {
  content: ""; position: absolute; width: 1rem; height: 1rem;
  border-color: rgba(255,255,255,0.6); border-style: solid; border-width: 0;
  transition: transform .3s;
}
.btn::before { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.btn::after { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.btn:hover::before, .btn:hover::after { transform: scale(1.1); }
.btn > span { position: relative; z-index: 10; text-transform: uppercase; letter-spacing: .1em; }
.btn.solid { background: #fff; color: #000; border-color: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
.btn.solid::before, .btn.solid::after { border-color: rgba(0,0,0,.5); }
.btn.solid:hover { background: rgba(255,255,255,.85); }
.btn-text {
  font-size: 12px; font-weight: 500; color: #fff; transition: opacity .2s;
}
@media (min-width: 768px) { .btn-text { font-size: 14px; } }
.btn-text:hover { opacity: .7; }
.link-arrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .2em;
  color: #fff; transition: opacity .2s;
}
.link-arrow:hover { opacity: .7; }
.corner-tr, .corner-bl {
  position: absolute; width: 1.25rem; height: 1.25rem; z-index: 40; pointer-events: none;
  border: 0 solid rgba(255,255,255,0.4);
}
.corner-tr { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.corner-bl { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }

/* ============ Glass section ============ */
.glass-sec {
  position: relative;
  background: rgba(0,0,0,0.4);
  -webkit-backdrop-filter: blur(64px); backdrop-filter: blur(64px);
  border-top: 1px solid var(--line);
  padding: 5rem var(--pad-x);
}
.solid-sec { position: relative; background: #000; border-top: 1px solid var(--line); }
.grid-12 { display: grid; grid-template-columns: 1fr; gap: 3rem; }
@media (min-width: 1024px) {
  .grid-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .col-4 { grid-column: span 4; }
  .col-8 { grid-column: span 8; }
}

/* ============ Cards com imagem (HoverCardImage + chip) ============ */
.cards { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) { .cards { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .cards.four { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .cards.four { grid-template-columns: repeat(4, 1fr); } }
.x-card {
  position: relative; display: block; aspect-ratio: 4/5; overflow: hidden;
  border-radius: .375rem; background: rgba(0,0,0,0.1);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.1);
}
.x-card .idx {
  position: absolute; z-index: 40; top: 1rem; left: 1rem;
  font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,0.4);
  text-transform: uppercase; letter-spacing: .1em;
}
.x-card .img-wrap {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.x-card .img-wrap img {
  height: 100%; width: 100%; object-fit: cover; opacity: .6;
  transform: scale(.65); transition: opacity .7s; will-change: transform;
}
.x-card:hover .img-wrap img { opacity: .9; }
.x-card .cap {
  position: absolute; z-index: 10; left: 0; right: 0; bottom: 0; height: 50%;
  background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0.2) 50%, transparent);
  padding: 2rem; display: flex; flex-direction: column; justify-content: flex-end;
  pointer-events: none;
}
.x-card .cap h3 {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 500;
  color: #fff; letter-spacing: -0.025em; line-height: 1.1;
}
.x-card .cap p {
  margin-top: .5rem; font-size: .875rem; line-height: 1.625;
  color: var(--accent); opacity: .7; font-weight: 300;
}
.chip {
  position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none;
  padding: .375rem .75rem; border-radius: 9999px; background: #fff; color: #000;
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .1em;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.5);
  display: flex; align-items: center; gap: .375rem;
  border: 1px solid rgba(0,0,0,0.1); white-space: nowrap;
  opacity: 0; transform: scale(0); transform-origin: top left;
  transition: opacity .2s, transform .25s var(--ease);
}
.chip.on { opacity: 1; transform: scale(1); }
.chip svg { width: .875rem; height: .875rem; stroke-width: 2.5; }

/* ============ Grade modular com bordas ============ */
.mod { display: grid; grid-template-columns: 1fr; }
@media (min-width: 768px) { .mod { grid-template-columns: repeat(4, 1fr); } }
.mod + .mod, .mod.bb { border-top: 1px solid var(--line); }
.cell { padding: 2rem; border-bottom: 1px solid var(--line); }
@media (min-width: 768px) {
  .cell { border-bottom: 0; }
  .cell + .cell { border-left: 1px solid var(--line); }
  .span-2 { grid-column: span 2; }
  .span-3 { grid-column: span 3; }
}
@media (min-width: 1024px) { .cell.lg { padding: 3rem; } }
.cell-logo { min-height: 200px; display: flex; flex-direction: column; justify-content: space-between; }
.cell-logo .wm {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--font-logo); font-size: 1.25rem; font-weight: 700;
  letter-spacing: -0.05em; color: #fff; opacity: .8;
}
.cell-logo .wm img { width: 1.5rem; height: 1.5rem; }
.tiny {
  font-family: var(--font-mono); font-size: 9px; text-transform: uppercase;
  letter-spacing: .3em; color: #fff; opacity: .4;
}
.cell-label {
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: .4em; color: #fff; opacity: .3; margin-bottom: 1rem;
}
.pulse-box {
  width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center;
  border-radius: 2px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.05);
}
.pulse-box i { width: .25rem; height: .25rem; border-radius: 9999px; background: #fff; animation: pulse 2s ease-in-out infinite; }

/* ============ Marquee ============ */
.marquee {
  width: 100%; overflow: hidden; border-top: 1px solid var(--line);
  padding: 3rem 0;
}
@media (min-width: 768px) { .marquee { padding: 5rem 0; } }
.marquee-label { padding: 0 var(--pad-x); margin-bottom: 2rem; }
.marquee-track {
  display: inline-flex; white-space: nowrap;
  animation: marquee 40s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }
.marquee-track span {
  margin: 0 2rem; font-size: 32px; font-weight: 700; letter-spacing: -0.05em;
  color: rgba(255,255,255,0.2); transition: all .3s; display: inline-block;
}
@media (min-width: 768px) { .marquee-track span { margin: 0 4rem; font-size: 48px; } }
.marquee-track span:hover { transform: scale(1.1); color: #fff; }
.marquee-track.logos { align-items: center; }
.marquee-track.logos img {
  height: 2rem; width: auto; margin: 0 2.5rem; flex: none;
  opacity: .35; transition: opacity .3s, transform .3s;
}
.marquee-track.logos img.sq { height: 3rem; }
@media (min-width: 768px) {
  .marquee-track.logos img { height: 2.75rem; margin: 0 3.5rem; }
  .marquee-track.logos img.sq { height: 4rem; }
}
.marquee-track.logos img:hover { opacity: 1; transform: scale(1.08); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============ Faixa de marcas (rodapé) ============ */
.brand-belt {
  position: relative; display: flex; flex-direction: column; gap: 2.25rem;
  margin: 0 calc(var(--pad-x) * -1); padding: 3.5rem 0;
  border-bottom: 1px solid var(--line); overflow: hidden;
}
.brand-belt .label { padding: 0 var(--pad-x); margin-bottom: -.5rem; }
.belt-row {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.belt-track { display: flex; align-items: center; width: max-content; will-change: transform; }
.belt-track img {
  flex: none; height: 1.75rem; width: auto; margin: 0 2.25rem;
  opacity: .35; transition: opacity .3s, transform .3s;
}
.belt-track img.sq { height: 2.75rem; }
@media (min-width: 768px) {
  .brand-belt { gap: 3rem; padding: 4.5rem 0; }
  .belt-track img { height: 2.5rem; margin: 0 3.5rem; }
  .belt-track img.sq { height: 3.75rem; }
}
.belt-track img:hover { opacity: 1; transform: scale(1.08); }
/* Sem animação: uma linha só, quebrando em grade */
.brand-belt.is-static .belt-row { -webkit-mask-image: none; mask-image: none; padding: 0 var(--pad-x); }
.brand-belt.is-static .belt-row + .belt-row { display: none; }
.brand-belt.is-static .belt-track { width: auto; flex-wrap: wrap; justify-content: center; row-gap: 2rem; }

/* ============ Footer ============ */
.footer {
  position: relative; z-index: 10; width: 100%; background: #000;
  padding: 5rem var(--pad-x) 3rem;
}
@media (min-width: 768px) { .footer { padding-bottom: 4rem; } }
.footer .blur-top {
  position: absolute; left: 0; right: 0; top: -10rem; height: 10rem; z-index: -1;
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 40%, rgba(0,0,0,0.8) 60%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 40%, rgba(0,0,0,0.8) 60%, rgba(0,0,0,0) 100%);
  pointer-events: none;
}
.footer-top {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 2rem;
  padding-bottom: 4rem; border-bottom: 1px solid var(--line);
}
.footer-cols {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1.5rem; padding: 3rem 0;
}
@media (min-width: 768px) { .footer-cols { grid-template-columns: repeat(4, 1fr); } }
.footer-cols h4 { margin-bottom: 1rem; }
.footer-cols ul { list-style: none; display: flex; flex-direction: column; gap: .6rem; }
.footer-cols a, .footer-cols address {
  font-style: normal; font-size: .875rem; font-weight: 300; color: var(--accent); opacity: .7;
  transition: opacity .2s;
}
.footer-cols a:hover { opacity: 1; }
.footer-base {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  padding-top: 2rem; border-top: 1px solid var(--line);
}

/* ============ Formulário ============ */
.field { position: relative; }
.field input {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.15);
  padding: 1rem 0; color: #fff; font: 300 1rem var(--font-sans); outline: none;
  transition: border-color .3s; border-radius: 0;
}
.field input::placeholder { color: rgba(255,255,255,.35); font-family: var(--font-mono); font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; }
.field input:focus { border-color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .spin, .marquee-track, .pulse-box i { animation: none; }
}