/* Page-specific styles for the main ranking page (index) */

.hero{
  background-image:
    linear-gradient(180deg, rgba(10,22,38,.92), rgba(10,22,38,.88) 55%, rgba(15,32,56,.95)),
    url('../images/hero-antarctica.jpg');
  background-size:cover;
  background-position:center 60%;
}

.jump-nav{display:flex; flex-wrap:wrap; gap:.6rem 1rem; margin-top:1.8rem}
.jump-nav a{font-size:.82rem; color:#cddbe9; border:1px solid rgba(255,255,255,.25); border-radius:999px; padding:.4em .9em}
.jump-nav a:hover{background:rgba(255,255,255,.08); text-decoration:none; color:#fff}

.rating-section{padding-top:3rem}

.praise-complain{display:grid; grid-template-columns:1fr 1fr; gap:1.5rem}
@media (max-width:700px){.praise-complain{grid-template-columns:1fr}}
.pc-card{padding:1.5rem 1.7rem}
.pc-card h3{display:flex; align-items:center; gap:.5em; font-size:1.05rem}
.pc-card.praise h3{color:var(--green)}
.pc-card.complain h3{color:var(--red)}
.pc-card ul{list-style:none; margin:.9rem 0 0; padding:0; display:flex; flex-direction:column; gap:.65rem}
.pc-card li{display:flex; gap:.6em; align-items:flex-start; font-size:.92rem}
.pc-card .icon{margin-top:.2em; flex:none}
.pc-card.praise .icon{color:var(--green)}
.pc-card.complain .icon{color:var(--red)}

.landing-compare{display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:1.6rem}
@media (max-width:700px){.landing-compare{grid-template-columns:1fr}}
.landing-col{padding:1.6rem 1.8rem}
.landing-col h3{font-size:1.05rem}
.landing-col ul{margin:.8rem 0 0; padding-left:1.1rem}
.landing-col li{font-size:.92rem; margin-bottom:.45rem}