/* ═══════════════════════════════════════
   CHARGEX — Pages Shared Layout
════════════════════════════════════════ */

/* ── Page hero (inner pages) ── */
.page-hero {
  padding: 130px 64px 80px;
  max-width: 100%;
  position: relative; overflow: hidden;
  text-align: center;
  background: var(--dark);
}
.page-hero::before {
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 60%, rgba(124,58,237,0.18) 0%, transparent 65%),
    radial-gradient(ellipse 40% 30% at 80% 20%, rgba(0,229,255,0.10) 0%, transparent 55%);
  pointer-events:none;
}
.page-hero::after {
  content:'';
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events:none;
}
.page-hero-inner {
  position:relative; z-index:2;
  max-width:760px; margin:0 auto;
}

/* ── Page content wrapper ── */
.page-content {
  max-width: 1240px; margin: 0 auto;
  padding: 80px 64px 100px;
}
.page-content-wide {
  max-width: 100%;
  padding: 80px 64px 100px;
}
.page-content-inner { max-width: 1240px; margin: 0 auto; }

/* ── Section wrapper within page ── */
.section-block { margin-bottom: 80px; }
.section-block:last-child { margin-bottom: 0; }

/* ── Three-col cards ── */
.cards-3 {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 24px; margin-top: 56px;
}
.cards-2 {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 24px; margin-top: 56px;
}
.cards-4 {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 20px; margin-top: 56px;
}

/* ── Feature card ── */
.feat-card {
  padding: 36px 32px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: border-color 0.28s, transform 0.28s, box-shadow 0.28s;
}
.feat-card:hover {
  border-color: rgba(0,229,255,0.25);
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.55);
}
.feat-card-icon {
  width: 52px; height: 52px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; margin-bottom: 20px;
}
.feat-card-icon.cyan   { background: rgba(0,229,255,0.1); }
.feat-card-icon.purple { background: rgba(124,58,237,0.1); }
.feat-card-icon.amber  { background: rgba(245,158,11,0.1); }
.feat-card-icon.red    { background: rgba(255,80,80,0.1); }
.feat-card-icon.green  { background: rgba(34,197,94,0.1); }

.feat-card h3 { font-size: 1.05rem; font-weight: 800; margin-bottom: 10px; }
.feat-card p  { font-size: 0.88rem; color: var(--muted); line-height: 1.72; }

/* ── Accent top-border card ── */
.accent-card {
  padding: 32px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--border);
  position: relative; overflow: hidden;
}
.accent-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
}
.accent-card.cyan::before   { background: linear-gradient(90deg,var(--accent),transparent); }
.accent-card.purple::before { background: linear-gradient(90deg,var(--accent2),transparent); }
.accent-card.amber::before  { background: linear-gradient(90deg,var(--accent3),transparent); }

/* ── Number highlight card ── */
.num-card {
  padding: 36px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--border);
  display: flex; gap: 20px;
}
.num-card-num {
  font-size: 3rem; font-weight: 900; line-height: 1;
  background: var(--gradient);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; opacity: 0.18;
  min-width: 52px;
}
.num-card h3  { font-size: 1rem; font-weight: 800; margin-bottom: 8px; }
.num-card p   { font-size: 0.85rem; color: var(--muted); line-height: 1.7; }

/* ── Horizontal rule ── */
.hr { width:100%; height:1px; background:var(--border); margin:60px 0; }

/* ── Breadcrumb ── */
.breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.78rem; color: var(--muted);
  margin-bottom: 0;
}
.breadcrumb a { color: var(--muted); text-decoration: none; transition: color 0.2s; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb .sep { opacity: 0.4; }
.breadcrumb .current { color: var(--text); }

/* ── Back link ── */
.back-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.82rem; color: var(--muted); text-decoration: none;
  transition: color 0.2s, gap 0.2s;
  margin-bottom: 32px;
}
.back-link:hover { color: var(--accent); gap: 10px; }

/* ── CTA banner at bottom of page ── */
.cta-banner {
  padding: 64px 48px; border-radius: 20px; text-align: center;
  background: linear-gradient(135deg, rgba(0,229,255,0.07) 0%, rgba(124,58,237,0.07) 100%);
  border: 1px solid rgba(0,229,255,0.14);
  position: relative; overflow: hidden;
  margin-top: 80px;
}
.cta-banner::before {
  content:''; position:absolute; inset:0;
  background: radial-gradient(ellipse at center, rgba(124,58,237,0.12) 0%, transparent 70%);
}
.cta-banner > * { position: relative; z-index: 1; }
.cta-banner h2  { font-size:clamp(1.5rem,3vw,2.2rem); margin-bottom:12px; }
.cta-banner p   { font-size:1rem; color:var(--muted); margin-bottom:32px; max-width:540px; margin-left:auto; margin-right:auto; }
.cta-banner-btns{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .page-content, .page-content-wide { padding-left: 32px; padding-right: 32px; }
  .cards-4 { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px) {
  .page-hero { padding: 110px 24px 60px; }
  .page-content, .page-content-wide { padding: 56px 20px 72px; }
  .cards-3, .cards-2, .cards-4 { grid-template-columns: 1fr; }
  .cta-banner { padding: 44px 24px; }
}