/* ============================================================
   pages.css — styling for Topweb service pages (dark theme)
   Matches brand: base #0076ce, black bg, Plus Jakarta Sans
   Scoped under .svc so it never clashes with the Ogency theme.
   ============================================================ */

/* banner heading as an SEO <h1>, styled to match the theme's page-header title */
.page-header .container h1 {
  margin: 0 0 0; font-size: 60px; letter-spacing: -3.6px; line-height: 1.05;
  color: #fff; font-weight: 700; word-wrap: break-word;
}
@media (max-width: 767px) {
  .page-header .container h1 { font-size: 40px; letter-spacing: -2px; }
}

.svc {
  background: #000; color: #b9c4d4;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.02rem; line-height: 1.8;
}
.svc * { box-sizing: border-box; }
.svc-container { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 22px; }
.svc-section { padding: clamp(56px, 8vw, 96px) 0; }
.svc-section--alt { background: #101010; }
.svc h2 { color: #fff; font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin: 0 0 .5em; }
.svc h3 { color: #fff; font-size: 1.2rem; font-weight: 700; margin: 0 0 .4em; }
.svc p { margin: 0 0 1.1rem; color: #9fb0c4; }
.svc a { color: #0076ce; }
.svc strong { color: #dbe4ef; }

.svc-eyebrow {
  display: inline-block; color: #0076ce; text-transform: uppercase;
  letter-spacing: .14em; font-weight: 700; font-size: .78rem; margin-bottom: 14px;
}
.svc-head { max-width: 760px; margin: 0 auto 48px; text-align: center; }
.svc-head p { font-size: 1.08rem; }
.svc-lead { font-size: 1.18rem; color: #cbd5e1; }
.svc-narrow { max-width: 820px; }

/* intro two-col */
.svc-intro { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: start; }
.svc-intro__media { border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); }
.svc-intro__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* feature / benefit cards */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.svc-grid--2 { grid-template-columns: repeat(2, 1fr); }
.svc-card {
  background: #101010; border: 1px solid rgba(255,255,255,.08); border-radius: 14px;
  padding: 28px; transition: transform .25s, border-color .25s;
}
.svc-card:hover { transform: translateY(-4px); border-color: #0076ce; }
.svc-ic {
  width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(0,118,206,.14); color: #0076ce; margin-bottom: 16px; font-size: 22px; font-weight: 800;
}
.svc-card p { margin: 0; font-size: .96rem; }

/* checklist */
.svc-list { display: grid; gap: 13px; margin: 22px 0 0; padding: 0; list-style: none; }
.svc-list li { display: flex; gap: 12px; align-items: flex-start; color: #cbd5e1; }
.svc-list .tick { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,118,206,.16); color: #0076ce; display: grid; place-items: center; font-size: .72rem; margin-top: 3px; }

/* steps */
.svc-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: step; }
.svc-step { position: relative; padding-top: 8px; }
.svc-step b { display: block; font-size: 2.2rem; font-weight: 800; color: rgba(0,118,206,.5); line-height: 1; margin-bottom: 10px; }
.svc-step h3 { font-size: 1.05rem; }
.svc-step p { font-size: .92rem; }

/* FAQ (native accordion, no JS) */
.svc-faq { max-width: 860px; margin: 0 auto; }
.svc-faq details { border: 1px solid rgba(255,255,255,.1); border-radius: 12px; margin-bottom: 14px; background: #101010; overflow: hidden; }
.svc-faq summary { cursor: pointer; list-style: none; padding: 20px 24px; font-weight: 700; color: #fff; font-size: 1.05rem; display: flex; justify-content: space-between; gap: 16px; }
.svc-faq summary::-webkit-details-marker { display: none; }
.svc-faq summary::after { content: "+"; color: #0076ce; font-size: 1.5rem; line-height: 1; transition: transform .2s; }
.svc-faq details[open] summary::after { transform: rotate(45deg); }
.svc-faq details > div { padding: 0 24px 20px; color: #9fb0c4; }

/* CTA */
.svc-cta { text-align: center; border-radius: 22px; padding: clamp(40px, 6vw, 72px) 24px;
  background: radial-gradient(700px 300px at 80% 0%, rgba(0,118,206,.35), transparent 60%), #101010; }
.svc-cta h2 { color: #fff; }
.svc-cta p { max-width: 600px; margin: 0 auto 26px; }
.svc-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.svc-btn { display: inline-block; padding: 15px 30px; border-radius: 999px; font-weight: 700; text-decoration: none; transition: .2s; font-size: .98rem; }
.svc-btn--primary { background: #0076ce; color: #fff; }
.svc-btn--primary:hover { background: #0076ce; color: #fff; opacity: .9; }
.svc-btn--ghost { border: 1.5px solid rgba(255,255,255,.25); color: #fff; }
.svc-btn--ghost:hover { border-color: #0076ce; color: #0076ce; }

/* related services */
.svc-related { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 8px; }
.svc-related a { display: inline-block; padding: 10px 18px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; color: #cbd5e1; text-decoration: none; font-size: .92rem; font-weight: 600; transition: .2s; }
.svc-related a:hover { border-color: #0076ce; color: #fff; background: rgba(0,118,206,.1); }

@media (max-width: 900px) {
  .svc-intro { grid-template-columns: 1fr; gap: 32px; }
  .svc-grid, .svc-grid--2 { grid-template-columns: 1fr 1fr; }
  .svc-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .svc-grid, .svc-grid--2, .svc-steps { grid-template-columns: 1fr; }
}

/* ============================================================
   Blog styles (index cards + article body) — dark theme
   ============================================================ */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.blog-card { background: #101010; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; overflow: hidden; transition: transform .25s, border-color .25s; display: flex; flex-direction: column; }
.blog-card:hover { transform: translateY(-5px); border-color: #0076ce; }
.blog-card__img { aspect-ratio: 16/10; overflow: hidden; background: #101010; }
.blog-card__img img { width: 100%; height: 100%; object-fit: cover; }
.blog-card__body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.blog-card .post-meta { font-size: .78rem; color: #0076ce; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; margin-bottom: 10px; }
.blog-card h3 { color: #fff; font-size: 1.12rem; line-height: 1.35; margin: 0 0 10px; }
.blog-card h3 a { color: #fff; text-decoration: none; }
.blog-card h3 a:hover { color: #0076ce; }
.blog-card p { font-size: .93rem; margin: 0 0 16px; }
.blog-card .more { margin-top: auto; color: #0076ce; font-weight: 700; font-size: .9rem; text-decoration: none; }

/* article */
.post-meta-row { display: flex; gap: 14px; align-items: center; color: #0076ce; font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 22px; }
.post-body h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-top: 1.6em; }
.post-body h3 { font-size: 1.2rem; margin-top: 1.3em; }
.post-body p, .post-body li { color: #a9b6c8; font-size: 1.06rem; line-height: 1.85; }
.post-body ul { margin: 0 0 1.2rem; padding-left: 1.2rem; }
.post-body li { margin-bottom: .5rem; }
.post-hero-img { width: 100%; border-radius: 16px; margin: 6px 0 30px; border: 1px solid rgba(255,255,255,.08); }

@media (max-width: 900px){ .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .blog-grid { grid-template-columns: 1fr; } }