/* Fan Rating teaser site. Dark is home: night pitch ground, one electric lime, condensed scoreboard headlines. */
:root{
  --ground:#131416; --raised:#1C1F21; --sunken:#0C0D0E; --line:#2C3133;
  --ink:#FFFFFF; --muted:#A7AFB0; --lime:#96FF3A; --lime-2:#B8FF7A; --teal:#05E2B2;
  --blue:#0077FF; --blue-text:#6FA8FF; --orange:#FBAC18; --on-lime:#131416;
  --display:"Teko","Barlow Condensed","Arial Narrow",sans-serif;
  --sans:"Nunito Sans","Helvetica Neue",Arial,sans-serif;
  --radius:16px; --wrap:1180px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--lime)}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:clamp(16px,4vw,32px)}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:.95;margin:0;text-wrap:balance}
h1{font-size:clamp(64px,10vw,132px);letter-spacing:.005em}
h2{font-size:clamp(44px,6vw,76px);margin-bottom:18px}
h3{font-size:30px;font-weight:500}
p{margin:0 0 14px}
.hl{color:var(--lime)}
.eyebrow{font-weight:800;font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--teal);margin-bottom:14px}
.eyebrow--dark{color:var(--on-lime)}
.lead{font-size:clamp(18px,2vw,21px);color:#C9CFD0;max-width:60ch}
.narrow{max-width:56ch}
.note{margin-top:28px;color:var(--muted);font-weight:700}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:15px 28px;font-weight:800;font-size:16px;text-decoration:none;border:2px solid transparent;cursor:pointer;font-family:inherit;transition:transform .15s ease,box-shadow .2s ease}
.btn:hover{transform:translateY(-2px)}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.btn--lime{background:var(--lime);color:var(--on-lime);box-shadow:0 0 0 rgba(150,255,58,0)}
.btn--lime:hover{box-shadow:0 0 28px rgba(150,255,58,.45)}
.btn--ghost{border-color:#fff;color:#fff}
.btn--ink{background:var(--ground);color:var(--lime)}
.btn--sm{padding:10px 18px;font-size:14px}

/* nav */
.nav{position:sticky;top:0;z-index:20;background:rgba(19,20,22,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(44,49,51,.6);padding-top:env(safe-area-inset-top,0px)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:20px;height:72px}
.nav__logo img{height:36px;width:auto}
.nav__links{display:flex;gap:28px}
.nav__links a{color:#C9CFD0;text-decoration:none;font-weight:700;font-size:15px}
.nav__links a:hover{color:var(--lime)}
.nav__right{display:flex;align-items:center;gap:16px}
.nav__ey{height:34px;width:auto}
.nav__toggle{display:none;background:none;border:0;width:40px;height:40px;position:relative;cursor:pointer}
.nav__toggle span{position:absolute;left:9px;right:9px;height:2px;background:#fff;transition:transform .2s}
.nav__toggle span:first-child{top:15px}.nav__toggle span:last-child{top:23px}
.nav.is-open .nav__toggle span:first-child{transform:translateY(4px) rotate(45deg)}
.nav.is-open .nav__toggle span:last-child{transform:translateY(-4px) rotate(-45deg)}

/* hero */
.hero{position:relative;overflow:hidden;padding:clamp(56px,8vw,110px) 0 40px}
.hero__bg{position:absolute;inset:0 0 0 30%;opacity:.95}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ground) 0%,rgba(19,20,22,.85) 25%,rgba(19,20,22,.1) 60%,rgba(19,20,22,.2) 100%),linear-gradient(0deg,var(--ground) 0%,transparent 30%)}
.hero__inner{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:end;min-height:560px}
.hero__copy .lead{margin-top:22px}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.hero__meta{display:flex;flex-wrap:wrap;gap:34px;margin-top:44px}
.hero__meta b{display:block;font-family:var(--display);font-size:46px;font-weight:600;line-height:1;color:var(--lime)}
.hero__meta span{color:var(--muted);font-size:14px;font-weight:700}
.hero__score{justify-self:end;align-self:end}
.score{width:340px;max-width:100%;background:rgba(28,31,33,.92);border:1px solid var(--line);border-radius:22px;padding:20px;box-shadow:0 0 40px rgba(150,255,58,.18)}
.score__top{display:flex;justify-content:space-between;font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
.score__live{color:var(--lime)}
.score__match{font-family:var(--display);font-size:38px;font-weight:600;line-height:1;margin:10px 0 14px}
.score__row{display:flex;align-items:center;gap:14px}
.score__row>div:first-child{flex:1;min-width:0}
.score__name{font-weight:800}
.score__sub{font-size:12px;color:var(--muted)}
.score__val{font-weight:900;font-size:40px;color:var(--lime);line-height:1}
.bars{display:flex;align-items:flex-end;gap:4px;height:40px}
.bars i{width:5px;border-radius:3px;background:var(--lime)}
.bars i:nth-child(1){height:20%}.bars i:nth-child(2){height:28%}.bars i:nth-child(3){height:36%}.bars i:nth-child(4){height:44%}.bars i:nth-child(5){height:52%}.bars i:nth-child(6){height:60%}.bars i:nth-child(7){height:68%}.bars i:nth-child(8){height:76%}.bars i:nth-child(9){height:88%}.bars i:nth-child(10){height:100%}
.bars i.off{background:var(--line)}
.partners-strip{position:relative;display:flex;flex-wrap:wrap;gap:24px 56px;align-items:center;margin-top:56px;padding-top:26px;border-top:1px solid var(--line)}
.partners-strip>div{display:flex;align-items:center;gap:18px}
.partners-strip span{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.partners-strip img{width:auto}

/* sections */
.section{padding:clamp(72px,10vw,128px) 0;scroll-margin-top:72px}
.section--alt{background:var(--sunken);border-block:1px solid #1a1d1f}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.split--top{align-items:start}
.solution{background:linear-gradient(180deg,var(--lime) 0%,var(--teal) 100%);color:var(--on-lime);border-radius:32px;padding:clamp(28px,4vw,48px)}
.solution h3{font-size:clamp(34px,4vw,48px);font-weight:600;margin-bottom:16px}
.solution p{font-size:18px}

.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:40px;counter-reset:s}
.step{background:var(--raised);border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;min-width:0;transition:border-color .2s,transform .2s}
.step:hover{border-color:var(--lime);transform:translateY(-4px)}
.step__n{font-family:var(--display);font-size:22px;color:var(--lime);font-weight:600}
.step h3{margin:6px 0 10px;font-size:36px}
.step p{color:#C9CFD0;font-size:16px;margin:0}
.step b{color:#fff}

.eco{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:18px;margin-top:40px}
.eco__card{background:var(--raised);border:1px solid var(--line);border-radius:var(--radius);padding:24px;min-width:0}
.eco__card h3{margin:16px 0 10px;font-size:30px}
.eco__card p{color:#C9CFD0;font-size:15.5px;margin:0}
.eco__card--fanx{background:var(--lime);color:var(--on-lime);border-color:var(--lime)}
.eco__card--fanx p{color:var(--on-lime)}
.chip{display:inline-block;border-radius:999px;padding:4px 12px;font-size:12px;font-weight:900;letter-spacing:.06em}
.chip--lime{background:var(--on-lime);color:var(--lime)}
.chip--ink{background:#fff;color:var(--on-lime)}
.chip--blue{background:var(--blue);color:#fff}
.chip--orange{background:var(--orange);color:var(--on-lime)}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:18px}
.facts>div{border-top:2px solid var(--lime);padding-top:14px}
.facts b{display:block;font-family:var(--display);font-size:44px;font-weight:600;line-height:1}
.facts span{color:var(--muted);font-size:14.5px;font-weight:700}

.offers{display:grid;gap:14px}
.offers article{background:var(--raised);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px}
.offers h3{font-size:30px;margin-bottom:6px;color:var(--lime)}
.offers p{margin:0;color:#C9CFD0}

/* roadmap */
.road{list-style:none;padding:0;margin:48px 0 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;position:relative}
.road::before{content:"";position:absolute;left:0;right:0;top:9px;height:2px;background:linear-gradient(90deg,var(--lime),var(--teal) 60%,var(--line))}
.road__item{position:relative;padding:36px 18px 0 0;min-width:0}
.road__item::before{content:"";position:absolute;top:0;left:0;width:20px;height:20px;border-radius:50%;background:var(--ground);border:3px solid var(--teal)}
.road__item.is-next::before{background:var(--lime);border-color:var(--lime);box-shadow:0 0 0 6px rgba(150,255,58,.18),0 0 24px rgba(150,255,58,.6)}
.road__date{display:block;font-weight:900;font-size:14px;letter-spacing:.06em;color:var(--lime);text-transform:uppercase}
.road__item h3{font-size:34px;margin:6px 0 8px}
.road__item p{color:#C9CFD0;font-size:15.5px;margin:0}
.countdown{margin-top:44px;display:inline-flex;align-items:baseline;gap:14px;background:var(--raised);border:1px solid var(--line);border-radius:999px;padding:12px 24px}
.countdown span{color:var(--muted);font-weight:800;font-size:14px;letter-spacing:.1em;text-transform:uppercase}
.countdown b{font-family:var(--display);font-size:32px;font-weight:600;color:var(--lime);font-variant-numeric:tabular-nums}

/* team */
.team__label{font-size:28px;margin:44px 0 18px;color:var(--teal);font-weight:500}
.team{display:flex;flex-wrap:wrap;justify-content:center;gap:32px 24px;margin-top:44px}
.team .member{width:calc((100% - 4*24px)/5)}
.member{margin:0}
.member img{width:100%;aspect-ratio:220/300;object-fit:cover;object-position:top;border-radius:18px;filter:grayscale(1) contrast(1.05);transition:filter .3s,box-shadow .3s;background:var(--raised)}
.member:hover img{filter:grayscale(0);box-shadow:0 0 0 2px var(--lime),0 0 28px rgba(150,255,58,.35)}
.member figcaption{margin-top:12px}
.member b{display:block;font-size:17px;line-height:1.25}
.member span{display:block;color:var(--lime-2);font-size:13.5px;font-weight:700;margin-top:2px}

/* join */
.join{background:linear-gradient(180deg,var(--lime) 0%,var(--teal) 100%);color:var(--on-lime)}
.join__inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.join p{font-size:19px}

.contacts{display:grid;gap:16px}
.contact{display:block;background:var(--ground);color:#fff;text-decoration:none;border-radius:24px;padding:26px 28px;transition:transform .15s,box-shadow .2s}
.contact:hover{transform:translateY(-3px);box-shadow:0 12px 36px rgba(19,20,22,.35)}
.contact span{display:block;font-size:13px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--teal)}
.contact b{display:block;font-family:var(--display);font-weight:600;font-size:clamp(30px,3.6vw,44px);line-height:1.05;color:var(--lime);margin-top:6px;overflow-wrap:anywhere}

/* app tour */
.tour__tabs{display:flex;flex-wrap:wrap;gap:8px;margin:36px 0 28px}
.tour__tab{font:inherit;font-weight:800;font-size:14.5px;color:#C9CFD0;background:var(--raised);border:1px solid var(--line);border-radius:999px;padding:9px 18px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.tour__tab:hover{border-color:var(--lime);color:#fff}
.tour__tab.is-on{background:var(--lime);border-color:var(--lime);color:var(--on-lime)}
.tour{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:clamp(32px,6vw,80px);align-items:start}
.tour__phone{position:sticky;top:96px}
.phone{position:relative;border-radius:46px;padding:10px;background:#0A0B0C;box-shadow:0 0 0 1px #2C3133,0 30px 80px rgba(0,0,0,.5),0 0 60px rgba(150,255,58,.08)}
.phone img{width:100%;height:auto;border-radius:36px;transition:opacity .25s}
.phone__spots{position:absolute;inset:10px}
.spot{position:absolute;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;border:2px solid var(--on-lime);background:var(--lime);color:var(--on-lime);font:900 14px/1 var(--sans);cursor:pointer;display:grid;place-items:center;padding:0;box-shadow:0 0 0 0 rgba(150,255,58,.6);animation:pulse 2.4s infinite}
.spot:hover,.spot.is-on{background:#fff;animation:none;box-shadow:0 0 0 6px rgba(255,255,255,.25)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(150,255,58,.55)}70%{box-shadow:0 0 0 12px rgba(150,255,58,0)}100%{box-shadow:0 0 0 0 rgba(150,255,58,0)}}
.tour__nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:18px;color:var(--muted);font-weight:800;font-size:14px}
.tour__arrow{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--raised);color:#fff;font-size:18px;cursor:pointer}
.tour__arrow:hover{border-color:var(--lime);color:var(--lime)}
.tour__info h3{font-size:clamp(34px,4vw,48px);font-weight:600}
.tour__text{color:#C9CFD0;font-size:18px;margin-top:12px}
.tour__list{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:10px;counter-reset:t}
.tour__item{display:grid;grid-template-columns:30px 1fr;gap:14px;align-items:start;width:100%;text-align:left;font:inherit;color:inherit;background:var(--raised);border:1px solid var(--line);border-radius:14px;padding:14px 16px;cursor:pointer;transition:border-color .2s,background .2s}
.tour__item:hover{border-color:#4a5356}
.tour__item.is-on{border-color:var(--lime);background:#1f2420}
.tour__n{width:30px;height:30px;border-radius:50%;background:var(--line);color:#fff;display:grid;place-items:center;font-weight:900;font-size:14px}
.tour__item.is-on .tour__n{background:var(--lime);color:var(--on-lime)}
.tour__item .chip{margin-bottom:2px}
.tour__item p{margin:6px 0 0;color:#C9CFD0;font-size:15.5px;line-height:1.5;display:none}
.tour__item.is-on p{display:block}
.tour__note{margin-top:18px;color:#7E8789;font-size:13px}
.chip--teal{background:var(--teal);color:var(--on-lime)}
.chip--ink2{background:#fff;color:var(--on-lime)}

/* tokenomics */
.alloc{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:clamp(32px,6vw,72px);align-items:center;margin-top:44px}
.donut{position:relative;max-width:420px;width:100%}
.donut__svg{width:100%;height:auto;display:block;overflow:visible}
.seg{cursor:pointer;transition:opacity .2s,transform .2s;transform-origin:150px 150px}
.alloc.has-sel .seg{opacity:.28}
.alloc.has-sel .seg.is-on{opacity:1;transform:scale(1.04)}
.donut__c{position:absolute;inset:30%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.donut__c b{font-family:var(--display);font-weight:600;font-size:clamp(46px,6vw,64px);line-height:.9;color:var(--lime)}
.donut__c span{font-weight:800;font-size:13px;color:#fff;margin-top:4px}
.donut__c em{font-style:normal;font-size:12px;color:var(--muted);margin-top:4px;line-height:1.35}
.alloc__list{list-style:none;padding:0;margin:0;display:grid;gap:4px}
.alloc__row{display:grid;grid-template-columns:14px 1fr auto;gap:14px;align-items:center;width:100%;font:inherit;color:#C9CFD0;background:none;border:0;border-bottom:1px solid var(--line);padding:11px 4px;cursor:pointer;text-align:left}
.alloc__row i{width:14px;height:14px;border-radius:4px}
.alloc__row b{font-family:var(--display);font-weight:600;font-size:28px;line-height:1;color:#fff}
.alloc__row:hover,.alloc__row.is-on{color:#fff}
.alloc__row.is-on{border-bottom-color:var(--lime)}
.alloc__row.is-on b{color:var(--lime)}
.facts--tok{margin-top:48px}
.tok__grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:18px;margin-top:56px}
.panel{background:var(--raised);border:1px solid var(--line);border-radius:24px;padding:clamp(22px,3vw,32px);min-width:0}
.panel h3{font-size:34px;font-weight:600}
.muted{color:var(--muted);font-size:15px;margin-top:8px}
.small{font-size:13.5px}
.supply{margin-top:18px}
.supply__svg{width:100%;height:auto;display:block}
.supply__svg .ax{fill:#8C9597;font:600 13px var(--sans)}
.supply__svg .lab{fill:#C9CFD0;font:700 14px var(--sans)}
.supply__svg .mk{fill:#fff;font:800 13px var(--sans)}
.loop{display:grid;gap:10px;margin:22px 0 18px}
.loop__step{border-radius:14px;padding:14px 16px;background:var(--ground);border:1px solid var(--line)}
.loop__step b{display:block;font-family:var(--display);font-weight:600;font-size:28px;line-height:1}
.loop__step span{font-size:13.5px;color:var(--muted);font-weight:700}
.loop__arrow{text-align:center;font-weight:800;font-size:13.5px;color:var(--lime);padding:2px 0}
.loop__arrow::before{content:"↓ ";}
.loop__split{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.loop__step--burn{border-color:var(--orange)}.loop__step--burn b{color:var(--orange)}
.loop__step--back{border-color:var(--lime)}.loop__step--back b{color:var(--lime)}
.omni{margin-top:56px;background:linear-gradient(135deg,#101a33 0%,var(--raised) 55%);border:1px solid var(--line);border-radius:28px;padding:clamp(24px,4vw,44px)}
.omni__head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,5vw,56px);align-items:center}
.omni__logos{display:flex;align-items:center;gap:20px}
.omni__logo{margin:0;display:flex;align-items:center;gap:12px}
.omni__logo figcaption{font-weight:900;font-size:30px;letter-spacing:-.01em}
.omni__logo img[src$=".png"]{height:44px;width:auto}
.omni__x{font-family:var(--display);font-size:40px;color:var(--muted)}
.omni h3{font-size:40px;font-weight:600}
.omni p{color:#C9CFD0;margin:10px 0 0}
.omni b{color:#fff}
.chains{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:32px}
.chain{background:rgba(19,20,22,.6);border:1px solid var(--line);border-radius:18px;padding:20px}
.chain--home{border-color:#2a4dff}
.chain h3{font-size:30px;margin:12px 0 6px}
.chain p{color:#C9CFD0;font-size:14.5px;margin:0}

/* footer */
.footer{padding:56px 0 36px;background:var(--sunken)}
.footer__inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:28px}
.footer__inner p{color:var(--muted);font-size:14px;margin-top:14px}
.footer__links{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start}
.footer__links a{color:#C9CFD0;text-decoration:none;font-weight:700}
.footer__links a:hover{color:var(--lime)}
.footer__legal{margin-top:36px;padding-top:22px;border-top:1px solid var(--line)}
.footer__legal p{color:#7E8789;font-size:12.5px;max-width:110ch}

/* reveal */
.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.is-in{opacity:1;transform:none}

/* responsive */
@media (max-width:1020px){
  .nav__links{display:none}
  .nav__toggle{display:block}
  .nav.is-open .nav__links{display:flex;flex-direction:column;gap:6px;position:absolute;top:72px;left:0;right:0;background:var(--ground);padding:16px clamp(16px,4vw,32px) 24px;border-bottom:1px solid var(--line)}
  .nav.is-open .nav__links a{padding:10px 0;font-size:18px}
  .steps,.eco,.chains{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tok__grid{grid-template-columns:1fr}
  .team .member{width:calc((100% - 3*24px)/4)}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .road{grid-template-columns:1fr;gap:28px}
  .road::before{left:9px;right:auto;top:0;bottom:0;width:2px;height:auto;background:linear-gradient(180deg,var(--lime),var(--teal) 60%,var(--line))}
  .road__item{padding:0 0 0 42px}
  .road__item::before{top:4px}
}
@media (max-width:820px){
  .hero__inner,.split,.join__inner{grid-template-columns:1fr}
  .hero__bg{inset:0;opacity:.45}
  .hero__score{justify-self:start}
  .nav__ey{display:none}
  .tour,.alloc,.omni__head{grid-template-columns:1fr}
  .tour__phone{position:static;max-width:340px;margin:0 auto}
  .donut{margin:0 auto;max-width:340px}
  .team .member{width:calc((100% - 2*24px)/3)}
}
@media (max-width:520px){
  .steps,.eco,.facts,.chains{grid-template-columns:1fr}
  .team{gap:24px 14px}
  .team .member{width:calc((100% - 2*14px)/3)}
  .member b{font-size:14px}
  .member span{font-size:12px}
  .spot{width:26px;height:26px;font-size:12px}
  .loop__split{grid-template-columns:1fr}
  .nav .btn--sm{display:none}
  .hero__meta{gap:22px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  .btn,.step,.member img{transition:none}
  .spot{animation:none}
}
@media (max-width:520px){.supply{overflow-x:auto;-webkit-overflow-scrolling:touch}.supply__svg{min-width:640px}.omni__logo figcaption{font-size:24px}}