/* ===== Subpage layout (about / terms / privacy / contact / categories) ===== */
.page-hero{
  padding:80px 0 50px;
  text-align:center;
  background:
    linear-gradient(180deg,rgba(11,13,18,.85),rgba(11,13,18,.95)),
    url("../assets/images/mangapark-hero-bg.png") center/cover no-repeat,
    var(--bg);
  border-bottom:1px solid var(--line);
}
.page-hero h1{
  font-size:clamp(2rem,4.5vw,3rem);margin:0 0 12px;letter-spacing:-.02em;
  background:linear-gradient(135deg,#fff,#ffd2c2);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.page-hero p{color:var(--muted);max-width:680px;margin:0 auto;font-size:1.05rem}
.breadcrumb{margin:0 0 14px;color:var(--muted);font-size:.9rem}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--primary-2)}

.page-body{padding:60px 0 80px}
.page-body .container{max-width:880px}
.page-body h2{font-size:1.5rem;margin:36px 0 12px;color:var(--text)}
.page-body h3{font-size:1.15rem;margin:24px 0 10px;color:var(--accent)}
.page-body p,.page-body li{color:#cdd3e0}
.page-body ul,.page-body ol{padding-left:22px}
.page-body li{margin:6px 0}
.page-body a{color:var(--primary-2);text-decoration:underline}
.page-body strong{color:var(--text)}
.page-body .updated{color:var(--muted);font-size:.88rem;font-style:italic}

/* Cards used by categories pages */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px}
.cat-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;transition:.2s;
}
.cat-card:hover{transform:translateY(-3px);border-color:var(--primary)}
.cat-card h4{margin:0 0 6px;font-size:1.05rem}
.cat-card p{margin:0;color:var(--muted);font-size:.9rem}
.cat-card .meta{display:inline-block;margin-top:10px;font-size:.8rem;color:var(--accent)}

/* Contact form */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;margin-top:24px}
.contact-info p{margin:8px 0;color:#cdd3e0}
.contact-info .ico{display:inline-block;width:24px}
.contact-form label{display:block;color:var(--muted);font-size:.88rem;margin:14px 0 6px}
.contact-form input,
.contact-form textarea{
  width:100%;padding:12px 14px;background:var(--card);border:1px solid var(--line);
  border-radius:10px;color:var(--text);font:inherit;outline:none;transition:.2s;
}
.contact-form input:focus,
.contact-form textarea:focus{border-color:var(--primary)}
.contact-form textarea{min-height:140px;resize:vertical}
.contact-form button{margin-top:18px}

@media (max-width:760px){
  .cat-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr;gap:24px}
}