/* Page styles for services.html — extracted by design system refactor */
/* All tokens from /assets/css/styles.css apply. */

/* ─────────────────────────────────────────────────
       HERO
    ───────────────────────────────────────────────── */
    .dc-hero--svc,
.svc-hero {
      margin-top: 0;
      background: var(--c-dark);
      position: relative;
      overflow: hidden;
      min-height: 580px;
      display: flex;
      align-items: center;
    }
    .svc-hero-bg {
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse at 72% 40%, rgba(253,192,16,.13) 0%, transparent 55%),
        radial-gradient(ellipse at 12% 72%, rgba(26,115,232,.14) 0%, transparent 50%),
        var(--c-dark);
    }
    .svc-hero-grid {
      position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
      background-size: 64px 64px;
      mask-image: radial-gradient(ellipse at 60% 50%, black 0%, transparent 68%);
    }
    .svc-hero-inner {
      position: relative; z-index: 2;
      max-width: var(--cw); margin: 0 auto;
      padding: calc(var(--nav-h) + 5rem) var(--cp) 5rem;
      width: 100%;
    }
    .svc-badge {
      display: inline-flex; align-items: center; gap: .45rem;
      padding: .3rem .9rem;
      background: rgba(253,192,16,.12);
      border: 1px solid rgba(253,192,16,.3);
      border-radius: var(--r-full);
      font-size: .72rem; font-weight: var(--fw-semibold);
      color: #fdc010; letter-spacing: var(--ls-wide); text-transform: uppercase;
      margin-bottom: 1.5rem;
    }
    .svc-badge-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: #fdc010; flex-shrink: 0;
    }
    .svc-hero h1 {
      font-family: 'Google Sans Display', sans-serif;
      font-size: clamp(2.6rem, 5.5vw, 4rem);
      font-weight: var(--fw-normal); line-height: 1.1;
      color: #fff; margin-bottom: 1.25rem; max-width: 900px;
    }
    .svc-hero h1 strong { font-weight: var(--fw-bold); color: #fdc010; }
    .svc-hero-sub {
      font-size: 1rem; color: rgba(255,255,255,.62);
      line-height: var(--lh-relaxed); max-width: 700px; margin-bottom: 2.25rem;
    }
    .svc-hero-ctas { display: flex; gap: .75rem; flex-wrap: wrap; }
    .btn-svc {
      display: inline-flex; align-items: center; gap: .4rem;
      padding: .8rem 1.8rem; background: #fdc010; color: var(--c-dark);
      font-size: .9rem; font-weight: var(--fw-bold); text-decoration: none;
      border-radius: var(--r-full); transition: background var(--t-fast);
    }
    .btn-svc:hover { background: #e5b000; }
    .svc-hero-stats {
      display: flex; gap: 3.5rem; flex-wrap: wrap;
      margin-top: 3.5rem; padding-top: 2.5rem;
      border-top: 1px solid var(--surface-2);
    }
    .svc-stat-num {
      font-family: 'Google Sans Display', sans-serif;
      font-size: 1.9rem; font-weight: var(--fw-bold); color: #fdc010; line-height: 1;
    }
    .svc-stat-label {
      font-size: .7rem; color: rgba(255,255,255,.38);
      letter-spacing: .07em; text-transform: uppercase; margin-top: .25rem;
    }

    /* ─────────────────────────────────────────────────
       TRUST BAR
    ───────────────────────────────────────────────── */
    .svc-trust {
      background:#111827;
      border-bottom:1px solid rgba(255,255,255,.06);
      padding:1.1rem 0;
    }
    .svc-trust-inner {
      max-width: var(--cw);
      margin: 0 auto;
      padding: 0 var(--cp);
      display: flex;
      align-items: center;
      gap: 2.5rem;
      flex-wrap: wrap;
    }
    .svc-trust-label {
      font-size: .7rem; color: rgba(255,255,255,.3);
      font-weight: var(--fw-medium); letter-spacing: var(--ls-normal); text-transform: uppercase; flex-shrink: 0;
    }
    .svc-trust-items { display: flex; gap: 2rem; flex-wrap: wrap; }
    .svc-trust-item {
      font-size: .8rem; color: rgba(255,255,255,.5);
      display: flex; align-items: center; gap: .4rem;
    }
    .svc-trust-dot { width: 5px; height: 5px; border-radius: 50%; background: #fdc010; flex-shrink: 0; }

    /* → styles.css */

    /* ─────────────────────────────────────────────────
       SERVICE SPLIT ROW
    ───────────────────────────────────────────────── */
    .svc-split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5rem;
      align-items: start;
    }
    .svc-split.flip { direction: rtl; }
    .svc-split.flip > * { direction: ltr; }

    /* ─────────────────────────────────────────────────
       FEATURE CARDS (left/right column)
    ───────────────────────────────────────────────── */
    .feat-list { display: flex; flex-direction: column; gap: .85rem; }
    .feat-card {
      display: flex; gap: 1rem; align-items: flex-start;
      padding: 1.25rem 1.4rem;
      border-radius: var(--r-md);
      border: 1px solid transparent;
      transition: transform var(--t-base), box-shadow .2s, background .2s, border-color .2s;
    }
    .feat-card:hover { transform: translateY(-2px); }
    /* dark variant */
    .dark .feat-card, .dark2 .feat-card {
      background: var(--surface-1);
      border-color: var(--surface-border);
    }
    .dark .feat-card:hover, .dark2 .feat-card:hover {
      background: var(--surface-2);
      border-color: var(--surface-3);
      box-shadow: 0 8px 32px rgba(0,0,0,.3);
    }
    /* light variant */
    .gray .feat-card {
      background: #fff;
      border-color: #e8eaed;
      box-shadow: 0 1px 3px rgba(0,0,0,.04);
    }
    .gray .feat-card:hover { box-shadow: 0 4px 24px rgba(0,0,0,.08); border-color: #d0d5dd; }

    /* icon circles */
    .feat-icon {
      width: 40px; height: 40px; border-radius: var(--r-md);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; margin-top: .1rem;
    }
    .ic-gold   { background: rgba(253,192,16,.15); color: #fdc010; }
    .ic-blue   { background: rgba(26,115,232,.13);  color: #1a73e8; }
    .ic-teal   { background: rgba(8,145,178,.13);   color: #0891b2; }
    .ic-green  { background: rgba(5,150,105,.13);   color: #059669; }
    .ic-purple { background: rgba(124,58,237,.13);  color: #7c3aed; }

    .feat-title { font-size: .9rem; font-weight: var(--fw-semibold); margin-bottom: .3rem; line-height: 1.35; }
    .dark .feat-title, .dark2 .feat-title { color: #fff; }
    .gray .feat-title { color: #202124; }
    .feat-desc { font-size: .81rem; line-height: 1.7; }
    .dark .feat-desc, .dark2 .feat-desc { color: rgba(255,255,255,.52); }
    .gray .feat-desc { color: #5f6368; }
    .feat-tag {
      display: inline-block; margin-top: .45rem;
      font-size: .72rem; font-weight: var(--fw-semibold);
      padding: .15rem .55rem; border-radius: 4px;
    }
    .dark .feat-tag, .dark2 .feat-tag { background: rgba(253,192,16,.1); color: #fdc010; }
    .gray .feat-tag { background: #e8f0fe; color: #1a73e8; }

    /* ─────────────────────────────────────────────────
       SIDE PANEL
    ───────────────────────────────────────────────── */
    .side-panel {
      border-radius:var(--card-radius); box-shadow:var(--shadow-sm); overflow: hidden;
      position: sticky; top: 88px;
    }
    .panel-dk {
      background: #1a2235;
      border: 1px solid rgba(255,255,255,.09);
      box-shadow: 0 8px 40px rgba(0,0,0,.4);
    }
    .panel-lt {
      background: #fff;
      border: 1px solid #e8eaed;
      box-shadow: 0 4px 24px rgba(0,0,0,.07);
    }
    .panel-bar {
      display: flex; align-items: center; gap: .65rem;
      padding: .9rem 1.25rem; border-bottom: 1px solid;
    }
    .panel-dk .panel-bar { border-color: var(--surface-2); background: rgba(255,255,255,.025); }
    .panel-lt .panel-bar { border-color: #e8eaed; background: #f8f9fa; }
    .panel-dots { display: flex; gap: .3rem; }
    .panel-dots span { width: 9px; height: 9px; border-radius: 50%; }
    .dot-r { background: #f87171; } .dot-y { background: #fdc010; } .dot-g { background: #4ade80; }
    .panel-head-label { font-size: .75rem; font-weight: var(--fw-semibold); }
    .panel-dk .panel-head-label { color: rgba(255,255,255,.4); }
    .panel-lt .panel-head-label { color: #9aa0a6; }
    .panel-body { padding:var(--card-padding); }

    /* stat mini-grid */
    .panel-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; margin-bottom: 1.1rem; }
    .p-stat {
      padding: 1.25rem; border-radius:var(--radius-sm); box-shadow:var(--shadow-sm); text-align: center;
    }
    .panel-dk .p-stat { background: rgba(255,255,255,.05); border: 1px solid var(--surface-2); }
    .panel-lt .p-stat { background: #f8f9fa; border: 1px solid #e8eaed; }
    .p-stat-num {
      font-family: 'Google Sans Display', sans-serif;
      font-size: 1.3rem; font-weight: var(--fw-bold); line-height: 1;
    }
    .panel-dk .p-stat-num { color: #fdc010; }
    .panel-lt .p-stat-num { color: #1a73e8; }
    .p-stat-lbl { font-size: .68rem; margin-top: .2rem; }
    .panel-dk .p-stat-lbl { color: rgba(255,255,255,.35); }
    .panel-lt .p-stat-lbl { color: #9aa0a6; }

    /* separator */
    .panel-sep { height: 1px; margin: 1rem 0; }
    .panel-dk .panel-sep { background: var(--surface-2); }
    .panel-lt .panel-sep { background: #e8eaed; }
    .panel-micro {
      font-size: .68rem; font-weight: var(--fw-semibold);
      letter-spacing: var(--ls-normal); text-transform: uppercase; margin-bottom: .75rem;
    }
    .panel-dk .panel-micro { color: rgba(255,255,255,.3); }
    .panel-lt .panel-micro { color: #9aa0a6; }

    /* LLM rows */
    .llm-list { display: flex; flex-direction: column; gap: .5rem; }
    .llm-row {
      display: flex; align-items: center; justify-content: space-between;
      gap: .75rem;
      padding: .85rem 1.1rem; border-radius: var(--r-md);
    }
    .panel-dk .llm-row { background: var(--surface-1); border: 1px solid rgba(255,255,255,.06); }
    .llm-name { font-size: .82rem; font-weight: var(--fw-semibold); flex-shrink: 1; min-width: 0; }
    .panel-dk .llm-name { color: #fff; }
    .panel-lt .llm-name { color: #202124; }
    .llm-pill {
      font-size: .67rem; font-weight: var(--fw-semibold);
      padding: .15rem .5rem; border-radius: 4px;
    }
    .pill-gold   { background: rgba(253,192,16,.15);   color: #fdc010; }
    .pill-blue   { background: rgba(138,180,248,.15);  color: #8ab4f8; }
    .pill-green  { background: rgba(52,211,153,.15);   color: #34d399; }
    .pill-purple { background: rgba(167,139,250,.15);  color: #a78bfa; }

    /* process rows */
    .proc-list { display: flex; flex-direction: column; gap: 0; }
    .proc-row {
      display: flex; gap: .8rem; align-items: flex-start;
      padding: .75rem 0; border-bottom: 1px solid;
    }
    .panel-dk .proc-row { border-color: rgba(255,255,255,.06); }
    .panel-lt .proc-row { border-color: #f1f3f4; }
    .proc-row:last-child { border-bottom: none; padding-bottom: 0; }
    .proc-num {
      width: 26px; height: 26px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: .72rem; font-weight: var(--fw-bold); flex-shrink: 0;
    }
    .panel-dk .proc-num { background: rgba(253,192,16,.15); color: #fdc010; }
    .panel-lt .proc-num { background: #e8f0fe; color: #1a73e8; }
    .proc-num-icon {
      width: 26px; height: 26px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .panel-dk .proc-num-icon { background: rgba(253,192,16,.15); color: #fdc010; }
    .panel-lt .proc-num-icon { background: #e8f0fe; color: #1a73e8; }
    .proc-title { font-size: .8rem; font-weight: var(--fw-semibold); margin-bottom: .1rem; }
    .panel-dk .proc-title { color: #fff; }
    .panel-lt .proc-title { color: #202124; }
    .proc-desc { font-size: .73rem; line-height: var(--lh-snug); }
    .panel-dk .proc-desc { color: rgba(255,255,255,.35); }
    .panel-lt .proc-desc { color: #9aa0a6; }

    /* ─────────────────────────────────────────────────
       SECTION CTA ROW
    ───────────────────────────────────────────────── */
    .svc-section-cta { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 3rem; }

    /* ─────────────────────────────────────────────────
       HR DIVIDERS
    ───────────────────────────────────────────────── */
    hr.s-div { border: none; margin: 0 5%; }
    hr.s-div.dk { border-top: 1px solid var(--surface-2); }
    hr.s-div.lt { border-top: 1px solid #e8eaed; }

    /* → styles.css */

    /* → styles.css */

    /* ─────────────────────────────────────────────────
       FINAL CTA  (mirrors ns-cta pattern)
    ───────────────────────────────────────────────── */
    .svc-cta { text-align: center; padding: var(--sv) 0; background: var(--c-dark); }
    .svc-cta h2 {
      font-family: 'Google Sans Display', sans-serif;
      font-size: clamp(2rem, 4vw, 3.2rem);
      font-weight: var(--fw-normal); color: #fff;
      margin-bottom: 1rem; line-height: 1.15;
    }
    .svc-cta h2 strong { font-weight: var(--fw-bold); color: #fdc010; }
    .svc-cta p {
      font-size: 1rem; color: rgba(255,255,255,.55);
      max-width: 520px; margin: 0 auto 2.25rem; line-height: var(--lh-relaxed);
    }
    .svc-cta-btns { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.5rem; }
    .svc-cta-note {
      font-size: .8rem; color: rgba(255,255,255,.3);
      display: flex; gap: .35rem; justify-content: center;
      align-items: center; flex-wrap: wrap;
    }
    .svc-cta-note .sep { color: rgba(255,255,255,.15); }

    /* ─────────────────────────────────────────────────
       HERO ANIMATION
    ───────────────────────────────────────────────── */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(16px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .svc-hero-inner > * { animation: fadeUp .5s ease forwards; opacity: 0; }
    .svc-badge      { animation-delay: .05s; }
    .svc-hero h1    { animation-delay: .15s; }
    .svc-hero-sub   { animation-delay: .25s; }
    .svc-hero-ctas  { animation-delay: .35s; }
    .svc-hero-stats { animation-delay: .45s; }




    /* ════════════════════════════════════════════════════════
       STACKED CARDS — exact mdojxbN by mvaneijgen / GSAP
       Key mechanism:
       .card-container = CSS grid, ALL cards in same cell
       .card-wrapper   = grid-area 1/1/2/2 (all overlap)
       .extra-trigger  = margin-top: -50vh (pulls up)
       .trigger        = tall scroll container
       GSAP pins .extra-trigger, animates cards in from below
    ════════════════════════════════════════════════════════ */
    @media (max-width: 992px) {

      .svc-section-desktop, hr.s-div { display: none !important; }

      /* Section wrapper */
      .svc-stack-section {
        background: #080b12;
        /* GSAP pin fix: overflow must not be hidden on any parent */
        overflow: visible !important;
        /* NEW: Adds deep padding to contain the 90px card overhang */
        padding-bottom: 8rem; 
      }
      /* Override global overflow-x:hidden for GSAP pin to work */
      html.svc-stack-active,
      .svc-stack-active body {
        overflow-x: clip !important; /* clip instead of hidden — doesn't break pin */
      }

      /* Header */
      .svc-stack-header {
        max-width: 540px; margin: 0 auto;
        padding: var(--sv) var(--cp) 2rem; text-align: center;
      }
      .svc-stack-eyebrow {
        font-size: .68rem; font-weight: var(--fw-bold); letter-spacing: .14em;
        text-transform: uppercase; color: var(--c-brand);
        display: block; margin-bottom: .65rem;
      }
      .svc-stack-heading {
        font-family: 'Google Sans Display', sans-serif;
        font-size: clamp(1.7rem,6vw,2.1rem);
        font-weight: var(--fw-bold); color: #fff; line-height: 1.15; letter-spacing: -.01em;
      }
      .svc-stack-sub {
        font-size: .82rem; color: rgba(255,255,255,.38);
        margin-top: .65rem; line-height: var(--lh-normal);
      }

      /* ── .trigger — the tall scroll distance container ── */
     /* ── .trigger — the tall scroll distance container ── */
      .sc-trigger {
        position: relative;
        overflow: visible !important;
        /* height removed: GSAP pinSpacing will handle this dynamically */
      }

      /* ── .extra-trigger — gets PINNED by GSAP ────────── */
      .sc-extra-trigger {
        margin-top: 1rem;
        /* CRITICAL FIX: Forces container to be 120px taller to catch the 90px pushed cards + shadow */
        padding-bottom: 120px; 
        position: relative;
        z-index: 2;
        overflow: visible !important;
      }

      /* ── .card-container — CSS GRID, all cards same cell ─ */
      .sc-card-container {
        display: grid;
        position: relative;
        z-index: 2;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        grid-column-gap: 0;
        grid-row-gap: 0;
        align-items: center;
        justify-items: center;
        width: 90%;
        max-width: 500px;
        margin: 0 auto;
        /* Swapped vh for dvh to prevent mobile address bar jumping */
        height: 75dvh; 
        max-height: 600px;
      }

      /* ── .card-wrapper — SAME GRID CELL (all overlap) ── */
      .sc-card-wrapper {
        grid-area: 1 / 1 / 2 / 2; /* exact from CodePen */
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        transform-origin: center top; /* for rotationX */
      }

      /* ── .sc-card — the visual card ─────────────────── */
      .sc-card {
        width: 100%;
        height: 100%;
        border-radius: 28px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        box-shadow: 0 8px 40px rgba(0,0,0,.4);
        position: relative;
        box-sizing: border-box;
        overflow-y: auto;
      }

      /* Light card backgrounds */
      .sc-card-wrapper:nth-child(1) .sc-card { background: rgb(245,245,245); }
      .sc-card-wrapper:nth-child(2) .sc-card { background: rgb(248,248,248); }
      .sc-card-wrapper:nth-child(3) .sc-card { background: rgb(252,252,252); }
      .sc-card-wrapper:nth-child(4) .sc-card { background: rgb(255,255,255); }

      /* Top accent bar */
      .sc-card::before {
        content:''; position:absolute; top:0;left:0;right:0;height:3px;z-index:2;
        border-radius:28px 28px 0 0;
      }
      .sc-card-wrapper:nth-child(1) .sc-card::before{background:linear-gradient(90deg,#fdc010,rgba(253,192,16,.15));}
      .sc-card-wrapper:nth-child(2) .sc-card::before{background:linear-gradient(90deg,#3b82f6,rgba(59,130,246,.15));}
      .sc-card-wrapper:nth-child(3) .sc-card::before{background:linear-gradient(90deg,#10b981,rgba(16,185,129,.15));}
      .sc-card-wrapper:nth-child(4) .sc-card::before{background:linear-gradient(90deg,#8b5cf6,rgba(139,92,246,.15));}

      /* Card inner parts */
      .sc-title {
        font-family: 'Google Sans Display', sans-serif;
        font-size: clamp(.95rem,3.8vw,1.2rem); font-weight: var(--fw-bold); color: #111;
        padding: 1.25rem 1.25rem .65rem; line-height: 1.25;
        display: flex; align-items: center; gap: .55rem; flex-shrink: 0;
      }
      .sc-num {
        display:inline-flex;align-items:center;justify-content:center;
        width:26px;height:26px;border-radius: var(--r-sm);
        font-size:.7rem;font-weight: var(--fw-bold);flex-shrink:0;
      }
      .sc-card-wrapper:nth-child(1) .sc-num{background:rgba(253,192,16,.15);color:#a07800;}
      .sc-card-wrapper:nth-child(2) .sc-num{background:rgba(59,130,246,.12);color:#1d4ed8;}
      .sc-card-wrapper:nth-child(3) .sc-num{background:rgba(16,185,129,.12);color:#047857;}
      .sc-card-wrapper:nth-child(4) .sc-num{background:rgba(139,92,246,.12);color:#6d28d9;}

      .sc-visual{padding:0 1.1rem .65rem;flex-shrink:0;}
      .sc-visual-frame{border-radius: var(--r-md);overflow:hidden;border:1px solid rgba(0,0,0,.08);background:#1a1f2e;}
      .sc-frame-bar{display:flex;align-items:center;gap:.4rem;padding:.45rem .85rem;background:var(--surface-1);border-bottom:1px solid var(--surface-2);}
      .sc-dot{width:7px;height:7px;border-radius:50%;}
      .sc-dot-r{background:#ef4444;}.sc-dot-y{background:#fdc010;}.sc-dot-g{background:#22c55e;}
      .sc-frame-title{font-size:.57rem;font-weight: var(--fw-semibold);color:rgba(255,255,255,.25);letter-spacing:.07em;margin-left:.3rem;}
      .sc-frame-body{padding:.75rem;}

      .sc-content{padding:.35rem 1.25rem 1.4rem;flex:1;overflow-y:auto;}
      .sc-lead{font-size:.78rem;color:#444;line-height:1.7;margin-bottom:.8rem;}
      .sc-feats{display:flex;flex-direction:column;gap:.38rem;margin-bottom:1rem;}
      .sc-feat{display:flex;align-items:flex-start;gap:.5rem;padding:.6rem .8rem;border-radius: var(--r-sm,10px);background:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.065);}
      .sc-feat-bullet{width:5px;height:5px;border-radius:50%;flex-shrink:0;margin-top:.4rem;}
      .sc-card-wrapper:nth-child(1) .sc-feat-bullet{background:#fdc010;}
      .sc-card-wrapper:nth-child(2) .sc-feat-bullet{background:#3b82f6;}
      .sc-card-wrapper:nth-child(3) .sc-feat-bullet{background:#10b981;}
      .sc-card-wrapper:nth-child(4) .sc-feat-bullet{background:#8b5cf6;}
      .sc-feat-text{font-size:.74rem;color:#333;line-height:1.55;}
      .sc-feat-tag{display:block;font-size:.62rem;font-weight: var(--fw-bold);margin-top:.14rem;}
      .sc-card-wrapper:nth-child(1) .sc-feat-tag{color:#a07800;}
      .sc-card-wrapper:nth-child(2) .sc-feat-tag{color:#1d4ed8;}
      .sc-card-wrapper:nth-child(3) .sc-feat-tag{color:#047857;}
      .sc-card-wrapper:nth-child(4) .sc-feat-tag{color:#6d28d9;}

      .sc-cta{display:flex;gap:.45rem;flex-wrap:wrap;padding-top:.85rem;border-top:1px solid rgba(0,0,0,.07);flex-shrink:0;}
      .sc-cta a{flex:1;min-width:100px;text-align:center;justify-content:center;padding:.55rem .7rem;font-size:.76rem;border-radius: var(--r-full);}
      .sc-card-wrapper:nth-child(1) .sc-cta .btn-svc{background:#fdc010;color:#111;}
      .sc-card-wrapper:nth-child(2) .sc-cta .btn-svc{background:#2563eb;color:#fff;}
      .sc-card-wrapper:nth-child(3) .sc-cta .btn-svc{background:#059669;color:#fff;}
      .sc-card-wrapper:nth-child(4) .sc-cta .btn-svc{background:#7c3aed;color:#fff;}
      .sc-cta .btn-outline-white{background:transparent;color:#555;border-color:rgba(0,0,0,.2);}
    }
    @media (min-width: 993px) { .svc-stack-section { display: none; } }

    /* Responsive breakpoints → assets/css/responsive.css */