/*
  Setae — FlyAtlas-inspired minimal dark landing (v3)
  Updates requested:
  - remove background "setae" word
  - richer FlyAtlas-like motion & palette
  - make sections feel more "full" (bigger hero + a bit more content)
*/

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

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

  --stroke:rgba(255,255,255,.12);
  --stroke2:rgba(255,255,255,.18);

  --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;

  /* parallax offsets (set by JS) */
  --tx: 0px;
  --ty: 0px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  overflow-x:hidden;
}

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

/* Background stack */
.bg{
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow:hidden;
  background: #000;
}

#bgCanvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  opacity: .98;
}

/* Aurora: animated conic-like glow + radial blobs */
.bg__aurora{
  position:absolute;
  inset:-40%;
  filter: blur(62px);
  opacity:.92;
  mix-blend-mode: screen;
  transform: translate3d(var(--tx), var(--ty), 0) scale(1.10);
  background:
    radial-gradient(640px 520px at 22% 28%, rgba(0,230,197,.16), transparent 70%),
    radial-gradient(760px 560px at 78% 22%, rgba(216,92,224,.13), transparent 70%),
    radial-gradient(820px 600px at 50% 92%, rgba(41,194,255,.11), transparent 72%),
    conic-gradient(from 180deg at 50% 45%,
      rgba(0,230,197,.10),
      rgba(41,194,255,.08),
      rgba(216,92,224,.09),
      rgba(0,230,197,.10)
    );
  animation: aur 9s ease-in-out infinite;
}
@keyframes aur{
  0%{ filter: blur(60px); opacity:.86; transform: translate3d(calc(var(--tx) * 1.0), calc(var(--ty) * 1.0), 0) scale(1.08) rotate(-1deg); }
  50%{ filter: blur(66px); opacity:.98; transform: translate3d(calc(var(--tx) * 1.1), calc(var(--ty) * 1.1), 0) scale(1.12) rotate(1deg); }
  100%{ filter: blur(60px); opacity:.86; transform: translate3d(calc(var(--tx) * 1.0), calc(var(--ty) * 1.0), 0) scale(1.08) rotate(-1deg); }
}

/* Streaks: animated diagonal neon beams */
.bg__streaks{
  position:absolute;
  inset:-20%;
  opacity:.42;
  mix-blend-mode: screen;
  background:
    linear-gradient(110deg, transparent 0 35%, rgba(0,230,197,.14) 45%, transparent 55%),
    linear-gradient(110deg, transparent 0 46%, rgba(216,92,224,.11) 52%, transparent 58%),
    linear-gradient(110deg, transparent 0 56%, rgba(41,194,255,.10) 60%, transparent 66%);
  filter: blur(10px);
  animation: streak 7.5s linear infinite;
  transform: translate3d(calc(var(--tx) * .6), calc(var(--ty) * .6), 0);
}
@keyframes streak{
  from{ background-position: -900px 0, -600px 0, -300px 0; }
  to{ background-position: 900px 0, 600px 0, 300px 0; }
}

/* Concentric rings */
.bg__rings{
  position:absolute;
  inset:-20%;
  opacity:.30;
  mix-blend-mode: screen;
  background:
    radial-gradient(circle at 50% 45%,
      rgba(255,255,255,.12) 0 1px,
      transparent 1px 64px,
      rgba(255,255,255,.08) 64px 65px,
      transparent 65px 132px,
      rgba(255,255,255,.06) 132px 133px,
      transparent 133px 220px,
      rgba(255,255,255,.05) 220px 221px,
      transparent 221px 100%);
  mask-image: radial-gradient(720px 560px at 50% 45%, rgba(0,0,0,1), transparent 74%);
  animation: spin 36s linear infinite;
  transform: translate3d(calc(var(--tx) * .35), calc(var(--ty) * .35), 0);
}
@keyframes spin{
  from{ transform: translate3d(calc(var(--tx) * .35), calc(var(--ty) * .35), 0) rotate(0deg); }
  to{ transform: translate3d(calc(var(--tx) * .35), calc(var(--ty) * .35), 0) rotate(360deg); }
}

/* Soft dot grid */
.bg__gridSoft{
  position:absolute;
  inset:0;
  opacity:.17;
  background:
    radial-gradient(circle, rgba(255,255,255,.12) 0 1px, transparent 1px) 0 0 / 34px 34px;
  mask-image: radial-gradient(820px 620px at 50% 40%, rgba(0,0,0,1), transparent 72%);
  transform: translate3d(calc(var(--tx) * .55), calc(var(--ty) * .55), 0);
}

/* Center halo glow */
.bg__halo{
  position:absolute;
  inset:0;
  background:
    radial-gradient(520px 340px at 50% 42%, rgba(255,255,255,.18), transparent 64%),
    radial-gradient(720px 520px at 50% 42%, rgba(255,255,255,.06), transparent 76%);
  filter: blur(7px);
  opacity: .95;
}

/* Slow scan line */
.bg__scan{
  position:absolute;
  left:-30%;
  right:-30%;
  top:-40%;
  height: 60%;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.05), transparent);
  filter: blur(18px);
  opacity: .55;
  animation: scan 9.5s ease-in-out infinite;
  transform: translate3d(0,0,0);
}
@keyframes scan{
  0%{ transform: translateY(-40%); opacity:.20; }
  40%{ opacity:.50; }
  100%{ transform: translateY(190%); opacity:.16; }
}

/* Grain */
.bg__grain{
  position:absolute;
  inset:0;
  opacity:.22;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  background-size: 260px 260px;
}

/* Vignette */
.bg__vignette{
  position:absolute;
  inset:0;
  background: radial-gradient(980px 620px at 50% 34%, rgba(0,0,0,0.00), rgba(0,0,0,.86));
}

/* Header */
.top{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: rgba(0,0,0,.16);
  backdrop-filter: blur(10px);
}
.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,.20);
}
.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; }
}

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

/* Sections (denser) */
.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,.18);
}
.sub{
  margin: 0 auto 18px;
  max-width: 62ch;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.68;
}
.micro{
  margin: 0 auto 22px;
  font-size: 12px;
  letter-spacing: .22em;
  color: rgba(255,255,255,.52);
}
.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 + rolling */
.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;
  transition: border-color .18s ease, background .18s ease, transform .08s ease;
  position: relative;
  overflow:hidden;
}
.btn:active{ transform: translateY(1px); }
.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;
}
.btn--primary:hover{ border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.06); }

.roll__viewport{ height: 1.85em; overflow:hidden; display:block; position: relative; z-index: 1; }
.roll__inner{ display:block; transition: transform .22s ease; }
.roll__text{
  display:block;
  font-family: var(--mono);
  letter-spacing: .20em;
  font-weight: 650;
  line-height: 1.85em;
  white-space: nowrap;
  text-shadow: 0 1.85em 0 currentColor;
}
.roll:hover .roll__inner{ transform: translateY(-1.85em); }

/* 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; }
.tri__s{ margin-top: 8px; color: rgba(255,255,255,.56); font-size: 12px; 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; }
}

/* Dot scroll */
.dotScroll{
  display:inline-flex;
  margin-top: 22px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  align-items:center;
  justify-content:center;
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
}
.dotScroll__dot{
  width: 10px;
  height: 10px;
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(0,230,197,.9), rgba(216,92,224,.9), rgba(41,194,255,.9));
  box-shadow: 0 0 0 10px rgba(0,230,197,.08);
  animation: bob 1.3s ease-in-out infinite;
}
@keyframes bob{
  0%,100%{ transform: translateY(-2px); }
  50%{ transform: translateY(6px); }
}

/* 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); }

.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); }

.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;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .bg__aurora{ animation: none; }
  .bg__rings{ animation:none; }
  .bg__streaks{ animation:none; }
  .bg__scan{ animation:none; }
  .dotScroll__dot{ animation:none; }
  .roll:hover .roll__inner{ transform: none; }
}

.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;
}

/* Mobile performance tuning (reduces strobing / flicker on phones) */
@media (max-width: 820px){
  /* The scan line can look like flicker on OLED / low persistence panels */
  .bg__scan{ display:none; }

  /* Reduce high-contrast moving streaks */
  .bg__streaks{ opacity: .22; filter: blur(14px); }

  /* Slow down aurora motion a bit */
  .bg__aurora{ animation-duration: 14s; opacity: .86; }

  /* Reduce texture intensity */
  .bg__gridSoft{ opacity: .12; }
  .bg__rings{ opacity: .24; }

  /* Optional: slightly dim overall background layers on mobile */
  #bgCanvas{ opacity: .92; }
}