/* Home page (rebuild Oct 18). Scoped to body.home-x. */
.home-x{background:#07070a;color:#f4f2ef;overflow-x:hidden}
.home-x main{display:block}
.home-x .hx-top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:12px 18px;background:rgba(7,7,10,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.08)}
.home-x .hx-top .brand img{height:22px;width:auto;filter:brightness(0) invert(1)}
.home-x .hx-menu{display:none;margin-left:auto;gap:26px;white-space:nowrap}
.home-x .hx-menu a{color:rgba(244,242,239,.75);text-decoration:none;font:500 .95rem "DM Sans",system-ui,sans-serif}
.home-x .hx-menu a:hover{color:#fff}
.home-x .hx-top .pill-btn{margin-left:auto;background:#d42f2f;color:#fff;border:0;white-space:nowrap}
.home-x .hx-top .v4-apply-btn{display:none}
.hx-hero{position:relative;isolation:isolate;overflow:hidden;padding:64px 20px 56px;min-height:auto}
.hx-grid{position:absolute;inset:-2px;z-index:-2;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 30%,transparent 75%);animation:hxPan 18s linear infinite}
.hx-glow{position:absolute;z-index:-1;width:620px;height:620px;max-width:140vw;left:50%;top:-260px;transform:translateX(-50%);background:radial-gradient(circle,rgba(212,47,47,.55),rgba(212,47,47,0) 65%);filter:blur(10px);animation:hxPulse 7s ease-in-out infinite}
@keyframes hxPan{to{background-position:44px 44px,44px 44px}}
@keyframes hxPulse{0%,100%{opacity:.7;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.08)}}
.hx-inner{max-width:760px;margin:0 auto;text-align:center}
.hx-kicker{display:inline-flex;align-items:center;gap:8px;margin:0 0 22px;padding:6px 14px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(255,255,255,.04);font:500 .78rem "DM Sans",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:rgba(244,242,239,.8)}
.hx-dot{width:7px;height:7px;border-radius:50%;background:#d42f2f;box-shadow:0 0 12px #d42f2f}
.hx-hero h1{margin:0;font:800 clamp(2.4rem,9.5vw,5.2rem)/1.02 "Syne",system-ui,sans-serif;letter-spacing:-.03em;color:#fff;text-wrap:balance}
.hx-sub{margin:20px auto 0;max-width:34ch;font:400 clamp(1.05rem,3.6vw,1.3rem)/1.5 "DM Sans",system-ui,sans-serif;color:rgba(244,242,239,.72)}
.hx-join{margin:34px auto 0;max-width:500px}
.hx-toggle{display:inline-flex;padding:4px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);margin-bottom:12px}
.hx-toggle label{cursor:pointer}
.hx-toggle input{position:absolute;opacity:0;pointer-events:none}
.hx-toggle span{display:block;padding:8px 16px;border-radius:999px;font:600 .9rem "DM Sans",system-ui,sans-serif;color:rgba(244,242,239,.7);transition:background .2s,color .2s}
.hx-toggle input:checked+span{background:#fff;color:#0a0a0a}
.hx-toggle input:focus-visible+span{outline:2px solid #d42f2f;outline-offset:2px}
.hx-field{display:flex;gap:8px;padding:6px;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hx-field:focus-within{border-color:rgba(212,47,47,.8);box-shadow:0 0 0 4px rgba(212,47,47,.18)}
.hx-field input{flex:1;min-width:0;border:0;background:transparent;color:#fff;font:400 1rem "DM Sans",system-ui,sans-serif;padding:12px 12px;outline:0}
.hx-field input::placeholder{color:rgba(244,242,239,.45)}
.hx-btn{flex:none;border:0;border-radius:11px;background:#d42f2f;color:#fff;font:700 1rem "DM Sans",system-ui,sans-serif;padding:12px 22px;cursor:pointer;box-shadow:0 8px 30px rgba(212,47,47,.45);transition:transform .15s,background .15s}
.hx-btn:hover{background:#e23a3a;transform:translateY(-1px)}
.hx-btn:disabled{opacity:.6;cursor:wait;transform:none}
.hx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.hx-msg{min-height:1.4em;margin:10px 0 0;font:500 .95rem "DM Sans",system-ui,sans-serif;color:rgba(244,242,239,.75)}
.hx-msg.ok{color:#7ee2a8}.hx-msg.err{color:#ff8a8a}.hx-msg a{color:#fff}
.hx-done .hx-toggle,.hx-done .hx-field{display:none}
.hx-done .hx-msg{font-size:1.15rem;color:#fff}
.hx-alt{margin:6px 0 0}
.hx-alt a{color:rgba(244,242,239,.8);font:500 .95rem "DM Sans",system-ui,sans-serif;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.25)}
.hx-alt a:hover{color:#fff;border-color:#d42f2f}
.hx-glass{background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.1);border-radius:20px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.hx-proof{max-width:1100px;margin:0 auto;padding:0 20px}
.hx-stats{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 22px;padding:18px 20px;text-align:center}
.hx-stats p{margin:0;font:400 .95rem "DM Sans",system-ui,sans-serif;color:rgba(244,242,239,.7)}
.hx-stats b{display:inline-block;margin-right:6px;font:800 1.5rem "Syne",system-ui,sans-serif;color:#fff;vertical-align:-2px}
.hx-sep{width:1px;height:26px;background:rgba(255,255,255,.18)}
.hx-brands{padding:22px 0 0;text-align:center}
.hx-label{margin:0 0 12px;font:600 .72rem "DM Sans",system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,242,239,.45)}
.hx-brands ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px}
.hx-brands li{font:600 .92rem "DM Sans",system-ui,sans-serif;color:rgba(244,242,239,.6);white-space:nowrap}
.hx-tiles{max-width:1100px;margin:0 auto;padding:44px 20px 0;display:grid;gap:14px}
.hx-tile{position:relative;display:block;padding:24px 22px;color:inherit;text-decoration:none;transition:transform .2s,border-color .2s}
.hx-tile:hover{transform:translateY(-3px);border-color:rgba(212,47,47,.6)}
.hx-num{font:600 .75rem "DM Sans",system-ui,sans-serif;letter-spacing:.12em;color:#d42f2f}
.hx-tile h2{margin:8px 0 6px;font:800 1.6rem "Syne",system-ui,sans-serif;color:#fff;letter-spacing:-.01em}
.hx-tile p{margin:0;font:400 1rem/1.5 "DM Sans",system-ui,sans-serif;color:rgba(244,242,239,.68);padding-right:24px}
.hx-go{position:absolute;right:20px;top:24px;color:rgba(244,242,239,.5);font-size:1.2rem;transition:transform .2s,color .2s}
.hx-tile:hover .hx-go{color:#d42f2f;transform:translateX(3px)}
.hx-team{max-width:1100px;margin:0 auto;padding:36px 20px 56px;display:flex;flex-wrap:wrap;justify-content:center;gap:12px 28px}
.hx-person{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none}
.hx-av{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#d42f2f,#5a1010);font:700 .9rem "Syne",system-ui,sans-serif;color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.12)}
.hx-person b{display:block;font:600 .98rem "DM Sans",system-ui,sans-serif;color:#fff}
.hx-person small{display:block;font:400 .82rem "DM Sans",system-ui,sans-serif;color:rgba(244,242,239,.55)}
.home-x .foot{border-top:1px solid rgba(255,255,255,.08)}
@media (min-width:760px){
  .home-x .hx-top{padding:14px 32px}
  .home-x .hx-menu{display:flex}
  .home-x .hx-top .pill-btn{margin-left:28px}
  .hx-hero{padding:96px 32px 72px}
  .hx-tiles{grid-template-columns:repeat(3,1fr);padding-top:48px}
}
@media (max-width:380px){.hx-btn{padding:12px 16px}.hx-toggle span{padding:8px 12px}}
@media (prefers-reduced-motion:reduce){.hx-grid,.hx-glow{animation:none}.hx-tile,.hx-btn,.hx-go{transition:none}}

/* header: one CTA on every width (overrides v4.css mobile rule) */
body.home-x header.top .pill-btn.hx-cta{display:inline-flex!important;font-size:.85rem;padding:.6rem 1rem}
body.home-x header.top .v4-apply-btn{display:none!important}
@media (max-width:759px){.hx-sep{display:none}.hx-stats{flex-direction:column;gap:6px}}
@media (min-width:1024px){.hx-inner{max-width:1120px}.hx-hero h1{font-size:clamp(3.6rem,5.6vw,5rem)}}

/* ---------- creator-first home additions (Oct 18) ---------- */
.hx-field2{flex-wrap:wrap}
.hx-field2 input{flex:1 1 100%}
.hx-field2 input+label+input{border-top:1px solid rgba(255,255,255,.1)}
.hx-field2 .hx-btn{flex:1 1 100%;margin-top:4px}
@media (min-width:640px){.hx-field2 input{flex:1 1 0}.hx-field2 input+label+input{border-top:0;border-left:1px solid rgba(255,255,255,.1)}.hx-field2 .hx-btn{flex:none;margin-top:0}}
.hx-done .hx-field2{display:none}
.hx-levels{max-width:1100px;margin:0 auto;padding:8px 20px 36px}
.hx-levels-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.hx-levels .hx-label{margin:0}
.hx-more{color:#fff;font:600 .9rem "DM Sans",system-ui,sans-serif;text-decoration:none;border-bottom:1px solid rgba(212,47,47,.8);white-space:nowrap}
.hx-lvl-strip{list-style:none;margin:0;padding:0 0 6px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,1fr);gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.hx-lvl-strip::-webkit-scrollbar{display:none}
.hx-lvl-strip li{scroll-snap-align:start}
.hx-lvl{display:flex;flex-direction:column;gap:4px;height:100%;padding:16px 16px 18px;color:inherit;text-decoration:none;transition:transform .2s,border-color .2s}
.hx-lvl:hover{transform:translateY(-3px);border-color:rgba(212,47,47,.6)}
.hx-lvl b{font:800 1.2rem "Syne",system-ui,sans-serif;color:#fff}
.hx-lvl small{font:400 .86rem/1.4 "DM Sans",system-ui,sans-serif;color:rgba(244,242,239,.62)}
.hx-lvl-top{border-color:rgba(212,47,47,.45);background:radial-gradient(120% 120% at 0% 0%,rgba(212,47,47,.3),rgba(255,255,255,.02))}
.hx-rule{margin:16px 0 0;text-align:center;font:400 .95rem/1.6 "DM Sans",system-ui,sans-serif;color:rgba(244,242,239,.7)}
.hx-rule b{color:#fff}.hx-rule span{margin:0 6px;color:#d42f2f}
.hx-rule a{margin-left:8px;color:#fff;text-decoration:none;border-bottom:1px solid rgba(212,47,47,.8);white-space:nowrap}
.hx-brandlink{text-align:center;margin:28px 0 0}
.hx-brandlink a{color:rgba(244,242,239,.7);font:500 .92rem "DM Sans",system-ui,sans-serif;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.2)}
.hx-brandlink a:hover{color:#fff;border-color:#d42f2f}
@media (min-width:1000px){.hx-lvl-strip{grid-auto-flow:row;grid-template-columns:repeat(5,1fr);overflow:visible}}
@media (max-width:440px){.hx-kx{display:none}}
