:root{
  --bg:#000000;
  --text:#F2F2F0;
  --text-sec:#B9B9B5;
  --text-muted:#7D7D7A;
  --accent:#FE0000;
  --accent-light:#FF4747;
  --accent-deep:#C10000;
  --line:rgba(255,255,255,0.1);
  --display:'Saira',Helvetica,Arial,sans-serif;
  --body:'Barlow',Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  background:var(--bg);color:var(--text);font-family:var(--body);
  min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;
  position:relative;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ambient background: soft orange glow + faint moving trajectory line + grain */
.bg-glow{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60% 55% at 50% 38%, rgba(254,0,0,0.14) 0%, transparent 70%),
    radial-gradient(40% 40% at 85% 85%, rgba(254,0,0,0.07) 0%, transparent 70%);
}
.bg-grain{
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.bg-trail{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5}
.bg-trail svg{width:100%;height:100%}
.bg-trail path{
  fill:none;stroke:var(--accent);stroke-width:1.5;
  stroke-dasharray:6 14;
  animation:trail-move 5s linear infinite;
}
@keyframes trail-move{to{stroke-dashoffset:-160}}

main{
  position:relative;z-index:2;
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:64px 24px 40px;
}

.logo{height:170px;width:auto;margin-bottom:8px;opacity:0;transform:translateY(14px);animation:rise .8s cubic-bezier(.2,.7,.2,1) .1s forwards}

.eyebrow{
  font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:4px;
  color:var(--accent);text-transform:uppercase;margin:8px 0 22px;
  opacity:0;transform:translateY(12px);animation:rise .8s cubic-bezier(.2,.7,.2,1) .25s forwards;
}

h1{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(32px,6vw,58px);line-height:1.06;margin:0 0 22px;max-width:15ch;
  opacity:0;transform:translateY(16px);animation:rise .8s cubic-bezier(.2,.7,.2,1) .38s forwards;
}
h1 .accent{color:var(--accent)}

p.lede{
  font-size:16.5px;line-height:1.7;color:var(--text-sec);max-width:52ch;margin:0 0 40px;
  opacity:0;transform:translateY(14px);animation:rise .8s cubic-bezier(.2,.7,.2,1) .5s forwards;
}

@keyframes rise{to{opacity:1;transform:translateY(0)}}

form{
  display:flex;gap:12px;flex-wrap:wrap;justify-content:center;width:100%;max-width:440px;
  opacity:0;transform:translateY(14px);animation:rise .8s cubic-bezier(.2,.7,.2,1) .62s forwards;
}
.field-row{display:flex;gap:0;width:100%;border:1px solid rgba(255,255,255,0.18);background:rgba(255,255,255,0.03)}
.field-row input{
  flex:1;background:transparent;border:0;color:var(--text);
  font-family:var(--body);font-size:14.5px;padding:15px 16px;min-width:0;
}
.field-row input::placeholder{color:var(--text-muted)}
.field-row input:focus{outline:none}
.field-row button{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,var(--accent-light) 0%,var(--accent) 45%,var(--accent-deep) 100%);
  color:#fff;border:0;cursor:pointer;
  font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:1.2px;
  text-transform:uppercase;padding:0 22px;white-space:nowrap;
  transition:filter .2s ease;
}
.field-row button:hover{filter:saturate(1.15) brightness(1.05)}
.form-status{
  width:100%;font-size:13px;min-height:18px;margin-top:2px;
}
.form-status[data-state="success"]{color:#8fe3a0}
.form-status[data-state="error"]{color:#ff8f6b}
.form-status[data-state="pending"]{color:var(--text-muted)}

.socials{
  display:flex;gap:14px;margin-top:44px;
  opacity:0;transform:translateY(12px);animation:rise .8s cubic-bezier(.2,.7,.2,1) .74s forwards;
}
.socials a{
  display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
  border:1px solid rgba(255,255,255,0.16);color:var(--text-sec);
  font-family:var(--display);font-size:12px;transition:all .25s ease;
}
.socials a:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-3px)}

footer{
  position:relative;z-index:2;
  text-align:center;padding:22px 24px 28px;font-size:12px;color:var(--text-muted);
  border-top:1px solid var(--line);
}
footer a{color:var(--text-muted);transition:color .2s ease}
footer a:hover{color:var(--accent)}

@media (max-width:480px){
  .logo{height:120px}
  .field-row{flex-direction:column}
  .field-row button{padding:14px 16px;justify-content:center}
}