/* AGUDO.com | All Games Until Dreams Overcome */
:root{
  --bg:#05040b; --bg-2:#0a0718; --panel:rgba(18,12,40,.55); --line:rgba(170,130,255,.18);
  --purple:#8b3dff; --purple-2:#b26bff; --purple-3:#5a1fd6;
  --blue:#2f7bff; --cyan:#41cfff; --orange:#ff7a1a; --gold:#ffb347;
  --text:#eef0ff; --muted:#b4b2d4; --dim:#8c8aae;
  --display:"Orbitron", "Exo 2", system-ui, sans-serif;
  --body:"Exo 2", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius:18px; --header-h:76px;
  --grad: linear-gradient(92deg,#c690ff 0%,#9a4dff 45%,#4f8dff 100%);
  --grad-fire: linear-gradient(92deg,#ff7a1a,#ffb347);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 8px); -webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--body); font-size:1.0625rem; line-height:1.6; overflow-x:hidden; -webkit-font-smoothing:antialiased}
img,svg{display:block; max-width:100%}
a{color:inherit}
h1,h2,h3{margin:0; font-family:var(--display); letter-spacing:.02em; line-height:1.1}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
b,strong{font-weight:700}
.container{width:min(1240px, 100% - 2.5rem); margin-inline:auto}
.visually-hidden{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.sprite{position:absolute; width:0; height:0; overflow:hidden}
.skip-link{position:absolute; left:1rem; top:-4rem; z-index:100; background:var(--purple); color:#fff; padding:.7rem 1.1rem; border-radius:10px; font-weight:700; text-decoration:none; transition:top .2s}
.skip-link:focus{top:1rem}
:focus-visible{outline:3px solid var(--cyan); outline-offset:3px; border-radius:6px}
.grad{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.br-desk{display:none}
@media (min-width:760px){.br-desk{display:inline}}

/* ---------- Buttons ---------- */
.btn{--h:48px; position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.6rem; min-height:var(--h); padding:0 1.5rem; border-radius:12px; font-family:var(--display); font-weight:700; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; border:1px solid transparent; cursor:pointer; transition:transform .25s ease, box-shadow .25s ease, background-color .25s, border-color .25s; white-space:nowrap}
.btn--sm{--h:40px; padding:0 1.1rem; font-size:.72rem}
.btn--lg{--h:58px; padding:0 2rem; font-size:.86rem}
.btn--primary{color:#fff; background:linear-gradient(135deg,#a259ff 0%,#7a2cff 55%,#4a3cff 100%); box-shadow:0 0 0 1px rgba(214,180,255,.45) inset, 0 10px 30px -8px rgba(139,61,255,.8), 0 0 36px -6px rgba(139,61,255,.55)}
.btn--primary:hover{transform:translateY(-2px); box-shadow:0 0 0 1px rgba(234,214,255,.7) inset, 0 16px 40px -8px rgba(139,61,255,.95), 0 0 60px -4px rgba(139,61,255,.7)}
.btn--outline{color:#fff; border-color:rgba(178,107,255,.8); background:rgba(139,61,255,.12); box-shadow:0 0 22px -6px rgba(139,61,255,.8), inset 0 0 14px -6px rgba(178,107,255,.8)}
.btn--outline:hover{background:rgba(139,61,255,.28)}
.btn--ghost{color:var(--text); border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.04); backdrop-filter:blur(8px)}
.btn--ghost:hover{border-color:rgba(65,207,255,.75); box-shadow:0 0 26px -8px rgba(65,207,255,.8); transform:translateY(-2px)}
.btn__arrow{font-family:var(--body); font-size:1.15em; transition:transform .25s}
.btn:hover .btn__arrow{transform:translateX(4px)}

/* ---------- Header ---------- */
.site-header{position:fixed; inset:0 0 auto; z-index:50; height:var(--header-h); transition:background-color .3s, border-color .3s, backdrop-filter .3s; border-bottom:1px solid transparent}
.site-header.is-scrolled{background:rgba(6,4,16,.78); backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%); border-bottom-color:var(--line)}
.header__inner{height:100%; display:flex; align-items:center; justify-content:space-between; gap:1.5rem}
.brand{display:inline-flex; align-items:center; gap:.15rem; text-decoration:none}
.brand__a{width:52px; height:35px; filter:drop-shadow(0 0 10px rgba(162,77,255,.65))}
.brand__text{display:flex; flex-direction:column; line-height:1}
.brand__word{font-family:var(--display); font-weight:900; font-size:1.75rem; letter-spacing:.04em; background:linear-gradient(180deg,#fff 30%,#c9c6e6); -webkit-background-clip:text; background-clip:text; color:transparent; transform:skewX(-6deg); margin-left:-2px}
.brand__tag{font-size:.52rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-top:5px; font-weight:600}
.nav__list{display:flex; align-items:center; gap:2.2rem}
.nav__list a:not(.btn){position:relative; font-family:var(--display); font-size:.76rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; text-decoration:none; color:#dcdaf3; padding:.5rem 0; transition:color .2s}
.nav__list a:not(.btn)::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; border-radius:2px; background:var(--grad); transform:scaleX(0); transform-origin:left; transition:transform .3s ease; box-shadow:0 0 10px rgba(139,61,255,.9)}
.nav__list a:not(.btn):hover, .nav__list a.is-active{color:#fff}
.nav__list a:not(.btn):hover::after, .nav__list a.is-active::after{transform:scaleX(1)}
.nav__cta-mobile{display:none}
.header__actions{display:flex; align-items:center; gap:.8rem}
.nav-toggle{display:none; width:46px; height:46px; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.04); cursor:pointer; padding:0; position:relative}
.nav-toggle__bar{position:absolute; left:12px; right:12px; height:2px; border-radius:2px; background:#fff; transition:transform .3s, opacity .3s}
.nav-toggle__bar:nth-child(2){top:16px}.nav-toggle__bar:nth-child(3){top:22px}.nav-toggle__bar:nth-child(4){top:28px}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(4){transform:translateY(-6px) rotate(-45deg)}

@media (max-width:960px){
  :root{--header-h:68px}
  .nav-toggle{display:block}
  .header__join{display:none}
  .brand__tag{display:none}
  .nav{position:fixed; inset:var(--header-h) 0 auto; background:rgba(6,4,16,.97); backdrop-filter:blur(16px); border-bottom:1px solid var(--line); padding:1rem 1.25rem 1.6rem; transform:translateY(-8px); opacity:0; visibility:hidden; transition:opacity .25s, transform .25s, visibility .25s}
  .nav.is-open{opacity:1; transform:none; visibility:visible}
  .nav__list{flex-direction:column; align-items:stretch; gap:0}
  .nav__list a:not(.btn){display:block; padding:1rem .25rem; font-size:.9rem; border-bottom:1px solid rgba(255,255,255,.06)}
  .nav__list a:not(.btn)::after{display:none}
  .nav__cta-mobile{display:block; margin-top:1.2rem}
  .nav__cta-mobile .btn{width:100%}
  .site-header:has(.nav.is-open){background:rgba(6,4,16,.97)}
}

/* ---------- Hero ---------- */
.hero{position:relative; isolation:isolate; min-height:100svh; padding-top:calc(var(--header-h) + clamp(2.5rem,6vw,5rem)); display:flex; flex-direction:column; overflow:hidden; background:radial-gradient(120% 70% at 50% 0%, #120a33 0%, var(--bg) 60%)}
.hero__stars{position:absolute; inset:0; width:100%; height:100%; z-index:-3}
.hero__nebula{position:absolute; inset:0; z-index:-3; pointer-events:none;
  background:
    radial-gradient(40% 40% at 12% 30%, rgba(47,123,255,.22), transparent 70%),
    radial-gradient(35% 45% at 90% 40%, rgba(255,122,26,.18), transparent 70%),
    radial-gradient(45% 40% at 70% 15%, rgba(139,61,255,.25), transparent 70%)}
.hero__planet{position:absolute; z-index:-2; left:50%; top:clamp(-640px,-46vw,-300px); width:clamp(640px,96vw,1500px); aspect-ratio:1; margin-left:calc(clamp(640px,96vw,1500px) / -2); border-radius:50%;
  background:radial-gradient(circle at 50% 70%, #0d0a26 52%, #0a0820 62%, transparent 71%);
  box-shadow:0 30px 80px -20px rgba(65,140,255,.55), 0 50px 140px -30px rgba(139,61,255,.6), inset 0 -24px 50px -18px rgba(120,170,255,.75), inset 0 -4px 6px rgba(190,220,255,.6);
  will-change:transform}
.hero__planet::after{content:""; position:absolute; inset:0; border-radius:50%; background:radial-gradient(60% 18% at 50% 99%, rgba(150,200,255,.45), transparent 70%); mix-blend-mode:screen}
.hero__content{position:relative; z-index:2; text-align:center; display:flex; flex-direction:column; align-items:center}
.eyebrow{display:inline-flex; align-items:center; gap:.7rem; font-family:var(--display); font-weight:700; font-size:.72rem; letter-spacing:.32em; text-transform:uppercase; color:#cfb4ff}
.eyebrow::before,.eyebrow::after{content:""; width:28px; height:1px; background:linear-gradient(90deg,transparent,#b26bff)}
.eyebrow::after{transform:scaleX(-1)}
.hero__title{margin-top:1.4rem}
.logo-lockup{display:inline-flex; align-items:flex-end; line-height:.8}
.logo-lockup__a{width:clamp(108px,14vw,210px); height:auto; aspect-ratio:120/80; filter:drop-shadow(0 0 26px rgba(162,77,255,.7)); margin-right:-.02em}
.logo-lockup__word{font-family:var(--display); font-weight:900; font-size:clamp(4.4rem,11.6vw,10.6rem); letter-spacing:.02em; line-height:.78; transform:skewX(-7deg); background:linear-gradient(180deg,#ffffff 0%,#f1efff 45%,#a9a4cf 100%); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 6px 24px rgba(0,0,0,.6)) drop-shadow(0 0 30px rgba(130,90,255,.35))}
.logo-lockup__tld{font-family:var(--display); font-weight:800; font-size:clamp(1.6rem,4vw,3.6rem); line-height:1; margin-left:.35rem; margin-bottom:.1em; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.tagline{margin-top:clamp(1rem,2vw,1.6rem); font-family:var(--display); font-weight:800; font-size:clamp(1rem,2.6vw,2.15rem); letter-spacing:.16em; color:#f4f2ff; text-shadow:0 2px 16px rgba(0,0,0,.6)}
.tagline b{color:#c48bff; text-shadow:0 0 18px rgba(162,77,255,.95)}
.tagline em{font-style:normal; background:linear-gradient(90deg,#b46bff,#8c3dff); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 0 14px rgba(139,61,255,.8))}
.tagline em b{color:inherit; text-shadow:none}
.hero__sub{margin-top:1.1rem; max-width:46rem; font-size:clamp(1.02rem,1.6vw,1.3rem); color:#dad8f2; line-height:1.55}
.hero__sub strong{color:#fff}
.hero__ctas{margin-top:2rem; display:flex; flex-wrap:wrap; gap:1rem; justify-content:center}
.hero__art{position:relative; z-index:1; margin-top:clamp(-1rem,-2vw,0rem); width:100%; max-width:1700px; margin-inline:auto; will-change:transform}
.hero__art img{width:100%; height:auto; -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 26%,#000 80%,transparent 100%), linear-gradient(90deg,transparent 0%,#000 9%,#000 91%,transparent 100%); -webkit-mask-composite:source-in; mask-image:linear-gradient(180deg,transparent 0%,#000 26%,#000 80%,transparent 100%), linear-gradient(90deg,transparent 0%,#000 9%,#000 91%,transparent 100%); mask-composite:intersect}
.hero__fog{position:absolute; inset:auto 0 0; height:42%; pointer-events:none; background:linear-gradient(180deg,transparent,rgba(5,4,11,.75) 60%,var(--bg))}
.scroll-cue{position:absolute; z-index:3; left:50%; bottom:1.2rem; width:28px; height:44px; margin-left:-14px; border-radius:16px; border:2px solid rgba(255,255,255,.35)}
.scroll-cue span{position:absolute; left:50%; top:8px; width:4px; height:8px; margin-left:-2px; border-radius:2px; background:#c48bff; animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{opacity:0; transform:translateY(0)}30%{opacity:1}100%{opacity:0; transform:translateY(14px)}}
@media (max-width:760px){
  .hero{min-height:auto}
  .hero__art{margin-top:1.5rem}
  .hero__art img{height:260px; object-fit:cover; object-position:54% 50%}
  .scroll-cue{display:none}
  .hero__ctas .btn{width:100%; max-width:340px}
}

/* ---------- Ticker ---------- */
.ticker{position:relative; overflow:hidden; border-block:1px solid var(--line); background:linear-gradient(90deg,rgba(47,123,255,.08),rgba(139,61,255,.14),rgba(255,122,26,.08)); padding:1rem 0}
.ticker__track{display:flex; align-items:center; gap:2.2rem; width:max-content; animation:ticker 38s linear infinite}
.ticker span{font-family:var(--display); font-weight:800; font-size:clamp(1rem,2vw,1.35rem); letter-spacing:.28em; text-transform:uppercase; color:transparent; -webkit-text-stroke:1px rgba(220,205,255,.6)}
.ticker span:nth-of-type(5n+1){color:#fff; -webkit-text-stroke:0}
.ticker i{width:10px; height:10px; transform:rotate(45deg); background:var(--grad); box-shadow:0 0 12px rgba(139,61,255,.9)}
@keyframes ticker{to{transform:translateX(-50%)}}

/* ---------- Sections ---------- */
.section{position:relative; padding:clamp(4.5rem,9vw,8rem) 0}
.section__head{text-align:center; max-width:46rem; margin:0 auto clamp(2.5rem,5vw,4rem); display:flex; flex-direction:column; align-items:center}
.section__title{margin-top:1rem; font-size:clamp(2rem,4.6vw,3.4rem); font-weight:800; text-transform:uppercase; letter-spacing:.03em}
.section__lead{margin-top:1.1rem; color:var(--muted); font-size:clamp(1rem,1.4vw,1.15rem)}

/* ---------- Pillars ---------- */
.pillars{background:radial-gradient(60% 50% at 50% 0%, rgba(139,61,255,.12), transparent 70%)}
.pillar-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:1.1rem}
.pillar{--accent:#9b5cff; --accent-2:#5b8cff; position:relative; isolation:isolate; padding:2rem 1.5rem 1.8rem; border-radius:var(--radius); background:linear-gradient(180deg,rgba(24,16,52,.75),rgba(10,7,24,.85)); border:1px solid rgba(255,255,255,.08); overflow:hidden; transition:transform .35s ease, box-shadow .35s ease, border-color .35s}
.pillar::before{content:""; position:absolute; inset:-1px; z-index:-1; border-radius:inherit; padding:1px; background:linear-gradient(160deg,var(--accent),transparent 40%,transparent 60%,var(--accent-2)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity:.55; transition:opacity .35s}
.pillar::after{content:""; position:absolute; z-index:-2; width:220px; height:220px; right:-90px; top:-90px; border-radius:50%; background:radial-gradient(circle,var(--accent),transparent 65%); opacity:.18; transition:opacity .35s, transform .35s}
.pillar:hover,.pillar:focus-within{transform:translateY(-6px); border-color:transparent; box-shadow:0 20px 50px -20px color-mix(in srgb,var(--accent) 80%,transparent), 0 0 40px -12px var(--accent)}
.pillar:hover::before{opacity:1}
.pillar:hover::after{opacity:.4; transform:scale(1.2)}
.pillar__num{position:absolute; top:1.1rem; right:1.2rem; font-family:var(--display); font-weight:800; font-size:.8rem; letter-spacing:.15em; color:rgba(255,255,255,.28)}
.pillar__icon{display:grid; place-items:center; width:64px; height:64px; border-radius:16px; color:var(--accent); background:color-mix(in srgb,var(--accent) 14%,transparent); border:1px solid color-mix(in srgb,var(--accent) 50%,transparent); box-shadow:0 0 26px -6px var(--accent), inset 0 0 16px -8px var(--accent)}
.pillar__icon svg{width:34px; height:34px; filter:drop-shadow(0 0 6px var(--accent))}
.pillar__title{margin-top:1.4rem; font-size:1.3rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em}
.pillar__line{margin-top:.45rem; font-weight:700; color:var(--accent); filter:brightness(1.25); font-size:1rem}
.pillar__text{margin-top:.8rem; color:var(--muted); font-size:.97rem; line-height:1.55}
@media (max-width:1180px){.pillar-grid{grid-template-columns:repeat(6,1fr)}.pillar{grid-column:span 2}.pillar:nth-child(4){grid-column:2 / span 2}}
@media (max-width:760px){.pillar-grid{grid-template-columns:1fr 1fr}.pillar,.pillar:nth-child(4){grid-column:auto}.pillar--crown{grid-column:1 / -1}}
@media (max-width:520px){.pillar-grid{grid-template-columns:1fr}.pillar{padding:1.6rem 1.3rem 1.5rem}}

/* ---------- Universe tiles ---------- */
.universe{background:linear-gradient(180deg,transparent,rgba(47,123,255,.05) 50%,transparent)}
.tiles{display:grid; grid-template-columns:repeat(5,1fr); gap:1rem}
.tile{--accent:#8b3dff; --clip:polygon(10% 0,100% 0,90% 100%,0 100%); position:relative; aspect-ratio:4/5; transition:transform .4s ease, filter .4s ease}
.tile__frame{position:absolute; inset:0; clip-path:var(--clip); background:linear-gradient(165deg,var(--accent) 0%,rgba(255,255,255,.08) 38%,rgba(255,255,255,.05) 62%,var(--accent) 100%)}
.tile__inner{position:absolute; inset:2px 3px; clip-path:var(--clip); isolation:isolate; background:#07051a; overflow:hidden}
.tile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transform:scale(1.04); transition:transform .8s cubic-bezier(.2,.7,.2,1); filter:saturate(1.1)}
.tile__inner::before{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,transparent 35%,rgba(5,4,11,.55) 62%,rgba(5,4,11,.95) 100%)}
.tile__body{position:absolute; inset:auto 0 0; padding:1.4rem 1.4rem 1.6rem; text-align:center}
.tile h3{font-size:clamp(.9rem,1.25vw,1.08rem); font-weight:800; text-transform:uppercase; letter-spacing:.06em; line-height:1.25; text-shadow:0 2px 12px rgba(0,0,0,.8)}
.tile:hover{transform:translateY(-6px); filter:drop-shadow(0 0 18px color-mix(in srgb,var(--accent) 70%,transparent))}
.tile:hover img{transform:scale(1.12)}
@media (max-width:1000px){.tiles{grid-template-columns:repeat(6,1fr)}.tile{grid-column:span 2; aspect-ratio:4/4.4}.tile:nth-child(4){grid-column:2 / span 2}}
@media (max-width:640px){.tiles{grid-template-columns:1fr 1fr; gap:.6rem}.tile,.tile:nth-child(4){grid-column:auto; aspect-ratio:1/1.08; --clip:polygon(8% 0,100% 0,92% 100%,0 100%)}.tile:last-child{grid-column:1 / -1; aspect-ratio:2/1.05; --clip:polygon(4% 0,100% 0,96% 100%,0 100%)}.tile__body{padding:1rem 1rem 1.1rem}}

/* ---------- Vision ---------- */
.vision{overflow:hidden; text-align:center; border-top:1px solid var(--line)}
.vision__glow{position:absolute; inset:0; z-index:-1; background:radial-gradient(50% 60% at 50% 55%, rgba(139,61,255,.22), transparent 70%), radial-gradient(30% 40% at 85% 90%, rgba(255,122,26,.12), transparent 70%), radial-gradient(30% 40% at 12% 15%, rgba(47,123,255,.14), transparent 70%)}
.vision .eyebrow{justify-content:center}
.vision__statement{margin:1.4rem auto 0; max-width:62rem; font-size:clamp(1.9rem,4.4vw,3.7rem); font-weight:800; line-height:1.15; text-transform:uppercase; letter-spacing:.01em}
.vision__statement .grad{display:block; margin-top:.3rem}
.acronym{margin:clamp(3rem,6vw,4.5rem) auto 0; display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; max-width:1000px}
.acronym li{display:flex; flex-direction:column; align-items:center; gap:.6rem; padding:1.4rem .5rem; border-radius:16px; background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.06); transition:transform .3s, border-color .3s, box-shadow .3s}
.acronym li:hover{transform:translateY(-4px); border-color:rgba(178,107,255,.5); box-shadow:0 0 34px -12px rgba(139,61,255,.9)}
.acronym__letter{font-family:var(--display); font-weight:900; font-size:clamp(2.6rem,6vw,4.6rem); line-height:1; background:linear-gradient(180deg,#fff 10%,#c48bff 55%,#7a2cff); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 0 18px rgba(162,77,255,.7))}
.acronym__word{font-family:var(--display); font-weight:700; font-size:clamp(.66rem,1.2vw,.85rem); letter-spacing:.24em; text-transform:uppercase; color:var(--muted)}
.acronym li.is-dream{border-color:rgba(178,107,255,.45); background:rgba(139,61,255,.08)}
.acronym li.is-dream .acronym__word{color:#d7b9ff}
.vision__cols{margin:clamp(2.5rem,5vw,3.5rem) auto 0; max-width:60rem; display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3rem); text-align:left; color:var(--muted); font-size:1.08rem}
.vision__cols strong{color:#fff}
@media (max-width:760px){.vision__cols{grid-template-columns:1fr; text-align:center}.acronym{gap:.45rem}.acronym li{padding:1rem .2rem}.acronym__word{letter-spacing:.08em; font-size:.62rem}}

/* ---------- Join ---------- */
.join{padding-top:clamp(2rem,5vw,4rem)}
.join__card{position:relative; isolation:isolate; overflow:hidden; text-align:center; padding:clamp(2.8rem,6vw,4.8rem) clamp(1.3rem,5vw,4rem); border-radius:26px; background:radial-gradient(80% 120% at 50% 0%, rgba(139,61,255,.35), rgba(12,8,30,.92) 60%), #0a0718; display:flex; flex-direction:column; align-items:center}
.join__card::before{content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; padding:1.5px; background:conic-gradient(from var(--spin,0deg), #2f7bff, #8b3dff, #ff7a1a, #8b3dff, #2f7bff); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation:spin 8s linear infinite}
@property --spin{syntax:"<angle>"; initial-value:0deg; inherits:false}
@keyframes spin{to{--spin:360deg}}
.join__a{position:absolute; z-index:-1; width:min(560px,90%); height:auto; aspect-ratio:120/80; right:-8%; bottom:-22%; opacity:.08; transform:rotate(-8deg)}
.join .section__lead{max-width:38rem}
.join__form{margin-top:2rem; display:flex; gap:.75rem; width:min(560px,100%)}
.join__form input{flex:1; min-width:0; min-height:56px; padding:0 1.2rem; border-radius:12px; border:1px solid rgba(178,107,255,.4); background:rgba(5,4,11,.7); color:#fff; font:inherit; font-size:1rem; transition:border-color .2s, box-shadow .2s}
.join__form input::placeholder{color:#8f8db0}
.join__form input:focus{outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px rgba(65,207,255,.3)}
.join__form input[aria-invalid="true"]{border-color:#ff7a8a}
.join__form .btn{--h:56px}
.join__help{margin-top:.9rem; font-size:.88rem; color:var(--dim)}
.join__msg{margin-top:1rem; min-height:1.6em; font-weight:600; color:#d9c2ff}
.join__msg.is-error{color:#ffa3ae}
.join__msg.is-ok{color:#bfe9ff}
@media (max-width:560px){.join__form{flex-direction:column}.join__form .btn{width:100%}}

/* ---------- Footer ---------- */
.site-footer{margin-top:clamp(3rem,6vw,5rem); border-top:1px solid var(--line); background:linear-gradient(180deg,#07051a,#030208)}
.footer__band{display:flex; align-items:center; justify-content:center; gap:clamp(1rem,3vw,2rem); padding:2.2rem 1.25rem; border-bottom:1px solid rgba(255,255,255,.05)}
.footer__line{flex:1; max-width:340px; height:2px; border-radius:2px; background:linear-gradient(90deg,transparent,#8b3dff); box-shadow:0 0 12px rgba(139,61,255,.8)}
.footer__line:last-child{transform:scaleX(-1)}
.footer__inf{width:70px; height:30px; flex:none; filter:drop-shadow(0 0 10px rgba(162,77,255,.9))}
.footer__tag{font-family:var(--display); font-weight:700; font-size:clamp(.72rem,1.4vw,.95rem); letter-spacing:.34em; text-transform:uppercase; color:#e8e6ff; text-align:center}
.footer__tag b{color:#c48bff; text-shadow:0 0 12px rgba(162,77,255,.9)}
.footer__inner{display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; padding:1.8rem 0 2.2rem}
.brand--footer .brand__a{width:40px; height:27px}
.brand--footer .brand__word{font-size:1.3rem}
.footer__nav{display:flex; flex-wrap:wrap; gap:.4rem 1.6rem}
.footer__nav a{font-family:var(--display); font-size:.7rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; text-decoration:none; color:var(--muted)}
.footer__nav a:hover{color:#fff}
.footer__copy{color:var(--dim); font-size:.88rem}
@media (max-width:760px){.footer__band{flex-direction:column; gap:.9rem}.footer__line{width:60%; flex:none}.footer__inner{flex-direction:column; text-align:center}.footer__nav{justify-content:center}}

/* ---------- Reveal ---------- */
.js .reveal{opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay:var(--d,0s)}
.js .reveal.is-visible{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important}
  .js .reveal{opacity:1; transform:none}
  .ticker__track{animation:none}
  .hero__planet,.hero__art{transform:none!important}
}

/* ---------- Polish pass ---------- */
.section__head{max-width:60rem}
.section__title,.vision__statement,.tagline,.hero__sub,.section__lead{text-wrap:balance}
.logo-lockup__a{flex:none}
.brand__tag{font-size:.6rem; letter-spacing:.16em}
.join{padding-bottom:clamp(3rem,6vw,5rem)}
.site-footer{margin-top:0}
.vision__glow{background:radial-gradient(50% 60% at 50% 55%, rgba(139,61,255,.22), transparent 70%), radial-gradient(28% 30% at 80% 60%, rgba(255,122,26,.10), transparent 70%), radial-gradient(28% 30% at 15% 25%, rgba(47,123,255,.14), transparent 70%)}
@media (max-width:760px){
  .eyebrow{letter-spacing:.22em; font-size:.66rem}
  .eyebrow::before,.eyebrow::after{width:18px}
  .logo-lockup__a{width:92px}
  .logo-lockup__word{font-size:clamp(3.6rem,17vw,4.6rem)}
  .logo-lockup__tld{font-size:1.35rem; margin-left:.2rem}
  .tagline{letter-spacing:.1em; font-size:clamp(.95rem,4.4vw,1.2rem)}
  .hero__fog{height:62%; background:linear-gradient(180deg,transparent,rgba(5,4,11,.82) 45%,var(--bg))}
  .tile h3{font-size:.8rem; letter-spacing:.04em}
  .tile__body{padding-inline:1.1rem}
}
@media (max-width:440px){
  .eyebrow{letter-spacing:.15em; font-size:.62rem}
  .logo-lockup__a{width:80px}
  .logo-lockup__word{font-size:15vw}
  .logo-lockup__tld{font-size:1.15rem}
}
@media (max-width:560px){.join__a{display:none}}
