:root{
  --bg1:#0a0b14; --bg2:#0f1230;
  --glow1:#a855f7; --glow2:#22d3ee;
  --text:#e5e7eb; --muted:#94a3b8;
  --card:#111426; --card2:#0d1022;
  --accent:#27e0ff;
  --radius:18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans",
  "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
}

body.gradient-bg {
  min-height: 100vh;
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(168,85,247,0.18), transparent 60%),
    radial-gradient(900px 500px at 90% 30%, rgba(34,211,238,0.18), transparent 55%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 24px 40px;
}

.container{
  width:100%;
  max-width:760px;
  background: linear-gradient(180deg, var(--card), var(--card2));
  border:1px solid #1f2340;
  border-radius:var(--radius);
  padding:36px 36px 32px;
  box-shadow:0 10px 40px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.02);
}

.terms-container{
  width:100%;
  max-width:760px;
  background: linear-gradient(180deg, var(--card), var(--card2));
  border:1px solid #1f2340;
  border-radius:var(--radius);
  padding:36px 36px 32px;
  box-shadow:0 10px 40px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.02);
}

.container h1{
  margin:0 0 18px;
  text-align:center;
  font-size:clamp(32px, 5vw, 48px);
}

.container h2{
  margin:32px 0 14px;
  font-size:clamp(22px, 4vw, 28px);
  color:#dbeafe;
  transition:filter .3s ease;
}

.container h2:hover{
  filter:drop-shadow(0 0 10px rgba(39,224,255,0.35));
}

.container p,
.container small,
.signup-text{
  margin:0 0 18px;
  line-height:1.6;
  color:var(--text);
}

.container p strong{color:var(--text)}

.container a{
  color:#9ae6ff;
  text-decoration:none;
}

.container a:hover{text-decoration:underline}

.neon{
  background: linear-gradient(90deg, #00eaff 0%, #22c8ff 55%, #ff3bb0 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  font-weight:800;
  filter:
    drop-shadow(0 0 8px rgba(0,234,255,0.45))
    drop-shadow(0 0 14px rgba(255,59,176,0.25));
}

.gradient-text{
  background: linear-gradient(90deg, #00eaff 0%, #22c8ff 55%, #ff3bb0 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  font-weight:800;
  text-align:center;
  filter:
    drop-shadow(0 0 8px rgba(0,234,255,0.45))
    drop-shadow(0 0 14px rgba(255,59,176,0.25));
  margin:0 0 18px;
}

@media (max-width:600px){
  .container{padding:28px 24px 24px}
  .container h2{margin-top:26px}
}

/* LOGO SIZING + SPACING */

/* a11y helper */
.ax-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* one-line layout */
#ax-form{display:flex;align-items:center;justify-content:center;gap:12px;max-width:760px;margin:0 auto}

/* input: dark glass + magenta rim */
#ax-email{
  flex:1;min-width:420px;height:46px;padding:0 14px;border-radius:12px;
  background:rgba(8,10,16,.50);
  border:1px solid rgba(255,59,176,.55);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02),0 0 0 3px rgba(255,59,176,.12);
  color:var(--text);outline:none
}
#ax-email::placeholder{color:rgba(200,215,235,.65)}
#ax-email:focus{border-color:#23e0ff;box-shadow:0 0 0 3px rgba(35,224,255,.22)}

/* CTA: neon gradient pill */
#ax-cta{
  height:46px;padding:0 20px;border-radius:12px;border:0;cursor:pointer;font-weight:700;color:#0b0f14;
  background:linear-gradient(90deg,#3BE0FF 0%,#7A5CFF 50%,#FF2D95 100%);
  box-shadow:0 6px 18px rgba(255,45,149,.18);white-space:nowrap
}
#ax-cta:hover{filter:brightness(1.06)}
#ax-cta:active{transform:translateY(1px)}

/* mobile */
@media (max-width:540px){
  #ax-form{flex-direction:column}
  #ax-email,#ax-cta{width:100%}
  #ax-email{min-width:0}
}

/* === ARCADE X LOGO === */
#ax-mark {
  display: block;
  margin: 0 auto 14px;
  width: clamp(260px, 30vw, 410px);
  height: auto;
  filter:
    drop-shadow(0 0 14px rgba(39,224,255,0.25))
    drop-shadow(0 0 28px rgba(255,59,176,0.25));
  transition: transform 0.3s ease, filter 0.3s ease;
}

#ax-mark:hover {
  transform: scale(1.05);
  filter:
    drop-shadow(0 0 22px rgba(39,224,255,0.4))
    drop-shadow(0 0 32px rgba(255,59,176,0.4));
}

/* === HEADLINE SPLIT STYLING === */
.headline {
  text-align: center;
  font-weight: 800;
  line-height: 1.2;
  margin: 20px 0 12px;
  font-size: clamp(28px, 4vw, 42px);
}

.headline .line1 {
  color: #38bdf8; /* Cyan brand glow */
  text-shadow: 0 0 10px rgba(34, 211, 238, 0.4);
}

.headline .line2 {
  background: linear-gradient(90deg, #00eaff 0%, #22c8ff 55%, #ff3bb0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 0 8px rgba(0,234,255,0.45))
    drop-shadow(0 0 14px rgba(255,59,176,0.25));
}

/* === FOOTER === */
.ax-footer {
  text-align: center;
  margin-top: 6px;
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.6;
}

.ax-footer .status {
  color: #38bdf8;
  font-weight: 600;
  text-shadow: 0 0 8px rgba(34, 211, 238, 0.45);
  margin-bottom: 6px;
}

.ax-footer .links {
  color: var(--muted);
}

.ax-footer .links a {
  color: #9ae6ff;
  text-decoration: none;
  margin: 0 6px;
  background: linear-gradient(90deg, #00eaff 0%, #22c8ff 55%, #ff3bb0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 6px rgba(0,234,255,0.4))
          drop-shadow(0 0 10px rgba(255,59,176,0.3));
  transition: opacity 0.2s ease;
}

.ax-footer .links a:hover {
  opacity: 0.85;
}

.ax-footer .brand {
  font-weight: 700;
  background: linear-gradient(90deg, #00eaff 0%, #22c8ff 55%, #ff3bb0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 8px rgba(0,234,255,0.45))
          drop-shadow(0 0 14px rgba(255,59,176,0.25));
}

/* === FOOTER YEAR STYLE === */
.ax-footer .links span {
  background: linear-gradient(90deg, #00eaff 0%, #22c8ff 55%, #ff3bb0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
  filter:
    drop-shadow(0 0 8px rgba(0,234,255,0.45))
    drop-shadow(0 0 14px rgba(255,59,176,0.25));
}

/* === SUBCOPY (tight, two lines, on-brand) === */
.subcopy{
  max-width: 860px;
  margin: 10px auto 12px;
  text-align: center;
  line-height: 1.45;
}
.subcopy .line1,
.subcopy .line2{
  margin: 6px 0;
  color: var(--muted);
  font-size: 16px;
}
@media (min-width: 720px){
  .subcopy .line1,
  .subcopy .line2{ font-size: 17px; }
}

/* subtle cyan glow to match body copy vibe */
.subcopy .line1{
  text-shadow: 0 0 6px rgba(34,211,238,.22);
}

/* second line a touch brighter */
.subcopy .line2{
  color: var(--text);
  text-shadow: 0 0 8px rgba(34,211,238,.28);
}

/* gradient accent for ARCADEx word */
.subcopy .brand{
  background: linear-gradient(90deg,#00eaff 0%,#22c8ff 55%,#ff3bb0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 0 6px rgba(0,234,255,.35))
    drop-shadow(0 0 10px rgba(255,59,176,.22));
  font-weight: 700;
}

form {
  margin-bottom: 12px;
}

footer, .footer, .bottom-note {
  margin-top: 6px;
  line-height: 1.2;
  text-align: center;
  font-size: 0.95rem;
}

/* === FORCE BOTH SUBCOPY LINES TO MATCH COLOR AND GLOW === */
.subcopy .line1,
.subcopy .line2 {
  color: var(--text) !important;
  text-shadow: 0 0 6px rgba(34,211,238,.22) !important;
}

/* === ARCADEx modal (namespaced) === */
.ax-hidden{display:none!important}
.ax-flex{display:flex!important}
.ax-modal{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center}
.ax-overlay{position:absolute;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(4px)}
.ax-dialog{position:relative;width:min(92%,640px);border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg,var(--card),var(--card2));
  border:1px solid #1f2340; box-shadow:0 20px 60px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.02)}
.ax-grad{height:4px;background:linear-gradient(90deg,#3BE0FF,#7A5CFF,#FF2D95)}
.ax-body{position:relative;padding:28px 24px;text-align:center;color:var(--text)}
.ax-icon{width:44px;height:44px;margin:0 auto 10px;border-radius:999px;background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;font-weight:800}
.ax-title{margin:0 0 6px;font-size:24px;font-weight:800}
.ax-brand{background:linear-gradient(90deg,#00eaff 0%,#22c8ff 55%,#ff3bb0 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 8px rgba(0,234,255,.45)) drop-shadow(0 0 14px rgba(255,59,176,.25))}
.ax-sub{margin:0;color:#cfe2f5}
.ax-row{margin-top:18px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.ax-btn{appearance:none;border:0;border-radius:999px;padding:10px 18px;font-weight:700;cursor:pointer}
.ax-btn-primary{background:#23f0ff;color:#0b0f14;box-shadow:0 6px 18px rgba(35,240,255,.2)}
.ax-btn-ghost{background:transparent;color:var(--text);border:1px solid rgba(255,255,255,.25)}
.ax-btn:hover{filter:brightness(1.06)}
.ax-tip{margin-top:10px;font-size:12px;color:#9db2c6}

/* submit button "sending" state (optional) */
#ax-cta[disabled]{opacity:.7;cursor:progress}