/* Hunter Protocol page. Builds on /styles.css (nav, footer, buttons, fonts, FAQ). */
:root{--tick:0px}
body.hp{background:radial-gradient(80% 50% at 80% 0%,rgba(62,232,255,.08),transparent 60%),radial-gradient(70% 40% at 0% 30%,rgba(112,255,68,.06),transparent 60%),var(--bg)}
.hp main{position:relative;z-index:3}
.hp em{font-style:normal;color:var(--green);text-shadow:0 0 24px rgba(112,255,68,.45)}
.hp .mag{color:var(--mag)}.hp .grn{color:var(--green)}
.hp a:not(.btn):not(.brand):not(.nav-play) {color:var(--cyan)}
.hp #site-nav a,.hp .foot-links a{color:var(--dim)}
.hp #site-nav a[aria-current="page"]{color:var(--green)}

.hp-hero{padding:calc(var(--nav) + 64px) 0 40px}
.hp-title{font:400 clamp(44px,8vw,112px)/.92 var(--brush);text-transform:uppercase;margin:4px 0 10px}
.hp-slogan{font:700 clamp(20px,2.6vw,30px) var(--hud);letter-spacing:.3em;color:var(--cyan);margin:0 0 28px}
.hp-lede{max-width:760px}
.hp-lede p{color:var(--dim);margin:0 0 14px}
.hp-shout{font:700 clamp(18px,2.2vw,24px) var(--hud);letter-spacing:.14em;color:var(--ink)!important;margin:20px 0 8px!important}
.hp-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.tag{display:inline-block;padding:5px 10px;font:700 12px var(--hud);letter-spacing:.18em;color:var(--cyan);border:1px solid rgba(62,232,255,.45);background:rgba(62,232,255,.06)}
.tag-amber{color:var(--amber);border-color:rgba(255,178,62,.5);background:rgba(255,178,62,.07)}
.hp-status{display:flex;gap:14px;align-items:flex-start;max-width:760px;margin:30px 0 26px;padding:16px 18px;border:1px solid rgba(255,178,62,.45);background:rgba(255,178,62,.06)}
.hp-status b{font:700 13px var(--hud);letter-spacing:.2em;color:var(--amber);padding-top:2px;flex:none}
.hp-status span{color:var(--ink);font-size:15px}
.hp-toc{display:flex;flex-wrap:wrap;gap:8px 18px;font:700 13px var(--hud);letter-spacing:.14em}
.hp .hp-toc a{color:var(--dim)}.hp .hp-toc a:hover{color:var(--green)}

.hp-sec{padding:64px 0 24px;border-top:1px solid rgba(62,232,255,.12);scroll-margin-top:calc(var(--nav) + 8px)}
.hp-sec h2{margin-bottom:20px}
.hp-num{font:700 13px var(--hud);letter-spacing:.26em;color:var(--cyan);margin:0 0 10px}
.hp-sec>p{max-width:820px;color:var(--dim)}
.hp-intro{color:var(--ink)!important;font-size:18px}
.hp-callout{font:700 17px var(--hud);letter-spacing:.12em;color:var(--green)!important;text-transform:uppercase}

.hp-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:24px 0}
.hp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin:20px 0}
.card{position:relative;padding:22px 20px;background:var(--panel);border:1px solid var(--line);min-width:0}
.card h3{font:700 22px var(--hud);letter-spacing:.12em;margin:0 0 10px;color:var(--ink);line-height:1.15}
.card p{color:var(--dim);margin:0 0 10px}
.list-cards .card h3{font-size:17px;color:var(--cyan)}
.state{display:inline-block;margin:6px 0 0!important;padding:4px 9px;font:700 12px var(--hud);letter-spacing:.18em;color:var(--amber)!important;border:1px solid rgba(255,178,62,.5)}
.state-live{color:var(--green)!important;border-color:rgba(112,255,68,.55)}

.tier ul,.hp-list{margin:0 0 12px;padding:0;list-style:none}
.tier li,.hp-list li{position:relative;padding:6px 0 6px 20px;color:var(--ink);border-bottom:1px solid rgba(255,255,255,.05)}
.tier li:before,.hp-list li:before{content:"";position:absolute;left:2px;top:15px;width:7px;height:7px;background:var(--green);box-shadow:0 0 8px var(--green)}
.hp-list.cols{columns:2;column-gap:40px;max-width:900px}.hp-list.cols li{break-inside:avoid}
.tier-req{font:700 13px var(--hud);letter-spacing:.16em;color:var(--cyan)!important;margin:0 0 6px!important}
.tier-sub{color:var(--mute)!important;font-size:14px}
.tier h3{font-size:26px}
.tier-hunter{border-color:rgba(62,232,255,.5);box-shadow:0 0 30px rgba(62,232,255,.08)}
.tier-vip{border-color:rgba(112,255,68,.55);box-shadow:0 0 34px rgba(112,255,68,.1)}
.tier-vip h3{color:var(--green)}

.hp-box{max-width:900px;margin:18px 0;padding:20px 22px;border-left:3px solid var(--cyan);background:rgba(62,232,255,.05)}
.hp-box h3{font:700 16px var(--hud);letter-spacing:.2em;color:var(--cyan);margin:0 0 12px}
.hp-box p{color:var(--dim);margin:0 0 10px}.hp-box p:last-child{margin-bottom:0}
.hp-box strong{color:var(--ink)}
.hp-box.warn{border-left-color:var(--amber);background:rgba(255,178,62,.05)}
.example{list-style:none;padding:0;margin:4px 0 14px;display:flex;flex-wrap:wrap;gap:10px}
.example li{padding:8px 12px;border:1px solid var(--line);color:var(--ink);font-size:15px}
.example b{font:700 18px var(--hud);color:var(--green);margin-right:6px}

.alloc-bar{display:flex;height:46px;margin:22px 0 4px;font:700 18px var(--hud);letter-spacing:.1em;color:#061009;overflow:hidden}
.alloc-bar span{display:flex;align-items:center;justify-content:center;min-width:0}
.a-hunt{background:var(--green);box-shadow:0 0 24px rgba(112,255,68,.4)}
.a-kol{background:var(--cyan)}
.a-ops{background:var(--purple);color:#fff}
.alloc .pct{font:700 44px/1 var(--hud);margin:0 0 8px!important}
.a-hunt-card{border-top:3px solid var(--green)}.a-hunt-card .pct{color:var(--green)!important}
.a-kol-card{border-top:3px solid var(--cyan)}.a-kol-card .pct{color:var(--cyan)!important}
.a-ops-card{border-top:3px solid var(--purple)}.a-ops-card .pct{color:var(--purple)!important}

.roadmap{list-style:none;padding:0;margin:24px 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;counter-reset:none}
.roadmap li{padding:20px 18px;border:1px solid var(--line);background:var(--panel);min-width:0}
.roadmap li:first-child{border-color:rgba(112,255,68,.55)}
.roadmap .ph{font:700 13px var(--hud);letter-spacing:.22em;color:var(--green);margin:0 0 6px}
.roadmap h3{font:700 19px var(--hud);letter-spacing:.1em;margin:0 0 8px;line-height:1.15}
.roadmap p{color:var(--dim);margin:0}

.hp-vision{padding-bottom:70px}
.hp-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}

@media (max-width:900px){
  .hp-grid3,.roadmap{grid-template-columns:1fr}
  .hp-list.cols{columns:1}
  .hp-hero{padding-top:calc(var(--nav) + 40px)}
}
@media (max-width:560px){
  .hp-sec{padding-top:48px}
  .hp-status{flex-direction:column;gap:6px}
  .alloc-bar{font-size:15px;height:40px}
  .card{padding:18px 16px}
  .hp-box{padding:16px}
  .hp-cta .btn{width:100%;justify-content:center}
  .hp-slogan{letter-spacing:.2em}
}
@media (max-width:374px){
  .hp-sec h2{font-size:34px}
}