/* Services page — extracted byte-for-byte from the legacy server-rendered /services
   inline <style>. Data-only front end: cards rendered by /js/services-static.js. */

/* ── Hero ── */
.srv-hero { position: relative; background: linear-gradient(135deg, #0a0014 0%, #0f0a2e 40%, #0a1628 100%); padding: 7rem 1.5rem 6rem; text-align: center; overflow: hidden; }
.srv-hero-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 0%, rgba(139,92,246,0.22) 0%, transparent 55%), radial-gradient(ellipse at 70% 0%, rgba(56,189,248,0.18) 0%, transparent 55%); pointer-events: none; }
.srv-hero-inner { max-width: 800px; margin: 0 auto; position: relative; z-index: 1; }
.srv-hero-label { font-family: 'Raleway', sans-serif; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: #38bdf8; margin-bottom: 1rem; animation: srvFadeUp 0.6s ease-out both; }
.srv-hero-title { font-family: 'Raleway', sans-serif; font-size: clamp(2.75rem, 7vw, 5rem); font-weight: 900; color: #fff; margin-bottom: 1.25rem; line-height: 1.05; letter-spacing: -0.02em; animation: srvFadeUp 0.6s ease-out 0.15s both; }
.srv-hero-title span { color: #38bdf8; }
.srv-hero-sub { font-family: 'Raleway', sans-serif; font-size: clamp(1rem, 2vw, 1.15rem); color: rgba(255,255,255,0.6); line-height: 1.75; margin-bottom: 2.5rem; animation: srvFadeUp 0.6s ease-out 0.3s both; }
.srv-hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 2.5rem; animation: srvFadeUp 0.6s ease-out 0.45s both; }
.srv-btn-primary { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.8rem 2rem; background: #0ea5e9; color: #fff; font-family: 'Raleway', sans-serif; font-weight: 700; font-size: 0.95rem; border: 2px solid #0ea5e9; border-radius: 8px; text-decoration: none; transition: background 0.2s, transform 0.2s, box-shadow 0.2s; }
.srv-btn-primary:hover { background: #0284c7; border-color: #0284c7; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(14,165,233,0.4); }
.srv-btn-secondary { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.8rem 2rem; background: transparent; color: #fff; font-family: 'Raleway', sans-serif; font-weight: 700; font-size: 0.95rem; border: 2px solid rgba(255,255,255,0.4); border-radius: 8px; text-decoration: none; transition: background 0.2s, border-color 0.2s, transform 0.2s; }
.srv-btn-secondary:hover { background: rgba(255,255,255,0.1); border-color: #fff; transform: translateY(-2px); }
.srv-hero-tags { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; animation: srvFadeUp 0.6s ease-out 0.6s both; }
@media (max-width: 480px) { .srv-hero-tags { display: none; } }
.srv-hero-tags span { display: inline-flex; align-items: center; gap: 0.4rem; background: rgba(56,189,248,0.1); border: 1px solid rgba(56,189,248,0.25); color: #93c5fd; font-family: 'Raleway', sans-serif; font-size: 0.8rem; font-weight: 600; padding: 0.35rem 0.9rem; border-radius: 999px; }
@keyframes srvFadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }

/* ── Services Section ── */
.srv-section { background: linear-gradient(rgba(255,255,255,0.07), rgba(255,255,255,0.07)), linear-gradient(135deg, #000000 0%, #1e1b4b 20%, #4c1d95 45%, #7c3aed 65%, #1e1b4b 85%, #000000 100%); padding: 5rem 1.5rem; }
.srv-inner { max-width: 1200px; margin: 0 auto; }
.srv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
@media (max-width: 768px) { .srv-grid { grid-template-columns: 1fr; } }

/* ── Service Cards ── */
.srv-grid { align-items: stretch; }

/* ── CTA ── */
.srv-cta { background: linear-gradient(rgba(255,255,255,0.07), rgba(255,255,255,0.07)), linear-gradient(90deg, #000000 0%, #1e1b4b 25%, #4c1d95 50%, #1e1b4b 75%, #000000 100%); padding: 5rem 1.5rem; border-top: 3px solid #4c1d95; }
.srv-cta-inner { max-width: 900px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 3rem; flex-wrap: wrap; }
.srv-cta-text { flex: 1; min-width: 260px; }
.srv-cta-text h2 { font-family: 'Raleway', sans-serif; font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; color: #fff; margin-bottom: 0.75rem; line-height: 1.2; }
.srv-cta-text p { font-family: 'Raleway', sans-serif; font-size: 1rem; font-weight: 500; color: rgba(255,255,255,0.75); line-height: 1.75; margin: 0; }
.srv-cta-actions { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.srv-btn-outline { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.8rem 2rem; background: transparent; color: #fff; font-family: 'Raleway', sans-serif; font-weight: 700; font-size: 0.95rem; border: 2px solid rgba(255,255,255,0.35); border-radius: 8px; text-decoration: none; transition: border-color 0.2s, color 0.2s, transform 0.2s; }
.srv-btn-outline:hover { border-color: #38bdf8; color: #38bdf8; transform: translateY(-2px); }

/* ============================================================
   The services index strip + full-width service bands (edit18)
   ============================================================ */

.srvb { padding: 4.75rem 1.5rem; scroll-margin-top: 84px; }
.srvb-light { background: #f3f6fb; --sf-title: #0f172a; --sf-body: #334155; --sf-card: #fff; --sf-bd: #dce4f0; }
.srvb-dark { background: linear-gradient(rgba(255,255,255,0.06), rgba(255,255,255,0.06)), linear-gradient(135deg, #000000 0%, #1e1b4b 28%, #4c1d95 62%, #000000 100%); --sf-title: #fff; --sf-body: rgba(255,255,255,0.74); --sf-card: rgba(255,255,255,0.06); --sf-bd: rgba(255,255,255,0.16); }
.srvb-inner { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr; gap: 3rem; align-items: start; }
.srvb-rev .srvb-main { order: 2; }
.srvb-rev .srvb-side { order: 1; }

.srvb-head { display: flex; align-items: center; gap: 1.15rem; margin-bottom: 1.6rem; }
.srvb-icon { width: 62px; height: 62px; border-radius: 18px; flex-shrink: 0; background: linear-gradient(135deg, var(--cc1) 0%, var(--cc2) 100%); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.7rem; box-shadow: 0 12px 30px rgba(0,0,0,0.25); }
.srvb-num { display: block; font-family: 'Raleway', sans-serif; font-weight: 900; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cc1); margin-bottom: 0.35rem; }
.srvb-title { font-family: 'Raleway', sans-serif; font-weight: 900; font-size: clamp(1.5rem, 3.2vw, 2.15rem); line-height: 1.15; letter-spacing: -0.02em; color: var(--sf-title); margin: 0; }
.srvb-lead { font-family: 'Raleway', sans-serif; font-size: 1.02rem; line-height: 1.8; color: var(--sf-body); margin: 0 0 1.4rem; }

.srvb-more { border-top: 1px solid var(--sf-bd); border-bottom: 1px solid var(--sf-bd); margin: 0 0 1.6rem; }
.srvb-more summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.95rem 0; font-family: 'Raleway', sans-serif; font-weight: 800; font-size: 0.88rem; letter-spacing: 0.02em; color: var(--cc1); }
.srvb-more summary::-webkit-details-marker { display: none; }
.srvb-more summary::marker { content: ''; }
.srvb-more summary i { transition: transform 0.25s ease; font-size: 1.25rem; }
.srvb-more[open] summary i { transform: rotate(180deg); }
.srvb-more p { font-family: 'Raleway', sans-serif; font-size: 0.95rem; line-height: 1.8; color: var(--sf-body); margin: 0 0 1.1rem; }
.srvb-more p:last-child { margin-bottom: 1.3rem; }

.srvb-note { display: flex; align-items: flex-start; gap: 0.65rem; background: var(--sf-card); border: 1px solid var(--sf-bd); border-left: 3px solid var(--cc1); border-radius: 0 12px 12px 0; padding: 0.95rem 1.15rem; font-family: 'Raleway', sans-serif; font-size: 0.87rem; line-height: 1.65; color: var(--sf-body); margin-bottom: 1.7rem; }
.srvb-note i { color: var(--cc1); flex-shrink: 0; font-size: 1rem; margin-top: 0.12rem; }

.srvb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem; }
.srvb-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.88rem 1.95rem; border-radius: 999px; background: linear-gradient(135deg, var(--cc1) 0%, var(--cc2) 100%); color: #fff; font-family: 'Raleway', sans-serif; font-weight: 800; font-size: 0.95rem; text-decoration: none; box-shadow: 0 10px 26px rgba(0,0,0,0.22); transition: transform 0.18s ease, box-shadow 0.18s ease; }
.srvb-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0,0,0,0.3); }
.srvb-free { display: inline-flex; align-items: flex-start; gap: 0.4rem; font-family: 'Raleway', sans-serif; font-size: 0.82rem; line-height: 1.5; color: var(--sf-body); opacity: 0.85; max-width: 330px; }
.srvb-free i { color: var(--cc1); margin-top: 0.1rem; }

.srvb-side { background: var(--sf-card); border: 1px solid var(--sf-bd); border-radius: 18px; padding: 1.8rem; }
.srvb-side-title { font-family: 'Raleway', sans-serif; font-weight: 800; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cc1); margin: 0 0 1.15rem; }
.srvb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.8rem; }
.srvb-list li { font-family: 'Raleway', sans-serif; font-size: 0.88rem; line-height: 1.58; color: var(--sf-body); display: flex; align-items: flex-start; gap: 0.65rem; }
.srvb-list li::before { content: '\2713'; color: var(--cc1); font-weight: 900; flex-shrink: 0; line-height: 1.4; }

@media (max-width: 900px) {
  .srvb { padding: 3.5rem 1.25rem; }
  .srvb-inner { grid-template-columns: 1fr; gap: 2rem; }
  .srvb-rev .srvb-main { order: 1; }
  .srvb-rev .srvb-side { order: 2; }
}

/* ---- the expanded "How it works" panel --------------------------------------
   Written after the .srvb-more block above so it wins on ordinary cascade. The
   panel is now a direct child of the band grid rather than of the left column,
   so it spans both columns and, ordered last, opens underneath the card and the
   sidebar together instead of shoving one half of the band down on its own.
   order: 3 beats the .srvb-rev pair (main 2, side 1) as well as the default 0. */
.srvb-more { grid-column: 1 / -1; order: 3; margin: 0; }
.srvb-xwrap { display: flex; justify-content: flex-end; padding: 0 0 1.1rem; }
/* no rule is needed to hide this while the panel is shut: <details> hides every
   child but the summary on its own */
.srvb-x {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font: 600 0.82rem/1 inherit; letter-spacing: 0.02em;
  padding: 0.5rem 0.95rem; border-radius: 999px; cursor: pointer;
  color: var(--cc1); background: transparent;
  border: 1px solid var(--sf-bd);
}
.srvb-x i { font-size: 1rem; }
.srvb-x:hover { border-color: var(--cc1); background: rgba(127, 127, 127, 0.10); }
.srvb-x:focus-visible { outline: 2px solid var(--cc1); outline-offset: 2px; }