:root{
  --ink:#e6e6e6; --ink-weak:#bdbdbd;
  --bg:#0b0b0b;
}
html,body{min-height:100vh;color:#e6e6e6;background:#0b0b0b}
body{min-height:100vh;color:#e6e6e6;background:#0b0b0b}

/* full-viewport animated gradient, grayscale, very smooth */
.bg-anim{
  position:fixed; inset:-20%; z-index:0; pointer-events:none;
  background:
    radial-gradient(55rem 40rem at 18% 22%, rgba(255,255,255,.08), transparent 65%),
    radial-gradient(70rem 48rem at 78% 28%, rgba(255,255,255,.06), transparent 68%),
    radial-gradient(80rem 54rem at 26% 82%, rgba(255,255,255,.05), transparent 70%);
  filter: blur(64px);
  opacity:.50;
  will-change: transform;
  animation: fieldDrift 48s ease-in-out infinite alternate;
}
@keyframes bgShift{
  0%   { background-position: 0%   50% }
  50%  { background-position: 100% 50% }
  100% { background-position: 0%   50% }
}

/* keep UI styles */
.section{opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s ease}
.section.reveal{opacity:1; transform:none}
.card{
  background: rgba(18,18,18,.75);
  backdrop-filter: blur(6px);
  border:1px solid rgba(255,255,255,.06);
  border-radius: 1rem;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease;
}
.card:hover{ transform:translateY(-2px); box-shadow:0 12px 34px rgba(0,0,0,.35); background:rgba(22,22,22,.82); border-color:rgba(255,255,255,.1)}
.badge{display:inline-flex;align-items:center;gap:.5rem;font-size:.8rem;color:var(--ink-weak)}
.badge .dot{width:.5rem;height:.5rem;border-radius:9999px;background:#34d399}
.card-link{display:block;color:inherit;text-decoration:none}
.card-link:focus-visible{outline:2px solid rgba(136,136,136,.45); outline-offset:3px; border-radius:1rem}
.btn{border-radius:.75rem;padding:.75rem 1.25rem; font-weight:600; transition:transform .12s ease, box-shadow .12s ease}
.btn-ghost{background:rgba(255,255,255,.06)}
.btn-ghost:hover{background:rgba(255,255,255,.12); transform:translateY(-1px)}
.btn-solid{background:#fff; color:#000}

/* header logo */
.sn-logo{height:4.6rem;width:auto;display:inline-block;vertical-align:middle;position:relative;top:.06em}
@media (min-width:768px){ .sn-logo{height:5.8rem; top:.04em} }

/* kill old layers if present */
.wavefield,.logo-fog,.nebula,.movelayer,.bgfx,.fx-layer{display:none!important}


/* noise dither overlay */
.bg-noise{position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.05; mix-blend-mode:overlay}
.bg-noise::before{
  content:""; position:absolute; inset:-10%;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/></filter>\
<rect width='100%' height='100%' filter='url(#n)' opacity='0.8'/></svg>");
  background-size:180px 180px;
  animation: noiseShift 2.2s steps(6) infinite;
  filter:contrast(120%);
}
@keyframes noiseShift{to{transform:translate3d(-24px,16px,0)}}

/* full-viewport video background */
.bg-video{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  width:100%; height:100%; object-fit:cover; object-position:center center;
  filter:brightness(.78) blur(10px) contrast(1.05);
}
/* respect data/motion prefs */
@media (prefers-reduced-motion: reduce){ .bg-video{ display:none } }
@media (prefers-reduced-data: reduce){ .bg-video{ display:none } }

/* logo fine-tune */
.sn-logo{height:4.0rem;width:auto;display:inline-block;vertical-align:middle;position:relative;top:.16em}
@media (min-width:768px){ .sn-logo{height:5.0rem; top:.14em} }

/* remove old layers if any */
.wavefield,.logo-fog,.nebula,.movelayer,.bgfx,.fx-layer,.bg-anim,.bg-noise{display:none!important}

/* --- Readability halo for text on moving video --- */
:root{ --ink-shadow: 0 1px 1px rgba(0,0,0,.45), 0 6px 20px rgba(0,0,0,.35) }
header.section h1,
header.section p,
header.section a,
header.section .badge{ text-shadow: var(--ink-shadow); -webkit-text-stroke:.25px rgba(0,0,0,.30) }
header.section h1{ -webkit-text-stroke:.35px rgba(0,0,0,.28) }

/* --- Mobile: place auth/profile buttons under title, tidy spacing --- */
@media (max-width:640px){
  header.section{ flex-direction:column; align-items:flex-start }
  header.section > div:last-child{
    order:2; width:100%;
    display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.5rem
  }
  header.section > div:last-child .btn{ flex:1 1 calc(50% - .5rem); padding:.6rem .8rem }
  header.section .mt-4.text-neutral-300{ margin-top:.75rem }
}

/* snx-ui-tweaks */
:root{ --snx-emerald:#34d399; --snx-emerald-2:#22c55e; --snx-ink:#e9edf1 }

header.section .badge span{ color: var(--snx-ink) }
header.section .badge a{
  color:#dffcef; background:rgba(52,211,153,.18);
  border:1px solid rgba(52,211,153,.35);
}
header.section .badge a:hover{ background:rgba(34,197,94,.22); border-color:rgba(34,197,94,.45) }

/* slightly brighter header copy on video */
header.section p{ color: var(--snx-ink) }
header.section a{ color:#c5ffe8 }

/* right-column auth pills */
.auth-pills .btn{
  background:rgba(255,255,255,.08); color:#f3f5f7;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 6px 20px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
}
.auth-pills .btn:hover{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.22);
}

/* details / summary "View more" */
details summary{
  list-style:none; cursor:pointer; user-select:none;
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.4rem .7rem; border-radius:.6rem;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:#e8eaee;
}
details summary::-webkit-details-marker{ display:none }
details[open] summary{ background:rgba(255,255,255,.10) }
details summary:after{
  content:"▸"; transform:translateY(.5px);
  opacity:.85; font-size:.85em;
}
details[open] summary:after{ content:"▾" }

/* --- elevated buttons (global, like auth pills) --- */
.btn-elev{
  background:rgba(255,255,255,.08);
  color:#f3f5f7;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 6px 20px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
}
.btn-elev:hover{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.22);
  transform:translateY(-1px);
}

/* ui-ext */
.btn.btn-elev{ @apply; } /* no-op for Tailwind CDN; keep class hook only */