/* =========================================================================
   SERVICES.CSS
   Page-specific styles for views/services.ejs. Load order: theme.css,
   nav.css, home.css (for shared card/table/faq/security components),
   then this file for the pieces unique to the services page.
   ========================================================================= */

section { position: relative; }
.section-pad { padding: var(--sp-9) 0; }
.section-head { max-width: 640px; margin: 0 auto var(--sp-7); text-align: center; }
.section-head.left { margin: 0 0 var(--sp-7); text-align: left; }
.section-head h2 { font-size: var(--fs-3xl); margin: var(--sp-3) 0 var(--sp-3); }
.section-head p { color: var(--muted-300); font-size: var(--fs-md); }

/* ================================ PAGE HERO =============================== */
.page-hero {
  padding: var(--sp-8) 0 var(--sp-7);
  background: var(--gradient-hero);
  overflow: hidden;
  position: relative;
  text-align: center;
}
.page-hero::before {
  content: "";
  position: absolute;
  width: 620px; height: 620px;
  border-radius: 50%;
  border: 1px solid var(--border-subtle);
  top: -320px; left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}
.page-hero-inner { max-width: 760px; margin: 0 auto; padding: 0 var(--sp-5); position: relative; }
.page-hero h1 { font-size: clamp(2rem, 4.2vw, var(--fs-4xl)); line-height: 1.1; margin: var(--sp-4) 0 var(--sp-5); }
.page-hero h1 span { background: var(--gradient-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.page-hero .lede { font-size: var(--fs-md); color: var(--muted-100); max-width: 600px; margin: 0 auto var(--sp-6); }
.page-hero .hero-actions { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }

/* ============================ QUICK-JUMP STRIP ============================= */
.jump-strip {
  position: sticky;
  top: 72px;
  z-index: 40;
  background: rgba(12,32,23,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-subtle);
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}
.jump-strip::-webkit-scrollbar { display: none; }
.jump-strip-inner { display: inline-flex; gap: 8px; padding: 14px var(--sp-5); max-width: var(--max-width); margin: 0 auto; }
.jump-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle); color: var(--muted-100);
  font-size: var(--fs-xs); font-weight: 600; flex-shrink: 0;
  transition: all var(--transition-fast);
}
.jump-chip:hover, .jump-chip.is-active { background: var(--gradient-blue); border-color: transparent; color: var(--on-lime); }

/* ============================ SERVICE FEATURE BLOCK ========================= */
.service-block { display: flex; gap: var(--sp-8); align-items: center; flex-wrap: wrap; padding: var(--sp-9) 0; scroll-margin-top: 130px; }
.service-block.reverse { flex-direction: row-reverse; }
.service-media { flex: 1 1 420px; min-width: 300px; }
.service-copy { flex: 1 1 420px; min-width: 300px; }
.service-copy .feature-list { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-6); }
.service-copy .feature-list li { display: flex; gap: 12px; align-items: flex-start; }
.service-copy .feature-list i { color: var(--blue-300); margin-top: 3px; }
.service-copy .feature-list strong { display: block; color: var(--white); font-size: var(--fs-sm); }
.service-copy .feature-list span { color: var(--muted-300); font-size: var(--fs-sm); }

/* mock "screen" used in place of product screenshots */
.service-screen {
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-lg);
}
.service-screen .screen-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-4); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted-500); }
.service-screen .screen-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 4px; border-top: 1px solid var(--border-subtle); font-size: var(--fs-sm); }
.service-screen .screen-row:first-of-type { border-top: none; }
.service-screen .screen-row .r-icon { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; color: #fff; margin-right: 10px; }

/* ============================== NETWORK FEE TABLE =========================== */
.fee-table-wrap { overflow-x: auto; }
.fee-table { width: 100%; border-collapse: collapse; background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; }
.fee-table thead th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-500); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border-subtle); font-weight: 600; }
.fee-table td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border-subtle); font-size: var(--fs-sm); }
.fee-table tbody tr:last-child td { border-bottom: none; }
.fee-table tbody tr:hover { background: rgba(255,255,255,0.03); }

.risk-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; }
.risk-badge.low { background: rgba(23,200,143,0.12); color: var(--success); }
.risk-badge.medium { background: rgba(212,175,55,0.14); color: var(--gold-400); }
.risk-badge.high { background: rgba(242,73,92,0.14); color: var(--danger); }

/* ============================== ALLOCATION BARS ============================= */
.alloc-card { background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--sp-6); flex: 1 1 300px; }
.alloc-card .alloc-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--sp-5); }
.alloc-card .alloc-head h3 { font-size: var(--fs-lg); }
.alloc-bar { display: flex; height: 10px; border-radius: var(--radius-pill); overflow: hidden; margin-bottom: var(--sp-4); background: var(--surface-2); }
.alloc-bar span { height: 100%; }
.alloc-legend { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.alloc-legend .leg-item { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--muted-300); }
.alloc-legend .dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

/* ============================== ETF / METAL PRODUCT GRID ==================== */
.etf-grid { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
.etf-card { flex: 1 1 260px; background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--sp-5); }
.etf-card .etf-tag { font-family: var(--font-mono); font-size: 11px; color: var(--blue-300); text-transform: uppercase; letter-spacing: 0.08em; }
.etf-card h4 { font-size: var(--fs-md); margin: 6px 0 8px; }
.etf-card p { color: var(--muted-300); font-size: var(--fs-sm); }

/* ============================== FAQ (shared look, page-scoped in case home.css absent) ===== */
.faq-list { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--sp-3); }

/* =============================== FINAL CTA =================================== */
.final-cta {
  text-align: center;
  padding: var(--sp-9) var(--sp-5);
  background: var(--gradient-hero);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.final-cta h2 { font-size: clamp(2rem, 4vw, var(--fs-3xl)); max-width: 700px; margin: var(--sp-3) auto var(--sp-6); }
.final-cta .hero-actions { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }

/* ================================ RESPONSIVE ================================ */
@media (max-width: 960px) {
  .service-block, .service-block.reverse { flex-direction: column; }
}
@media (max-width: 600px) {
  .section-pad, .service-block { padding: var(--sp-7) 0; }
  .jump-strip { top: 64px; }
}