/* Ranks & supporter tiers page (v3 HUD). Badges are inline SVG so they can animate. */
.thead{padding:calc(var(--nav-h) + clamp(48px,7vw,104px)) 0 clamp(24px,4vw,48px);position:relative;overflow:hidden}
.thead::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 80% 30%,rgba(47,107,255,.18),transparent 60%),radial-gradient(40% 50% at 15% 80%,rgba(62,224,255,.08),transparent 60%);z-index:-1}
.thead .d1{margin:18px 0 22px}
.thead .lead{max-width:62ch}

/* Rank ladder: a lit track the badges sit on */
.ladder{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:10px;position:relative}
.ladder::before{content:"";position:absolute;left:8%;right:8%;top:58px;height:2px;background:linear-gradient(90deg,rgba(214,221,232,.3),var(--cy),#7b5cff);box-shadow:0 0 14px var(--cy-glow);z-index:0}
.ladder::after{content:"";position:absolute;top:54px;left:8%;width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 14px #fff,0 0 30px var(--cy);animation:travel 6s cubic-bezier(.6,0,.4,1) infinite;z-index:1}
@keyframes travel{0%{left:8%;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:calc(92% - 10px);opacity:0}}
.rung{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.rung .rb{width:116px;height:116px;transition:transform .4s cubic-bezier(.2,.8,.2,1),filter .3s}
.rung .rb svg{width:100%;height:100%;display:block}
.rung:hover .rb{transform:translateY(-6px) scale(1.06);filter:drop-shadow(0 0 18px var(--cy-glow))}
.rung .lv{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cy);margin-top:8px}
.rung b{font-size:20px;font-weight:540;font-stretch:84%;letter-spacing:-.02em}
.rung .req{font-family:var(--mono);font-size:11px;color:var(--mu)}
@media (max-width:900px){.ladder{grid-template-columns:repeat(3,1fr);row-gap:32px}.ladder::before,.ladder::after{display:none}}
@media (max-width:480px){.ladder{grid-template-columns:repeat(2,1fr)}.rung .rb{width:96px;height:96px}}

/* Billing toggle */
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:99px;padding:3px;margin-bottom:8px}
.seg button{padding:8px 16px;border-radius:99px;font-size:13px;color:var(--tx-2);cursor:inherit}
.seg button[aria-pressed=true]{background:var(--acc);color:#fff;box-shadow:0 0 18px rgba(47,107,255,.4)}
.seg i{font-style:normal;font-family:var(--mono);font-size:10px;color:var(--cy);margin-left:6px}
.seg button[aria-pressed=true] i{color:#cfe6ff}

/* Tier cards */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tcard{padding:30px 26px 26px;border:1px solid rgba(62,224,255,.14);border-radius:4px;display:flex;flex-direction:column;gap:14px;overflow:hidden;isolation:isolate}
.tcard::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.9;pointer-events:none}
.tcard.uplink::after{background:radial-gradient(80% 50% at 50% 0%,rgba(47,107,255,.22),transparent 70%)}
.tcard.overdrive::after{background:radial-gradient(80% 50% at 50% 0%,rgba(62,224,255,.22),transparent 70%)}
.tcard.command::after{background:radial-gradient(80% 50% at 50% 0%,rgba(123,92,255,.3),transparent 70%)}
.tcard.command{border-color:rgba(160,135,255,.4)}
.tbadge{width:150px;height:150px;margin:0 auto 4px}
.tbadge svg{width:100%;height:100%;display:block;overflow:visible}
.tlevel{text-align:center;font-size:30px;font-stretch:80%;font-weight:560;letter-spacing:-.03em}
.tprice{text-align:center;color:var(--mu);font-family:var(--mono);font-size:13px}
.tprice b{font-family:var(--ff);font-size:46px;font-stretch:76%;font-weight:560;letter-spacing:-.04em;color:var(--tx);margin-right:6px;text-shadow:0 0 22px rgba(62,224,255,.3)}
.tperks{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:9px;flex:1}
.tperks li{display:grid;grid-template-columns:16px 1fr;gap:10px;font-size:14px;color:var(--tx-2)}
.tperks li::before{content:"";width:8px;height:8px;margin-top:6px;border:1px solid var(--cy);transform:rotate(45deg);box-shadow:0 0 8px var(--cy-glow)}
.tprev{display:grid;grid-template-columns:30px 1fr;grid-template-rows:auto auto;column-gap:10px;padding:12px;border:1px solid var(--line);border-radius:4px;background:rgba(0,0,0,.35);font-size:13px}
.tprev .tav{grid-row:span 2;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:11px;background:#0b1630;border:1px solid var(--line-2);color:var(--tx-2)}
.tprev .tname{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.tprev .tmsg{color:var(--mu)}
.n-uplink{color:#8fb2ff}
.n-overdrive{background:linear-gradient(90deg,#7ef0ff,#2f6bff,#7ef0ff);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:namesweep 3s linear infinite}
.n-command{background:linear-gradient(90deg,#c9b4ff,#7ef0ff,#7b5cff,#c9b4ff);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:namesweep 4s linear infinite;text-shadow:0 0 18px rgba(123,92,255,.35)}
.n-uplink img,.n-overdrive img,.n-command img{-webkit-text-fill-color:initial}
@keyframes namesweep{to{background-position:-200% 0}}
.tbtn{justify-content:center;width:100%}
.paymsg{font-size:13px;color:var(--mu);min-height:1em;text-align:center}
@media (max-width:980px){.tgrid{grid-template-columns:1fr}.tcard{max-width:520px;margin:0 auto;width:100%}}

/* Badge animations: each tier moves differently */
.tcard.uplink .tbadge svg path:nth-of-type(1){animation:sig 2.4s ease-in-out infinite}
.tcard.uplink .tbadge svg path:nth-of-type(2){animation:sig 2.4s .3s ease-in-out infinite}
@keyframes sig{0%,100%{opacity:.35}50%{opacity:1}}
.tcard.overdrive .tbadge svg{animation:hover 3s ease-in-out infinite}
.tcard.overdrive .tbadge svg path{animation:chev 1.4s ease-in-out infinite}
.tcard.overdrive .tbadge svg path:nth-of-type(2){animation-delay:.2s}
@keyframes chev{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@keyframes hover{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.tcard.command .tbadge svg > g > circle:first-child{transform-origin:128px 128px;animation:spin2 12s linear infinite}
.tcard.command .tbadge svg{animation:breathe 4s ease-in-out infinite}
@keyframes spin2{to{transform:rotate(360deg)}}
@keyframes breathe{0%,100%{filter:drop-shadow(0 0 10px rgba(123,92,255,.4))}50%{filter:drop-shadow(0 0 28px rgba(123,92,255,.8))}}

/* Founding crest */
.fcrest{display:grid;grid-template-columns:320px 1fr;gap:clamp(24px,5vw,72px);align-items:center;padding:clamp(28px,4vw,56px);border:1px solid rgba(201,180,255,.35);border-radius:4px;background:radial-gradient(70% 90% at 15% 50%,rgba(123,92,255,.25),transparent 60%),linear-gradient(160deg,rgba(14,12,40,.85),rgba(5,7,12,.9));overflow:hidden}
.fbadge{width:100%;max-width:300px;aspect-ratio:1;position:relative}
.fbadge svg{width:100%;height:100%;display:block;animation:hover 5s ease-in-out infinite;filter:drop-shadow(0 0 30px rgba(123,92,255,.6))}
.fbadge::after{content:"";position:absolute;inset:0;border-radius:50%;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.35) 50%,transparent 60%);background-size:300% 100%;animation:shine 4s ease-in-out infinite;mix-blend-mode:overlay;pointer-events:none}
@keyframes shine{0%{background-position:150% 0}60%,100%{background-position:-150% 0}}
.ftext .d2{margin:10px 0 8px}
.fprice{font-size:56px;font-stretch:76%;font-weight:560;letter-spacing:-.04em;line-height:1;margin-bottom:14px;color:#fff;text-shadow:0 0 24px rgba(201,180,255,.5)}
.fprice small{font-family:var(--mono);font-size:13px;font-weight:400;letter-spacing:0;color:var(--mu);margin-left:8px}
.ftext > p:not(.fprice):not(.paymsg){color:var(--tx-2);max-width:56ch;margin-bottom:20px}
.ftext .tbtn{width:auto}
.ftext .paymsg{text-align:left}
@media (max-width:820px){.fcrest{grid-template-columns:1fr;text-align:left}.fbadge{max-width:220px}}

/* FAQ */
.faq details{border:1px solid var(--line);border-radius:4px;margin-bottom:10px;background:rgba(5,7,12,.6)}
.faq summary{padding:18px 22px;font-weight:500;font-size:17px;cursor:inherit;list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--cy);font-size:20px;transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 22px 18px;color:var(--tx-2);max-width:70ch}

@media (prefers-reduced-motion:reduce){.ladder::after,.tbadge svg,.tbadge svg *,.fbadge svg,.fbadge::after,.n-overdrive,.n-command{animation:none!important}}

/* ---- escalation: each tier up gets more light and motion ---- */
/* Uplink: a soft pulse */
.tcard.uplink{box-shadow:0 0 0 1px rgba(47,107,255,.12)}
/* Overdrive: a scanning light sweeps the card */
.tcard.overdrive .scan{position:absolute;left:0;right:0;height:120px;top:-120px;background:linear-gradient(180deg,transparent,rgba(62,224,255,.12),transparent);animation:scan 3.2s linear infinite;pointer-events:none;z-index:-1}
@keyframes scan{to{top:110%}}
/* Command: rotating conic border, orbiting particles, holographic sheen */
.tcard.command{border-color:transparent;background:linear-gradient(160deg,rgba(26,16,60,.92),rgba(6,6,18,.95)) padding-box,conic-gradient(from var(--a,0deg),#7b5cff,#7ef0ff,#2f6bff,#c9b4ff,#7b5cff) border-box;border:1.5px solid transparent;animation:cone 6s linear infinite;box-shadow:0 0 60px rgba(123,92,255,.25),inset 0 0 40px rgba(123,92,255,.12);transform:translateY(-10px)}
@property --a{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes cone{to{--a:360deg}}
.tcard.command .holo{position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(126,240,255,.10) 45%,rgba(201,180,255,.16) 50%,rgba(126,240,255,.10) 55%,transparent 70%);background-size:250% 100%;animation:holo 5s ease-in-out infinite;pointer-events:none;z-index:-1;mix-blend-mode:screen}
@keyframes holo{0%{background-position:120% 0}100%{background-position:-120% 0}}
.tcard .orbit{position:absolute;left:50%;top:105px;width:210px;height:210px;margin-left:-105px;pointer-events:none;z-index:-1}
.tcard .orbit i{position:absolute;inset:0;animation:spin2 var(--t,7s) linear infinite}
.tcard .orbit i::before{content:"";position:absolute;left:50%;top:0;width:var(--s,5px);height:var(--s,5px);border-radius:50%;background:var(--c,#c9b4ff);box-shadow:0 0 12px var(--c,#c9b4ff),0 0 24px var(--c,#c9b4ff)}
.tcard .orbit i:nth-child(2){--t:11s;--c:#7ef0ff;--s:4px;animation-direction:reverse;inset:18px}
.tcard .orbit i:nth-child(3){--t:5s;--c:#fff;--s:3px;inset:-14px}
.tcard .orbit i:nth-child(4){--t:15s;--c:#7b5cff;--s:6px;inset:34px}
.tcard.command .badge-tag{position:absolute;top:16px;right:16px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#fff;padding:5px 10px;border-radius:99px;background:linear-gradient(90deg,#7b5cff,#2f6bff);box-shadow:0 0 16px rgba(123,92,255,.6)}
.tcard.command .tlevel{background:linear-gradient(90deg,#fff,#c9b4ff,#7ef0ff,#fff);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:namesweep 5s linear infinite}
.tcard.command .tbtn{border-color:#7b5cff;background:linear-gradient(90deg,#7b5cff,#2f6bff);color:#fff;box-shadow:0 0 28px rgba(123,92,255,.5)}
@media (max-width:980px){.tcard.command{transform:none}}
/* Founding: the crown jewel. Starfield, rotating aurora ring, sheen */
.fcrest{position:relative;isolation:isolate}
.fcrest .stars{position:absolute;inset:0;z-index:-1;pointer-events:none}
.fcrest .aurora{position:absolute;left:-10%;top:50%;width:520px;height:520px;margin-top:-260px;border-radius:50%;z-index:-1;background:conic-gradient(from var(--a,0deg),transparent,rgba(123,92,255,.45),rgba(126,240,255,.35),transparent 40%,rgba(201,180,255,.35),transparent 75%);filter:blur(40px);animation:cone 10s linear infinite;pointer-events:none}
.fbadge .ring{position:absolute;inset:-8%;border-radius:50%;border:1px solid rgba(201,180,255,.35);animation:spin2 30s linear infinite}
.fbadge .ring::before{content:"";position:absolute;left:50%;top:-4px;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 14px #fff,0 0 30px #c9b4ff}
.fbadge .ring.r2{inset:-18%;border-style:dashed;border-color:rgba(126,240,255,.25);animation-duration:46s;animation-direction:reverse}
.fbadge .ring.r2::before{background:#7ef0ff;box-shadow:0 0 14px #7ef0ff}
@media (prefers-reduced-motion:reduce){.tcard.command,.tcard .orbit i,.tcard.command .holo,.tcard.overdrive .scan,.fcrest .aurora,.fbadge .ring,.tcard.command .tlevel{animation:none!important}}
.thead .d1 .ln{display:block;overflow:hidden}
.thead .d1 .ln span{display:block;transform:translateY(110%);animation:rise .9s cubic-bezier(.2,.8,.2,1) forwards}
.thead .d1 .ln:nth-child(2) span{animation-delay:.12s}
@media (prefers-reduced-motion:reduce){.thead .d1 .ln span{transform:none;animation:none}}

:root[data-theme="light"] .tcard:not(.command) .tprev{background:#fff}
:root[data-theme="light"] .tcard:not(.command) .tav{background:#e3e9f6;color:#3a3e47;border-color:#c4c8d2}
:root[data-theme="light"] .tcard:not(.command) .n-uplink{color:#1f4fe0}
:root[data-theme="light"] .tcard:not(.command) .n-overdrive{background-image:linear-gradient(90deg,#0a6f8a,#1f4fe0,#0a6f8a)}