/*
  Setae — STATIC landing (no animations)
  - Background is fixed viewport layer (#bgFixed) and never moves
  - Body does not scroll; .scrollRoot is the only scroller
*/

:root{
  --bg:#000;
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.64);

  --teal:#00e6c5;
  --blue:#29c2ff;
  --mag:#d85ce0;

  --stroke:rgba(255,255,255,.12);
  --r:999px;
  --max: 1020px;

  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: var(--sans);
  color: var(--text);
  background: #000;
  overflow: hidden; /* critical: body never scrolls */
}

a{ color:inherit; text-decoration:none; }

/* Kill all motion */
*, *::before, *::after{ animation:none !important; transition:none !important; }
html{ scroll-behavior: auto !important; }

/* Fixed background layer (never scrolls) */
#bgFixed{
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(760px 560px at 22% 24%, rgba(0,230,197,.18), transparent 66%),
    radial-gradient(820px 600px at 78% 22%, rgba(216,92,224,.15), transparent 66%),
    radial-gradient(900px 700px at 55% 84%, rgba(41,194,255,.14), transparent 70%),
    radial-gradient(1200px 900px at 50% 40%, rgba(255,255,255,.06), transparent 70%),
    #000;
  background-repeat:no-repeat;
  background-size: cover;
  transform: translateZ(0);
}

/* The ONLY scroll container */
.scrollRoot{
  height: 100vh;
  height: 100svh; /* stable viewport on mobile */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: none;
}

/* Scroll snap stays on the scroller */
.snap{ scroll-snap-type: y proximity; }
.snap__item{ scroll-snap-align: start; }

/* Header */
.top{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: rgba(0,0,0,.30);
  backdrop-filter: none;
}
.top__inner{
  width: min(var(--max), calc(100% - 48px));
  margin: 0 auto;
  padding: 16px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}
.top__brand{ display:flex; align-items:center; gap: 10px; }
.mark{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background:
    radial-gradient(circle at 30% 30%, rgba(0,230,197,.95), transparent 58%),
    radial-gradient(circle at 70% 70%, rgba(216,92,224,.78), transparent 58%),
    #000;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 0 40px rgba(255,255,255,.14);
}
.name{ font-weight: 720; letter-spacing: -0.01em; }
.nav{
  display:flex; align-items:center; gap: 14px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .20em;
}
.nav__link{ color: rgba(255,255,255,.62); }
.nav__link:hover{ color: rgba(255,255,255,.86); }
.nav__cta{ color: rgba(255,255,255,.86); }
.nav__cta:hover{ color: rgba(255,255,255,.98); }
@media (max-width: 720px){
  .nav{ gap: 10px; letter-spacing: .16em; }
}

/* Sections */
.screen{
  min-height: 90vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 86px 0 66px;
}
.screen--hero{ min-height: 100vh; padding-top: 128px; }
.screen--cta{ min-height: 90vh; padding-bottom: 90px; }

.center{
  width: min(var(--max), calc(100% - 48px));
  margin: 0 auto;
  text-align:center;
  position: relative;
}

/* Typography */
.mono{ font-family: var(--mono); }
.kicker{
  font-size: 12px;
  letter-spacing: .26em;
  color: rgba(255,255,255,.62);
}
.title{
  margin: 18px 0 12px;
  font-size: clamp(52px, 6.0vw, 86px);
  line-height: 0.98;
  letter-spacing: -0.04em;
  text-shadow: 0 0 56px rgba(255,255,255,.16);
}
.sub{
  margin: 0 auto 18px;
  max-width: 62ch;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.68;
}
.fine{
  margin-top: 14px;
  font-size: 11px;
  letter-spacing: .20em;
  color: rgba(255,255,255,.44);
}
.h2{
  margin: 0 0 14px;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 680;
  letter-spacing: -0.01em;
}
.mini{
  margin: 18px auto 0;
  max-width: 72ch;
  font-size: 18px;
  line-height: 1.65;
}

/* Buttons (static) */
.row{ display:flex; gap: 10px; justify-content:center; flex-wrap: wrap; }
.btn{
  border-radius: var(--r);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
  padding: 12px 16px;
  font-weight: 650;
  font-size: 13px;
  cursor:pointer;
  user-select:none;
  position: relative;
  overflow:hidden;
}
.btn--ghost:hover{ border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.06); }
.btn--primary{ border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.05); }
.btn--primary::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(260px 160px at 22% 32%, rgba(0,230,197,.26), transparent 66%),
    radial-gradient(260px 160px at 78% 70%, rgba(216,92,224,.22), transparent 66%),
    radial-gradient(300px 180px at 60% 30%, rgba(41,194,255,.18), transparent 72%);
  opacity: .9;
  pointer-events:none;
}

/* Disable roll hover movement completely */
.roll__viewport{ height: 1.85em; overflow:hidden; display:block; position: relative; z-index: 1; }
.roll__inner{ display:block; transform: none !important; }
.roll__text{
  display:block;
  font-family: var(--mono);
  letter-spacing: .20em;
  font-weight: 650;
  line-height: 1.85em;
  white-space: nowrap;
}

/* Lists */
.list{
  margin: 18px auto 0;
  display:flex;
  flex-direction:column;
  gap: 12px;
  max-width: 760px;
}
.line{
  display:flex;
  gap: 14px;
  align-items:center;
  justify-content:center;
  color: rgba(255,255,255,.86);
  font-size: 15px;
}
.tag{
  font-size: 12px;
  letter-spacing: .20em;
  color: rgba(255,255,255,.56);
  min-width: 46px;
  text-align:right;
}

/* 3 columns minimal */
.tri{
  margin: 18px auto 0;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 980px;
}
.tri__k{
  font-size: 18px;
  letter-spacing: .20em;
  color: rgba(255,255,255,.58);
  margin-bottom: 10px;
}
.tri__t{ color: rgba(255,255,255,.86); font-size: 14px; line-height: 1.4; }

@media (max-width: 900px){
  .tri{ grid-template-columns: 1fr; gap: 16px; }
  .line{ flex-direction: column; gap: 6px; }
  .tag{ min-width: auto; text-align:center; }
}

/* Form */
.form{
  margin: 16px auto 0;
  display:flex;
  gap: 10px;
  justify-content:center;
  flex-wrap: wrap;
  max-width: 820px;
}
.input{
  flex: 1 1 260px;
  padding: 12px 14px;
  border-radius: var(--r);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
  outline:none;
  font-size: 14px;
}
.input::placeholder{ color: rgba(255,255,255,.42); }

.footer{
  margin-top: 18px;
  color: rgba(255,255,255,.44);
  font-size: 12px;
  letter-spacing: .10em;
}

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

/* Stack layout (where + early) */
.stack{
  display:flex;
  flex-direction:column;
  gap: 90px;
  align-items:center;
}
.stack__block{ width: 100%; }
.stack__divider{
  width: min(760px, 92%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
  opacity: .9;
}

.msg{
  width: 100%;
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  font-size: 13px;
  color: rgba(255,255,255,.70);
}
.msg--ok{ border-color: rgba(0,230,197,.22); color: rgba(0,230,197,.86); }
.msg--bad{ border-color: rgba(219,44,44,.22); color: rgba(219,44,44,.86); }