@import url('item-style.css');

header.hero{
  position:relative;z-index:1;
  text-align:center;
  padding:80px 20px 60px;
}
.hero-logo{
  width:96px;height:96px;image-rendering:pixelated;
  filter:drop-shadow(0 0 30px var(--accent-glow));
  animation:float 5s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.hero h1{font-size:44px;font-weight:800;margin-top:22px;letter-spacing:-1px;}
.hero h1 .glow{color:var(--accent);text-shadow:0 0 24px var(--accent-glow);}
.hero p{color:var(--text-dim);margin-top:12px;font-size:15px;}
.server-ip{
  display:inline-flex;align-items:center;gap:10px;
  margin-top:22px;padding:10px 18px;
  background:var(--card);border:1px solid var(--card-border);
  border-radius:999px;font-size:14px;color:var(--accent);
  cursor:pointer;transition:border-color .2s;
}
.server-ip:hover{border-color:var(--accent-dim);}

.section{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:70px 6vw 10px;}
.section-head{text-align:center;margin-bottom:38px;}
.eyebrow{font-size:11px;letter-spacing:3px;color:var(--accent);text-transform:uppercase;font-weight:700;margin-bottom:10px;}
.section-head h2{font-size:28px;font-weight:800;}
.section-head p{color:var(--text-dim);margin-top:8px;font-size:14px;}

.ranks-grid, .shards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}

.rank-card{
  background:var(--card);border:1px solid var(--card-border);border-radius:16px;
  padding:30px 26px 26px;position:relative;overflow:hidden;
  transition:transform .25s, border-color .25s, box-shadow .25s;
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
}
.rank-card:hover{transform:translateY(-6px);border-color:var(--card-border-hover);box-shadow:0 20px 40px rgba(0,0,0,0.4);}
.rank-card.featured{border-color:var(--accent-dim);box-shadow:0 0 0 1px var(--accent-dim), 0 20px 50px rgba(147,255,114,0.08);}
.rank-card.featured::before{
  content:"MOST POPULAR";position:absolute;top:14px;right:-34px;
  background:var(--accent);color:#08260a;font-size:10px;font-weight:800;letter-spacing:1px;
  padding:5px 40px;transform:rotate(38deg);
}
.rank-icon{
  width:46px;height:46px;border-radius:10px;
  background:linear-gradient(160deg, rgba(147,255,114,0.18), rgba(147,255,114,0.03));
  border:1px solid var(--card-border);display:flex;align-items:center;justify-content:center;margin-bottom:18px;
}
.rank-card h3{font-size:20px;font-weight:800;}
.rank-card h3 .plus{color:var(--accent);}
.rank-perks{list-style:none;margin:18px 0 24px;flex-grow:1;}
.rank-perks li{
  font-size:13.5px;color:var(--text-dim);padding:7px 0;display:flex;align-items:center;gap:9px;
  border-bottom:1px dashed var(--card-border);
}
.rank-perks li:last-child{border-bottom:none;}
.rank-perks li svg{width:13px;height:13px;color:var(--accent);flex-shrink:0;}
.price-row{display:flex;align-items:baseline;gap:6px;margin-bottom:14px;}
.price-row .price{font-size:26px;font-weight:800;}
.price-row .period{color:var(--text-faint);font-size:12.5px;}
.card-buy-btn{
  width:100%;padding:12px;border-radius:9px;border:1px solid var(--card-border-hover);
  background:transparent;color:var(--text);font-weight:700;font-size:13.5px;text-align:center;
}
.rank-card:hover .card-buy-btn{background:var(--accent);border-color:var(--accent);color:#08260a;}
.rank-card.featured .card-buy-btn{background:var(--accent);border-color:var(--accent);color:#08260a;}

.shard-card{
  background:var(--card);border:1px solid var(--card-border);border-radius:16px;
  padding:26px 20px;text-align:center;position:relative;transition:transform .25s, border-color .25s;
  text-decoration:none;color:inherit;
}
.shard-card:hover{transform:translateY(-6px);border-color:var(--card-border-hover);}
.bonus-tag{
  position:absolute;top:14px;right:14px;background:rgba(147,255,114,0.15);color:var(--accent);
  font-size:11px;font-weight:800;padding:3px 8px;border-radius:6px;border:1px solid rgba(147,255,114,0.3);
}
.shard-visual{width:78px;height:78px;margin:6px auto 14px;display:flex;align-items:center;justify-content:center;}
.shard-visual svg{filter:drop-shadow(0 0 14px var(--accent-glow));}
.shard-amount{font-size:18px;font-weight:800;color:var(--accent);}
.shard-strike{color:var(--text-faint);text-decoration:line-through;font-size:12px;margin-right:6px;}
.shard-price{margin:16px 0 14px;font-size:15px;color:var(--text-dim);font-weight:600;}

.why-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:16px;}
.why-card{background:var(--bg-alt);border:1px solid var(--card-border);border-radius:14px;padding:22px;}
.why-card svg{width:20px;height:20px;color:var(--accent);margin-bottom:12px;}
.why-card h4{font-size:14.5px;font-weight:700;margin-bottom:6px;}
.why-card p{font-size:12.5px;color:var(--text-dim);line-height:1.5;}

.empty-state{text-align:center;color:var(--text-faint);padding:30px;font-size:13.5px;}
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  background:var(--card);border:1px solid var(--card-border-hover);color:var(--text);
  padding:12px 20px;border-radius:10px;font-size:13.5px;z-index:100;
  box-shadow:0 10px 30px rgba(0,0,0,0.5);
}

@media (max-width: 880px){
  .ranks-grid, .shards-grid, .why-row{grid-template-columns:1fr;}
  .hero h1{font-size:32px;}
}