/* ============================================
   ASNEH TECHNOLOGY — Inner pages (services, legal, blog)
   Built on style.css tokens — corporate light theme
============================================ */

.hero-actions { display:flex; gap:14px; flex-wrap:wrap; }

.content-wrap { max-width: 880px; margin: 0 auto; padding: 72px 28px 110px; }
.content-wrap.wide { max-width: 1100px; }
.content-wrap h2 { font-size: clamp(23px,3vw,31px); font-weight: 700; color: var(--ink); margin: 48px 0 16px; letter-spacing:-.4px; }
.content-wrap h2:first-child { margin-top: 0; }
.content-wrap h3 { font-size: 19px; font-weight: 700; color: var(--ink); margin: 30px 0 12px; }
.content-wrap p { font-size: 16px; color: var(--text); line-height: 1.85; margin-bottom: 16px; }
.content-wrap ul, .content-wrap ol { color: var(--text); font-size: 16px; line-height: 1.85; margin: 0 0 16px 22px; }
.content-wrap li { margin-bottom: 8px; }
.content-wrap a { color: var(--blue); text-decoration: underline; text-decoration-color: rgba(15,98,254,.35); text-underline-offset: 3px; }
.content-wrap a:hover { text-decoration-color: var(--blue); }
.content-wrap strong { color: var(--ink); }
.content-wrap .updated-note { font-size: 13.5px; color: var(--dim); margin-bottom: 40px; }
.content-wrap table { width:100%; border-collapse: collapse; margin: 8px 0 24px; font-size: 14.5px; }
.content-wrap th, .content-wrap td { text-align:left; padding: 12px 14px; border-bottom: 1px solid var(--line); color: var(--text); }
.content-wrap th { color: var(--ink); font-weight: 700; background: var(--bg-2); }

/* ── Service page sections ── */
.svc-block { padding: 84px 28px; position: relative; background:#fff; }
.svc-block.alt { background: var(--bg-2); }
.svc-block-inner { max-width: var(--wrap); margin: 0 auto; }
.svc-block h2 { font-size: clamp(26px,3.2vw,38px); font-weight:700; color:var(--ink); margin-bottom: 16px; letter-spacing:-.6px; line-height:1.18; }
.svc-block > .svc-block-inner > p.lead { font-size: 18px; color: var(--muted); line-height:1.8; max-width: 800px; margin-bottom: 30px; }
.svc-block p { color: var(--text); }

.check-grid { display:grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
.check-item { display:flex; gap:14px; align-items:flex-start; padding:20px 22px; background:#fff; border:1px solid var(--line); border-left:4px solid var(--blue); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.check-item i { color: var(--blue); margin-top: 4px; flex-shrink:0; }
.check-item span { font-size: 15px; color: var(--text); font-weight: 500; line-height:1.65; }

.proc-list { counter-reset: proc; display:grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap: 0; border-top:1px solid var(--line); }
.proc-item { display:flex; flex-direction:column; gap: 14px; padding: 28px 24px 8px 0; border-right:1px solid var(--line); padding-left:24px; }
.proc-item:first-child { padding-left:0; }
.proc-item:last-child { border-right:0; }
.proc-num { counter-increment: proc; font-size:44px; font-weight:300; color: var(--blue); line-height:1; letter-spacing:-1px; }
.proc-num::before { content: "0" counter(proc); }
.proc-text h4 { font-weight:700; color:var(--ink); font-size:17px; margin-bottom:6px; }
.proc-text p { font-size: 14.5px; color: var(--muted); line-height:1.7; margin: 0; }

.tech-pill-row { display:flex; flex-wrap:wrap; gap: 10px; }
.tech-pill { font-size: 13.5px; font-weight:600; color: var(--ink); background:#fff; border:1px solid var(--line); padding: 9px 18px; border-radius: 100px; transition: .2s; }
.tech-pill:hover { border-color: var(--blue); color: var(--blue); }

.related-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.related-card { display:block; text-decoration:none; padding: 28px; background:#fff; border:1px solid var(--line); border-top:3px solid transparent; border-radius: var(--radius); transition: border-color .2s, transform .2s, box-shadow .2s; }
.related-card:hover { border-top-color: var(--blue); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.related-card .rc-title { font-weight:700; color: var(--ink); font-size:17px; margin-bottom:8px; }
.related-card .rc-sub { font-size: 14px; color: var(--muted); line-height:1.65; }

/* ── FAQ accordion ── */
.faq-list { display:flex; flex-direction:column; gap: 0; max-width: 880px; margin: 0 auto; border-top:1px solid var(--line); }
.faq-item { background: transparent; border-bottom:1px solid var(--line); overflow:hidden; }
.faq-q { display:flex; align-items:center; justify-content:space-between; gap: 18px; padding: 22px 4px; cursor:pointer; font-weight:600; color: var(--ink); font-size:17px; transition: color .2s; }
.faq-q:hover { color: var(--blue); }
.faq-q i { color: var(--blue); transition: transform .25s; flex-shrink:0; font-size:14px; }
.faq-item.open .faq-q i { transform: rotate(180deg); }
.faq-a { max-height:0; overflow:hidden; transition: max-height .3s ease; padding: 0 4px; }
.faq-item.open .faq-a { max-height: 500px; padding-bottom: 24px; }
.faq-a p { font-size: 15.5px; color: var(--muted); line-height:1.8; margin:0; }

/* ── CTA band ── */
.cta-band { padding: 84px 28px; text-align:left; background: var(--blue); color:#fff; position:relative; overflow:hidden; }
.cta-band::after { content:''; position:absolute; right:-120px; top:-120px; width:420px; height:420px; border-radius:50%; background: rgba(255,255,255,.08); }
.cta-band > * { position:relative; z-index:1; max-width: var(--wrap); margin-left:auto; margin-right:auto; }
.cta-band h2 { font-size: clamp(26px,3.4vw,40px); font-weight:700; color:#fff; margin-bottom:14px; letter-spacing:-.6px; }
.cta-band p { font-size:17px; color:#dbe7ff; max-width:700px; margin-bottom:28px; line-height:1.7; }
.cta-actions { display:flex; gap:14px; justify-content:flex-start; flex-wrap:wrap; }
.cta-band .btn-p { background:#fff; color: var(--blue); }
.cta-band .btn-p:hover { background:#eaf0ff; }
.cta-band .btn-o { border-color: rgba(255,255,255,.7); color:#fff; }
.cta-band .btn-o:hover { background:#fff; color: var(--blue); }

/* ── TODO banner for anything not yet confirmed by the business ── */
.todo-note { background:#fff8e6; border:1px solid #f3d38a; border-radius:6px; padding:16px 18px; font-size:13.5px; color:#8a5a00; margin: 0 0 24px; }

/* ── Blog ── */
.blog-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom: 36px; }
.blog-toolbar h2 { margin:0; }
.blog-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.blog-card { background:#fff; border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; display:flex; flex-direction:column; text-decoration:none; transition: transform .2s, box-shadow .2s; position:relative; }
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.blog-card-cover { height: 170px; background: linear-gradient(135deg,var(--navy),var(--blue)); display:flex; align-items:center; justify-content:center; font-size:42px; color:#fff; }
.blog-card-body { padding: 24px 24px 28px; display:flex; flex-direction:column; gap:10px; flex:1; }
.blog-cat { font-size:11.5px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color: var(--blue); }
.blog-title { font-weight:700; font-size:19px; color: var(--ink); line-height:1.35; }
.blog-excerpt { font-size:14.5px; color: var(--muted); line-height:1.7; flex:1; }
.blog-meta { font-size:12.5px; color: var(--dim); display:flex; align-items:center; gap:8px; }
.blog-empty { text-align:center; color: var(--dim); padding: 60px 20px; font-size:14.5px; }

@media(max-width:900px){
  .check-grid { grid-template-columns:1fr; }
  .related-grid { grid-template-columns:1fr; }
  .blog-grid { grid-template-columns:1fr; }
  .proc-item { border-right:0; border-bottom:1px solid var(--line); padding-left:0; padding-bottom:22px; }
  .svc-block { padding: 60px 22px; }
}

/* blog cards inside .content-wrap should not pick up link underline */
.content-wrap a.blog-card, .content-wrap a.blog-card:hover { text-decoration: none; color: inherit; }
.content-wrap a.blog-card .blog-title { color: var(--ink); }
.content-wrap a.blog-card .blog-excerpt { color: var(--muted); }
.content-wrap a.blog-card .blog-cat { color: var(--blue); }
.content-wrap a.blog-card .blog-meta { color: var(--dim); }
.svc-block ul:not([class]), .svc-block ol:not([class]) { margin: 0 0 18px 22px; color: var(--text); font-size: 16px; line-height: 1.85; }
.svc-block ul:not([class]) li { margin-bottom: 6px; }