/* ============================================================
   page-services.css
   Extracted from <style> block in services.html.
   ============================================================ */

:root {
    --c-ink: #0B1E3F;
    --c-text: #1d1d1f;
    --c-mute: #5B6B85;
    --c-mute-2: #8794AE;
    --c-line: #E2E6F0;
    --c-line-2: #C9D1E2;
    --c-bg: #FBFBFD;
    --c-bg-2: #F4F6FB;
    --c-card: #FFFFFF;
    --c-blue: #1E63E9;
    --c-blue-d: #1D3FB0;
    --c-teal: #5EEAD4;
    --c-accent: #FF6B35;
    --c-purple: #7C5CFA;

    --ease: cubic-bezier(.22,.61,.36,1);
    --ease-spring: cubic-bezier(.16,1,.3,1);
    --shadow-card: 0 30px 60px -40px rgba(11,30,63,.22), 0 6px 16px -10px rgba(11,30,63,.06);
  }
  body { background: var(--c-bg); color: var(--c-text); font-family: 'Inter', system-ui, sans-serif; }

/* HERO REBUILD */
  #services-hub-page .sh-hero {
    position: relative;
    padding: clamp(100px, 12vw, 160px) 0 clamp(80px, 10vw, 120px);
    overflow: hidden;
    text-align: center;
    background: linear-gradient(180deg, var(--c-bg) 0%, #FFFFFF 100%);
  }
  
  #services-hub-page .sh-hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
  }
  
  #services-hub-page .sh-glow {
    position: absolute;
    left: 50%;
    top: 30%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 600px;
    background: radial-gradient(ellipse at center, rgba(30,99,233,0.08) 0%, transparent 60%);
    filter: blur(40px);
  }
  
  #services-hub-page .sh-abstract-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  #services-hub-page .sh-hero-inner {
    position: relative;
    max-width: 980px;
    margin-inline: auto;
    z-index: 1;
  }

  #services-hub-page .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: .8rem;
    font-weight: 600;
    color: var(--c-blue);
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 8px 18px;
    border: 1px solid rgba(30,99,233,0.15);
    border-radius: 999px;
    background: rgba(255,255,255,0.8);
    backdrop-filter: blur(10px);
    box-shadow: 0 12px 30px -22px rgba(11,30,63,0.15);
    margin-bottom: 24px;
  }

  #services-hub-page .eyebrow .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--c-blue);
    box-shadow: 0 0 0 0 rgba(30,99,233,0.5);
    animation: shDotPulse 2.4s ease-out infinite;
  }

  @keyframes shDotPulse {
    0% { box-shadow: 0 0 0 0 rgba(30,99,233,0.45); }
    100% { box-shadow: 0 0 0 10px rgba(30,99,233,0); }
  }

  #services-hub-page h1 {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: clamp(2.8rem, 6.4vw, 5.2rem);
    line-height: 1.04;
    letter-spacing: -.03em;
    color: var(--c-ink);
    margin: 0 auto 24px;
    max-width: 15ch;
  }

  #services-hub-page h1 em {
    font-style: normal;
    background: linear-gradient(135deg, var(--c-blue), var(--c-teal));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  #services-hub-page .lede {
    font-size: clamp(1.1rem, 1.4vw, 1.25rem);
    line-height: 1.65;
    color: var(--c-mute);
    max-width: 680px;
    margin: 0 auto 40px;
  }

  /* SVG Animations */
  #services-hub-page .sh-orb {
    animation: shFloat 8s ease-in-out infinite alternate;
  }
  #services-hub-page .sh-flow-line {
    stroke-dasharray: 600;
    animation: shDraw 6s linear infinite;
  }
  #services-hub-page .sh-glass-panel {
    backdrop-filter: blur(8px);
    animation: shHover 6s ease-in-out infinite alternate;
  }
  #services-hub-page .sh-sparkle {
    animation: shSparkle 3s ease-in-out infinite alternate;
  }
  
  @keyframes shFloat {
    0% { transform: translateY(0) scale(1); }
    100% { transform: translateY(-30px) scale(1.05); }
  }
  @keyframes shDraw {
    from { stroke-dashoffset: 1200; }
    to { stroke-dashoffset: 0; }
  }
  @keyframes shHover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-15px); }
  }
  @keyframes shSparkle {
    0% { opacity: 0.2; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1.2); }
  }

  /* Reveal Utility scoped */
  #services-hub-page .sh-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  }
  #services-hub-page .sh-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* GRID */
  .showcase { padding: clamp(40px, 6vw, 80px) 0 clamp(80px, 9vw, 130px); }
  .showcase-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
  }
  @media (max-width: 1180px) { .showcase-grid { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 880px)  { .showcase-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px)  { .showcase-grid { grid-template-columns: 1fr; } }

  .ccard {
    position: relative;
    background: var(--c-card);
    border: 1px solid var(--c-line);
    border-radius: 24px;
    overflow: hidden;
    text-decoration: none; color: inherit;
    display: flex; flex-direction: column;
    transition: transform var(--ease) 240ms,
                box-shadow var(--ease) 240ms,
                border-color var(--ease) 240ms;
    isolation: isolate;
  }
  .ccard:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-card);
    border-color: transparent;
  }
  .ccard .ccard-preview {
    position: relative;
    height: 180px;
    overflow: hidden;
    background: var(--c-bg-2);
  }
  .ccard .ccard-preview svg { width: 100%; height: 100%; display: block; }
  .ccard .ccard-num {
    position: absolute; top: 14px; left: 18px;
    font-family: 'JetBrains Mono', monospace;
    font-size: .72rem; font-weight: 500;
    color: rgba(11,30,63,.55);
    letter-spacing: .14em;
    background: rgba(255,255,255,.85);
    backdrop-filter: blur(8px);
    padding: 4px 10px; border-radius: 999px;
    z-index: 2;
  }
  .ccard .ccard-tag {
    position: absolute; top: 14px; right: 18px;
    font-family: 'Inter', sans-serif;
    font-size: .68rem; font-weight: 700;
    color: var(--c-blue);
    letter-spacing: .14em; text-transform: uppercase;
    background: rgba(255,255,255,.85);
    backdrop-filter: blur(8px);
    padding: 4px 10px; border-radius: 999px;
    z-index: 2;
  }
  .ccard .ccard-body { padding: 24px 24px 26px; flex: 1; display: flex; flex-direction: column; }
  .ccard h3 {
    font-family: 'Manrope', sans-serif;
    font-size: 1.22rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--c-ink);
    margin: 0 0 10px;
  }
  .ccard p {
    font-size: .9rem;
    line-height: 1.6;
    color: var(--c-mute);
    margin: 0 0 22px;
    flex: 1;
  }
  .ccard .ccard-cta {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .88rem; font-weight: 600;
    color: var(--c-blue);
    align-self: flex-start;
  }
  .ccard .ccard-cta::after { content: "→"; transition: transform 240ms var(--ease); }
  .ccard:hover .ccard-cta::after { transform: translateX(4px); }

  .pv-grid::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
      linear-gradient(rgba(30,99,233,.08) 1px, transparent 1px),
      linear-gradient(90deg, rgba(30,99,233,.08) 1px, transparent 1px);
    background-size: 24px 24px;
    mask-image: radial-gradient(ellipse at center, var(--c-black), transparent 80%);
  }

  /* Subtle marching dash on hover */
  .ccard .pv-dash { stroke-dasharray: 4 4; animation: dashMove 6s linear infinite; }
  @keyframes dashMove { to { stroke-dashoffset: -160; } }
  .ccard:hover .pv-dash { animation-duration: 3s; }

  /* Service preview backgrounds */
  .pv-cloud  { background: linear-gradient(160deg, #0B1E3F 0%, #1E63E9 100%); }
  .pv-mig    { background: linear-gradient(160deg, #F4F6FB 0%, var(--c-white) 100%); }
  .pv-trn    { background: linear-gradient(160deg, #FBFAF7 0%, var(--c-white) 100%); }
  .pv-dm     { background: linear-gradient(160deg, var(--c-white) 0%, #F4F6FB 100%); }
  .pv-con    { background: linear-gradient(160deg, #FAF7F2 0%, var(--c-white) 100%); }
  .pv-out    { background: linear-gradient(160deg, #F4F6FB 0%, var(--c-white) 100%); }
  .pv-tx     { background: linear-gradient(160deg, var(--c-white) 0%, #F5F5F7 100%); }
  .pv-sd     { background: linear-gradient(160deg, #0B1E3F 0%, #142A56 100%); }
  .pv-dr     { background: linear-gradient(160deg, #F4F6FB 0%, var(--c-white) 100%); }
  .pv-inf    { background: linear-gradient(160deg, #0B1E3F 0%, #1B3573 100%); }


  /* Stats strip */
  .stats-strip {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin: clamp(60px, 7vw, 90px) auto 0;
    max-width: 1100px;
    border: 1px solid var(--c-line);
    border-radius: 22px;
    background: var(--c-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
  }
  .stats-strip li { padding: 28px 24px; border-right: 1px solid var(--c-line); text-align: center; }
  .stats-strip li:last-child { border-right: 0; }
  .stats-strip strong {
    display: block;
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: clamp(1.5rem, 2.4vw, 2.1rem);
    color: var(--c-ink);
    letter-spacing: -.025em;
    line-height: 1; margin-bottom: 6px;
  }
  .stats-strip span { font-size: .82rem; color: var(--c-mute); }
  @media (max-width: 720px) { .stats-strip { grid-template-columns: 1fr 1fr; } .stats-strip li:nth-child(2n) { border-right: 0; } .stats-strip li:nth-child(-n+2) { border-bottom: 1px solid var(--c-line); } }

  /* Section heading */
  .section-h-idx {
    text-align: center;
    max-width: 760px;
    margin: 0 auto clamp(40px, 5vw, 64px);
  }
  .section-h-idx .eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .8rem; font-weight: 600; color: var(--c-blue);
    margin-bottom: 14px;
  }
  .section-h-idx .eyebrow::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-blue);
  }
  .section-h-idx h2 {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: clamp(1.8rem, 3.6vw, 2.8rem);
    line-height: 1.06; letter-spacing: -.03em;
    color: var(--c-ink); margin-bottom: 14px;
  }
  .section-h-idx p { color: var(--c-mute); font-size: 1rem; line-height: 1.65; max-width: 580px; margin: 0 auto; }