/* ParallelOS — Tokenomics */
.tok-hero{position:relative;padding:calc(var(--nav-h) + 92px) 0 48px;overflow:hidden}
.tok-hero canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.4;z-index:0}
.tok-hero .wrap{position:relative;z-index:2}
.tok-head{display:grid;grid-template-columns:1.25fr 1fr;gap:54px;align-items:center}
@media(max-width:900px){.tok-head{grid-template-columns:1fr;gap:36px}}
.tok-head h1{font-size:clamp(38px,6vw,64px);margin:18px 0 18px}

/* token card */
.tok-card{border:1px solid var(--border-2);border-radius:20px;background:linear-gradient(180deg,var(--surface),var(--bg-2));padding:24px;position:relative;overflow:hidden}
.tok-card::before{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at 100% 0%,rgba(0,160,240,.12),transparent 60%);pointer-events:none}
.tok-card-h{display:flex;align-items:center;gap:14px;margin-bottom:20px;position:relative}
.tok-card-h .sym{width:52px;height:52px;border-radius:14px;background:var(--grad);display:grid;place-items:center;flex:0 0 auto;box-shadow:0 8px 26px -6px rgba(0,160,240,.6)}
.tok-card-h .sym img{width:30px;height:30px;filter:drop-shadow(0 0 6px rgba(255,255,255,.5))}
.tok-card-h .nm{font-family:var(--f-display);font-weight:700;font-size:20px;color:#fff;line-height:1.15}
.tok-card-h .sub{font-family:var(--f-mono);font-size:12px;color:var(--cyan);margin-top:2px}
.tok-rows{display:grid;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:12px;overflow:hidden;position:relative}
.tok-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 15px;background:var(--bg-2)}
.tok-row .k{font-size:13px;color:var(--text-dim)}
.tok-row .v{font-family:var(--f-mono);font-size:13px;color:#fff;display:flex;align-items:center;gap:9px}
.tok-row .copy{cursor:pointer;color:var(--text-faint);display:grid;place-items:center;transition:color .2s}
.tok-row .copy:hover{color:var(--cyan)}
.tok-row .copy svg{width:14px;height:14px}

/* supply band */
.supply-band{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:linear-gradient(180deg,var(--bg-2),var(--bg));position:relative;z-index:3}
.supply-row{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;padding:42px 0}
.supply-row>div{text-align:center;position:relative}
.supply-row>div:not(:last-child)::after{content:"";position:absolute;right:-15px;top:12%;height:76%;width:1px;background:var(--border)}
@media(max-width:680px){.supply-row{grid-template-columns:1fr 1fr;gap:34px 20px}.supply-row>div:nth-child(2)::after{display:none}}

/* utility grid */
.util-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
@media(max-width:980px){.util-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.util-grid{grid-template-columns:1fr}}
.util{border:1px solid var(--border);border-radius:16px;padding:26px 22px;background:linear-gradient(180deg,var(--surface),var(--bg-2));transition:border-color .3s,transform .3s}
.util:hover{border-color:rgba(0,229,255,.3);transform:translateY(-4px)}
.util .ui{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;background:var(--grad-soft);border:1px solid var(--border-2);color:var(--cyan);margin-bottom:16px}
.util .ui svg{width:22px;height:22px}
.util h4{font-family:var(--f-display);font-size:16px;margin-bottom:9px;color:#fff}
.util p{font-size:13px;color:var(--text-dim);margin:0;line-height:1.6}

/* allocation */
.alloc{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:center}
@media(max-width:880px){.alloc{grid-template-columns:1fr;gap:44px}}
.donut-wrap{position:relative;display:grid;place-items:center;min-height:340px}
.donut{width:300px;height:300px;border-radius:50%;position:relative;
  -webkit-mask:radial-gradient(circle,transparent 54%,#000 55%);mask:radial-gradient(circle,transparent 54%,#000 55%);
  transform:rotate(-90deg)}
.donut-center{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.donut-center .v{font-family:var(--f-display);font-weight:700;font-size:38px;color:#fff;line-height:1}
.donut-center .l{font-family:var(--f-mono);font-size:11px;color:var(--text-dim);letter-spacing:.12em;margin-top:6px}
.alloc-legend{display:grid;gap:2px}
.leg{display:flex;align-items:center;gap:14px;padding:13px 14px;border-radius:10px;transition:background .2s;cursor:default;border:1px solid transparent}
.leg:hover{background:var(--surface);border-color:var(--border)}
.leg .sw{width:11px;height:11px;border-radius:4px;flex:0 0 auto}
.leg .ln{flex:1;font-size:14.5px;color:var(--text)}
.leg .pc{font-family:var(--f-mono);font-weight:600;font-size:15px;color:#fff;text-align:right}
.leg .amt{font-family:var(--f-mono);font-size:11px;color:var(--text-faint);display:block;font-weight:400}

/* emissions / vesting schedule */
.vest{border:1px solid var(--border);border-radius:18px;background:linear-gradient(180deg,var(--surface),var(--bg-2));padding:30px;overflow:hidden}
.vest-legend{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:24px}
.vest-legend .vl{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-dim);font-family:var(--f-mono)}
.vest-legend .vl .sw{width:11px;height:11px;border-radius:3px}
.vest-chart{display:flex;align-items:flex-end;gap:10px;height:220px}
.vest-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:10px;height:100%;justify-content:flex-end}
.vest-bar{width:100%;max-width:54px;display:flex;flex-direction:column-reverse;border-radius:6px 6px 0 0;overflow:hidden;transition:height .9s cubic-bezier(.16,.8,.3,1)}
.vest-seg{width:100%}
.vest-x{font-family:var(--f-mono);font-size:11.5px;color:var(--text-faint)}
.vest-cap{font-family:var(--f-mono);font-size:11px;color:var(--text-dim);margin-top:14px;text-align:center}

/* flywheel */
.fly{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
@media(max-width:880px){.fly{grid-template-columns:1fr 1fr;gap:16px}}
@media(max-width:520px){.fly{grid-template-columns:1fr}}
.fly-step{border:1px solid var(--border);border-radius:16px;padding:26px 22px;background:linear-gradient(180deg,var(--surface),var(--bg-2));position:relative;margin-right:16px;z-index:2}
@media(max-width:880px){.fly-step{margin-right:0}}
.fly-step:last-child{margin-right:0}
.fly-step .fn{font-family:var(--f-mono);color:var(--cyan);font-size:13px;font-weight:700;margin-bottom:12px}
.fly-step h4{font-family:var(--f-display);font-size:18px;margin-bottom:9px;color:#fff}
.fly-step p{font-size:13.5px;color:var(--text-dim);margin:0;line-height:1.6}
.fly-step .fa{position:absolute;right:-12px;top:50%;transform:translateY(-50%);z-index:3;width:22px;height:22px;border-radius:50%;background:var(--bg);border:1px solid var(--border-2);display:grid;place-items:center;color:var(--cyan)}
.fly-step:last-child .fa{display:none}
@media(max-width:880px){.fly-step .fa{display:none}}
.fly-step .fa svg{width:12px;height:12px}