/* ============================================================
   v8 → v9 monochrome port — shared base for ported service sections.
   Bespoke v8 components recolored to the v9 black-and-white theme.
   Scope wrapper: .v8 (tokens/text) + .svc-XXX (per-page components)
   ============================================================ */
.v8{background:#000;color:rgba(255,255,255,.85)}
.v8 .section{background:transparent}
.v8 p{color:rgba(255,255,255,.7)}
.v8 h2,.v8 h3,.v8 h4,.v8 h5,.v8 h6{color:#fff;font-weight:var(--w-light);letter-spacing:-.02em}
.v8 .d-md{font-size:clamp(28px,3.8vw,42px);letter-spacing:-.014em;line-height:1.12;font-weight:var(--w-light)}
.v8 .grad-text,.v8 .teal-text{background:linear-gradient(90deg,#bbbbbb,#ffffff);-webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic}
.v8 .lead{font-size:clamp(16px,1.55vw,19px);line-height:1.6;color:rgba(255,255,255,.6)}
.v8 .section-head{max-width:780px;margin-bottom:48px}
.v8 .reveal[data-d="1"]{transition-delay:.09s}.v8 .reveal[data-d="2"]{transition-delay:.18s}.v8 .reveal[data-d="3"]{transition-delay:.27s}.v8 .reveal[data-d="4"]{transition-delay:.36s}.v8 .reveal[data-d="5"]{transition-delay:.45s}

/* ===== SEO · AEO · GEO ===== */
  /* ===== bespoke styling — SEO·AEO·GEO journey (scoped to .svc-seo) ===== */
  .svc-seo .reveal-l{transform:translateX(-42px)}
  .svc-seo .reveal-r{transform:translateX(42px)}
  .svc-seo .reveal-l.in,.svc-seo .reveal-r.in{transform:none}
  .svc-seo .chap{display:inline-flex;align-items:center;gap:13px;margin-bottom:20px}
  .svc-seo .chap b{font-family:var(--f-display);font-size:13px;color:#000000;background:#ffffff;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:600;flex:none}
  .svc-seo .chap span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.6)}
  .svc-seo .band-alt{background:linear-gradient(180deg,rgba(0,0,0,.45),transparent 80%)}

  /* two-worlds split */
  .tw{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:48px}
  .tw-panel{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:26px;position:relative;overflow:hidden}
  .tw-panel .tw-h{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:18px;display:flex;align-items:center;gap:9px}
  .tw-panel .tw-h img{width:16px;height:16px}
  .serp-search{display:flex;align-items:center;gap:9px;background:#0a0a0a;border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:10px 15px;margin-bottom:16px;font-size:12.5px;color:#ffffff}
  .serp-search svg{width:14px;height:14px;color:rgba(255,255,255,.6);flex:none}
  .serp-row{display:flex;flex-direction:column;gap:6px;padding:11px 12px;border-radius:9px;margin-bottom:9px;border:1px solid transparent;transition:.4s}
  .serp-row .l1{height:8px;width:62%;border-radius:3px;background:rgba(255,255,255,.32)}
  .serp-row .l2{height:5px;width:42%;border-radius:3px;background:rgba(255,255,255,.55)}
  .serp-row.you{background:linear-gradient(90deg,rgba(255,255,255,.24),transparent);border-color:rgba(255,255,255,.45);position:relative;animation:youRise 5s var(--ease) infinite}
  .serp-row.you .l1{background:#ffffff;width:54%}
  .serp-row.you::after{content:'YOU · #1';position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:9px;letter-spacing:.1em;color:#000000;background:linear-gradient(90deg,#bbbbbb,#ffffff);padding:4px 9px;border-radius:999px;font-weight:600}
  @keyframes youRise{0%,12%{transform:translateY(150px);opacity:.4}38%,100%{transform:translateY(0);opacity:1}}
  .serp-ph{opacity:.5}
  .ai-head{display:flex;align-items:center;gap:11px;margin-bottom:16px}
  .ai-av{width:30px;height:30px;border-radius:50%;background:linear-gradient(90deg,#bbbbbb,#ffffff);display:grid;place-items:center;flex:none}
  .ai-av svg{width:16px;height:16px;color:#000000}
  .ai-line{height:9px;border-radius:4px;background:rgba(255,255,255,.26);margin-bottom:11px}
  .ai-line.t1{width:96%;animation:aiType 3.2s var(--ease) infinite}
  .ai-line.t2{width:88%;animation:aiType 3.2s var(--ease) .2s infinite}
  .ai-line.t3{width:70%;animation:aiType 3.2s var(--ease) .4s infinite}
  @keyframes aiType{0%,100%{opacity:.32}50%{opacity:.9}}
  .ai-cite{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;color:#ffffff;border:1px solid rgba(255,255,255,.4);border-radius:999px;padding:7px 12px;background:rgba(255,255,255,.14);margin-top:6px;animation:citePulse 2.6s var(--ease) infinite}
  .ai-cite img{width:14px;height:14px}
  @keyframes citePulse{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}50%{box-shadow:0 0 18px 1px rgba(255,255,255,.4)}}

  /* dual capability split */
  .dual{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:44px}
  .dual-col{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:30px}
  .dual-col>.dh{display:flex;align-items:center;gap:11px;margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.07)}
  .dual-col>.dh img{width:22px;height:22px}
  .dual-col>.dh b{font-family:var(--f-display);font-size:18px;color:#fff;font-weight:500}
  .dual-col>.dh small{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-top:2px}
  .dual-item{display:flex;gap:13px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.05)}
  .dual-item:last-child{border-bottom:0}
  .dual-item .di{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.06);display:grid;place-items:center;color:#ffffff;flex:none}
  .dual-item .di svg{width:17px;height:17px}
  .dual-item h5{font-size:14.5px;color:#fff;font-family:var(--f-display);font-weight:500;margin-bottom:4px}
  .dual-item p{font-size:13px;color:rgba(255,255,255,.6);line-height:1.5}

  /* indexing pipeline */
  .pipe{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:50px}
  .pipe-rail{position:absolute;top:31px;left:13%;right:13%;height:2px;background:rgba(255,255,255,.08);z-index:1;overflow:hidden;border-radius:2px}
  .pipe-rail i{position:absolute;top:0;left:0;height:100%;width:36%;background:linear-gradient(90deg,transparent,#ffffff,transparent);animation:pipeflow 3.2s linear infinite}
  @keyframes pipeflow{0%{transform:translateX(-120%)}100%{transform:translateX(380%)}}
  .pipe-stage{position:relative;z-index:2;text-align:center;padding:0 10px}
  .pipe-ico{width:64px;height:64px;border-radius:18px;margin:0 auto 18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);display:grid;place-items:center;color:#ffffff;position:relative}
  .pipe-ico svg{width:27px;height:27px}
  .pipe-ico .pn{position:absolute;top:-7px;right:-7px;font-family:var(--f-display);font-size:11px;color:#000000;background:#ffffff;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-weight:600}
  .pipe-stage h4{font-size:16px;color:#fff;margin-bottom:8px;font-family:var(--f-display);font-weight:500}
  .pipe-stage p{font-size:13px;color:rgba(255,255,255,.6);line-height:1.5}

  /* ===== hero centerpiece — "Found everywhere" visibility hub ===== */
  .svc-seo .seo-hub{position:relative;width:100%;max-width:460px;aspect-ratio:1/1;margin:0 auto}
  .svc-seo .seo-hub-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
  .svc-seo .seo-halo{transform-origin:230px 230px;animation:seoHaloBreathe 6s var(--ease) infinite}
  @keyframes seoHaloBreathe{0%,100%{opacity:.65;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}
  .svc-seo .seo-radar{transform-origin:230px 230px;animation:seoRadarSpin 9s linear infinite}
  @keyframes seoRadarSpin{to{transform:rotate(360deg)}}
  .svc-seo .seo-spokes path{stroke-dasharray:4 7;animation:seoSpokeDash 2.4s linear infinite}
  @keyframes seoSpokeDash{to{stroke-dashoffset:-22}}
  .svc-seo .seo-out{filter:drop-shadow(0 0 4px rgba(255,255,255,.8))}
  .svc-seo .seo-in{filter:drop-shadow(0 0 4px rgba(255,255,255,.8))}
  .svc-seo .seo-hub-core{transform-origin:230px 230px;animation:seoHubFloat 5s var(--ease) infinite}
  @keyframes seoHubFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
  .svc-seo .seo-hub-pulse{transform-origin:230px 230px;animation:seoHubPulse 3s var(--ease) infinite}
  @keyframes seoHubPulse{0%{transform:scale(1);opacity:.85}70%,100%{transform:scale(1.7);opacity:0}}

  .svc-seo .seo-core-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;font-family:var(--f-display);font-weight:600;font-size:14px;line-height:1.15;color:#000000;letter-spacing:.01em;text-shadow:0 0 10px rgba(255,255,255,.6);pointer-events:none}

  /* search-surface tiles */
  .svc-seo .seo-tile{position:absolute;background:rgba(0,0,0,.86);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:9px 11px;backdrop-filter:blur(4px);width:118px;animation:seoTileLight 7.2s var(--ease) infinite;animation-delay:calc(var(--i) * 1.2s)}
  @keyframes seoTileLight{0%,72%,100%{border-color:rgba(255,255,255,.18);box-shadow:none}10%,30%{border-color:rgba(255,255,255,.7);box-shadow:0 0 18px rgba(255,255,255,.45)}}
  .svc-seo .seo-tile img{width:13px;height:13px;flex:none}
  .svc-seo .seo-tile-head{display:flex;align-items:center;gap:6px;font-size:10.5px;color:#ffffff;font-weight:500}
  .svc-seo .seo-tile-foot{display:flex;align-items:center;gap:6px;font-size:9.5px;color:rgba(255,255,255,.6);margin-top:7px}
  .svc-seo .seo-tile-cap{display:block;font-size:10.5px;color:#ffffff;text-align:center;margin-top:6px;font-weight:500}
  .svc-seo .seo-chip{margin-left:auto;font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:#000000;background:linear-gradient(90deg,#bbbbbb,#ffffff);border-radius:999px;padding:2px 7px;font-weight:600}

  .svc-seo .t-top{top:-6px;left:50%;transform:translateX(-50%)}
  .svc-seo .t-tr{top:23%;right:-14px}
  .svc-seo .t-br{bottom:23%;right:-14px}
  .svc-seo .t-bot{bottom:-6px;left:50%;transform:translateX(-50%);width:auto;text-align:center}
  .svc-seo .t-bl{bottom:23%;left:-14px}
  .svc-seo .t-tl{top:23%;left:-14px}

  /* mini SERP card */
  .svc-seo .seo-serp{position:relative;background:#0a0a0a;border-radius:7px;padding:8px 9px 8px 26px;margin:7px 0}
  .svc-seo .seo-serp-badge{position:absolute;left:7px;top:50%;transform:translateY(-50%);width:14px;height:14px;border-radius:50%;background:linear-gradient(90deg,#bbbbbb,#ffffff);color:#000000;font-family:var(--f-display);font-size:9px;font-weight:600;display:grid;place-items:center}
  .svc-seo .seo-serp-l1{display:block;height:5px;width:80%;border-radius:3px;background:#ffffff}
  .svc-seo .seo-serp-l2{display:block;height:4px;width:58%;border-radius:3px;background:rgba(255,255,255,.6);margin-top:4px}

  /* AI answer / overview lines */
  .svc-seo .seo-ans-l1,.svc-seo .seo-ans-l2{display:block;height:5px;border-radius:3px;background:rgba(255,255,255,.32);margin-top:7px}
  .svc-seo .seo-ans-l1{width:92%;animation:seoTypeLine 3s var(--ease) infinite}
  .svc-seo .seo-ans-l2{width:66%;animation:seoTypeLine 3s var(--ease) .3s infinite}
  @keyframes seoTypeLine{0%,100%{opacity:.34}50%{opacity:.95}}
  .svc-seo .seo-ov-src{display:block;height:5px;width:40%;border-radius:3px;background:linear-gradient(90deg,#bbbbbb,#ffffff);margin-top:7px}

  /* maps pin / youtube / analytics bars */
  .svc-seo .seo-pin{width:30px;height:30px;margin:0 auto;color:#ffffff;animation:seoPinBob 3.4s var(--ease) infinite}
  .svc-seo .seo-pin svg{width:100%;height:100%}
  @keyframes seoPinBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
  .svc-seo .seo-yt{width:30px;height:22px;margin:8px auto 2px;border-radius:6px;background:rgba(255,255,255,.06);display:grid;place-items:center;color:#ffffff}
  .svc-seo .seo-yt svg{width:12px;height:12px}
  .svc-seo .seo-bars{display:flex;align-items:flex-end;gap:5px;height:30px;margin-top:8px;justify-content:center}
  .svc-seo .seo-bars i{width:9px;height:#ffffff;background:linear-gradient(90deg,#bbbbbb,#ffffff);border-radius:2px 2px 0 0;transform-origin:bottom;animation:seoBarGrow 2.8s var(--ease) infinite}
  .svc-seo .seo-bars i:nth-child(2){animation-delay:.2s}
  .svc-seo .seo-bars i:nth-child(3){animation-delay:.4s}
  .svc-seo .seo-bars i:nth-child(4){animation-delay:.6s}
  @keyframes seoBarGrow{0%,100%{transform:scaleY(.55);opacity:.7}50%{transform:scaleY(1);opacity:1}}

  @media(max-width:860px){
    .svc-seo .seo-hub{max-width:340px}
    .svc-seo .seo-tile{width:96px;padding:7px 8px}
    .svc-seo .t-tr,.svc-seo .t-br,.svc-seo .t-tl,.svc-seo .t-bl{right:-2px;left:auto}
    .svc-seo .t-tl,.svc-seo .t-bl{left:-2px;right:auto}
    .svc-seo .seo-core-label{font-size:12px}
  }

  @media(max-width:820px){.tw,.dual{grid-template-columns:1fr}.pipe{grid-template-columns:1fr 1fr;gap:28px 8px}.pipe-rail{display:none}}
  @media(prefers-reduced-motion:reduce){
    .serp-row.you,.ai-line,.ai-cite,.pipe-rail i{animation:none}
    .svc-seo .seo-halo,.svc-seo .seo-radar,.svc-seo .seo-spokes path,.svc-seo .seo-hub-core,.svc-seo .seo-hub-pulse,.svc-seo .seo-tile,.svc-seo .seo-ans-l1,.svc-seo .seo-ans-l2,.svc-seo .seo-pin,.svc-seo .seo-bars i{animation:none}
    .svc-seo .seo-flow animateMotion{display:none}
    .svc-seo .seo-flow circle{display:none}
  }

/* ===== Paid Advertising ===== */
  /* ===== bespoke styling — Paid Advertising journey (scoped to .svc-ads) ===== */
  .svc-ads .reveal-l{transform:translateX(-42px)}
  .svc-ads .reveal-r{transform:translateX(42px)}
  .svc-ads .reveal-l.in,.svc-ads .reveal-r.in{transform:none}
  .svc-ads .chap{display:inline-flex;align-items:center;gap:13px;margin-bottom:20px}
  .svc-ads .chap b{font-family:var(--f-display);font-size:13px;color:#000000;background:#ffffff;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:600;flex:none}
  .svc-ads .chap span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.6)}
  .svc-ads .band-alt{background:linear-gradient(180deg,rgba(0,0,0,.45),transparent 80%)}

  /* ---- CH.01 — the leak (two-panel: spend in vs leads out) ---- */
  .svc-ads .leak{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:48px}
  .svc-ads .leak-panel{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:28px;position:relative;overflow:hidden}
  .svc-ads .leak-panel .lh{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:20px;display:flex;align-items:center;gap:9px}
  .svc-ads .leak-panel.blind{border-color:rgba(255,255,255,.06)}
  .svc-ads .leak-panel.built{border-color:rgba(255,255,255,.4)}
  .svc-ads .leak-bag{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
  .svc-ads .leak-bag b{font-family:var(--f-display);font-size:34px;color:#fff;font-weight:500;line-height:1}
  .svc-ads .leak-bag span{font-size:12px;color:rgba(255,255,255,.6)}
  .svc-ads .leak-track{height:9px;border-radius:6px;background:#0a0a0a;overflow:hidden;margin:18px 0 8px}
  .svc-ads .leak-track i{display:block;height:100%;border-radius:6px}
  .svc-ads .leak-track.bad i{width:28%;background:linear-gradient(90deg,#7a2b2b,rgba(255,255,255,.45))}
  .svc-ads .leak-track.good i{width:78%;background:linear-gradient(90deg,#bbbbbb,#ffffff)}
  .svc-ads .leak-cap{font-size:13px;color:rgba(255,255,255,.6);line-height:1.55}
  .svc-ads .leak-cap strong{color:#ffffff;font-weight:500}
  .svc-ads .drip{position:absolute;width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.45);opacity:0}
  .svc-ads .leak-panel.blind .drip{animation:dripFall 2.8s linear infinite}
  .svc-ads .drip.d2{left:36%;animation-delay:.9s}
  .svc-ads .drip.d3{left:62%;animation-delay:1.7s}
  .svc-ads .drip.d1{left:18%}
  @keyframes dripFall{0%{top:64%;opacity:0}12%{opacity:.85}88%{opacity:.7}100%{top:108%;opacity:0}}

  /* ---- CH.02 — the funnel (signature diagram) ---- */
  .svc-ads .funnel{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;margin-top:50px}
  .svc-ads .fn-stage{position:relative;margin:0 auto;width:100%;max-width:440px}
  .svc-ads .fn-feed{display:flex;justify-content:center;gap:12px;margin-bottom:10px;flex-wrap:wrap}
  .svc-ads .fn-feed span{width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);display:grid;place-items:center}
  .svc-ads .fn-feed img{width:20px;height:20px}
  .svc-ads .fn-label{text-align:center;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6);margin:14px 0 6px}
  .svc-ads .fn-body{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(0,0,0,.5));border:1px solid rgba(255,255,255,.07);border-radius:18px;padding:22px 26px 26px;overflow:hidden;clip-path:polygon(0 0,100% 0,80% 100%,20% 100%)}
  .svc-ads .fn-top{text-align:center;font-size:13px;color:#ffffff;padding-bottom:18px}
  .svc-ads .fn-opt{margin:6px auto;max-width:300px;text-align:center;background:rgba(255,255,255,.28);border:1px solid rgba(255,255,255,.4);border-radius:12px;padding:13px 16px;animation:optPulse 2.8s var(--ease) infinite}
  .svc-ads .fn-opt b{display:block;font-family:var(--f-display);font-size:14px;color:#fff;font-weight:500;margin-bottom:3px}
  .svc-ads .fn-opt span{font-size:11.5px;color:#ffffff}
  @keyframes optPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}50%{box-shadow:0 0 22px 1px rgba(255,255,255,.32)}}
  .svc-ads .fn-out{text-align:center;margin-top:20px}
  .svc-ads .fn-out .lead-pill{display:inline-flex;align-items:center;gap:9px;background:linear-gradient(90deg,#bbbbbb,#ffffff);color:#000000;font-family:var(--f-display);font-weight:600;font-size:14px;padding:11px 22px;border-radius:999px}
  .svc-ads .fn-out small{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-top:12px}
  .svc-ads .pkt{position:absolute;left:50%;top:6px;width:7px;height:7px;border-radius:50%;background:#ffffff;margin-left:-3.5px;opacity:0;box-shadow:0 0 8px 1px rgba(255,255,255,.6)}
  .svc-ads .pkt.p1{animation:pktFall 2.6s linear infinite}
  .svc-ads .pkt.p2{animation:pktFall 2.6s linear .65s infinite}
  .svc-ads .pkt.p3{animation:pktFall 2.6s linear 1.3s infinite}
  .svc-ads .pkt.p4{animation:pktFall 2.6s linear 1.95s infinite}
  @keyframes pktFall{0%{top:0;opacity:0;transform:translateX(0) scale(1)}10%{opacity:1}50%{transform:translateX(0)}90%{opacity:1}100%{top:96%;opacity:0;transform:translateX(0) scale(.55)}}

  /* cost-per-lead meter */
  .svc-ads .cpl{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:30px}
  .svc-ads .cpl .ct{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:6px}
  .svc-ads .cpl h4{font-family:var(--f-display);font-size:18px;color:#fff;font-weight:500;margin-bottom:22px}
  .svc-ads .cpl-num{font-family:var(--f-display);font-weight:600;line-height:1}
  .svc-ads .cpl-from{font-size:24px;color:rgba(255,255,255,.45);text-decoration:line-through;text-decoration-color:rgba(196,96,96,.6)}
  .svc-ads .cpl-arrow{margin:0 12px;color:rgba(255,255,255,.6)}
  .svc-ads .cpl-to{font-size:46px;color:#fff}
  .svc-ads .cpl-row{display:flex;align-items:baseline;margin-bottom:22px}
  .svc-ads .cpl-bar{height:14px;border-radius:8px;background:#0a0a0a;overflow:hidden;position:relative}
  .svc-ads .cpl-bar i{position:absolute;left:0;top:0;height:100%;border-radius:8px;background:linear-gradient(90deg,#bbbbbb,#ffffff);width:88%;animation:cplDrop 4.5s var(--ease) infinite}
  @keyframes cplDrop{0%,8%{width:88%}50%,92%{width:30%}100%{width:88%}}
  .svc-ads .cpl-scale{display:flex;justify-content:space-between;font-size:11px;color:rgba(255,255,255,.6);margin-top:8px}
  .svc-ads .cpl-note{font-size:12.5px;color:rgba(255,255,255,.6);line-height:1.55;margin-top:18px}

  /* ---- CH.02 feature grid (what's included) ---- */
  .svc-ads .feat{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
  .svc-ads .feat-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:24px;transition:.4s}
  .svc-ads .feat-card:hover{border-color:rgba(255,255,255,.34);transform:translateY(-3px)}
  .svc-ads .feat-card .fc-ico{width:42px;height:42px;border-radius:11px;background:rgba(255,255,255,.06);display:grid;place-items:center;color:#ffffff;margin-bottom:16px}
  .svc-ads .feat-card .fc-ico svg{width:21px;height:21px}
  .svc-ads .feat-card h4{font-family:var(--f-display);font-size:15.5px;color:#fff;font-weight:500;margin-bottom:7px}
  .svc-ads .feat-card p{font-size:13px;color:rgba(255,255,255,.6);line-height:1.55}

  /* ---- CH.03 — optimization loop ---- */
  .svc-ads .loop{display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;align-items:center;margin-top:50px}
  .svc-ads .loop-dial{position:relative;width:260px;height:260px;margin:0 auto}
  .svc-ads .loop-dial .ring{position:absolute;inset:0;border-radius:50%;border:1px dashed rgba(255,255,255,.28)}
  .svc-ads .loop-dial .sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0deg,rgba(255,255,255,.45) 60deg,transparent 120deg);animation:loopSpin 7s linear infinite}
  @keyframes loopSpin{to{transform:rotate(360deg)}}
  .svc-ads .loop-dial .hub{position:absolute;inset:34%;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);display:grid;place-items:center;text-align:center}
  .svc-ads .loop-dial .hub span{font-family:var(--f-display);font-size:11px;color:#ffffff;letter-spacing:.1em;text-transform:uppercase}
  .svc-ads .loop-node{position:absolute;width:62px;height:62px;border-radius:50%;background:#0a0a0a;border:1px solid rgba(255,255,255,.1);display:grid;place-items:center;text-align:center;color:#ffffff;font-size:11px;font-family:var(--f-display);font-weight:500}
  .svc-ads .loop-node.n1{top:-8px;left:50%;margin-left:-31px}
  .svc-ads .loop-node.n2{right:-8px;top:50%;margin-top:-31px}
  .svc-ads .loop-node.n3{bottom:-8px;left:50%;margin-left:-31px}
  .svc-ads .loop-node.n4{left:-8px;top:50%;margin-top:-31px}
  .svc-ads .loop-steps{display:flex;flex-direction:column;gap:14px}
  .svc-ads .loop-step{display:flex;gap:14px;align-items:flex-start;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:16px 18px}
  .svc-ads .loop-step .ls-n{font-family:var(--f-display);font-size:12px;color:#000000;background:#ffffff;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:600;flex:none}
  .svc-ads .loop-step h5{font-family:var(--f-display);font-size:14.5px;color:#fff;font-weight:500;margin-bottom:4px}
  .svc-ads .loop-step p{font-size:13px;color:rgba(255,255,255,.6);line-height:1.5}

  /* ---- HERO — "Performance command center" ---- */
  .svc-ads .cmd{position:relative;width:100%;max-width:480px;margin-inline:auto;color:var(--body);display:flex;flex-direction:column;gap:20px}
  .svc-ads .cmd-stage{position:relative;width:100%;aspect-ratio:46/36}
  .svc-ads .cmd-grid{position:absolute;inset:0;border-radius:22px;background:
      linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px) 0 0/100% 30px,
      linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px) 0 0/30px 100%;
    -webkit-mask:radial-gradient(120% 90% at 50% 50%,#000 35%,transparent 78%);
            mask:radial-gradient(120% 90% at 50% 50%,#000 35%,transparent 78%);opacity:.6}
  .svc-ads .cmd-glow{position:absolute;inset:0;background:radial-gradient(46% 46% at 50% 50%,rgba(255,255,255,.42),transparent 70%);filter:blur(6px);animation:adsBreath 6s var(--ease) infinite}
  @keyframes adsBreath{0%,100%{opacity:.55;transform:scale(.96)}50%{opacity:.9;transform:scale(1.04)}}
  .svc-ads .cmd-wires{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible}
  .svc-ads .cmd-wire{fill:none;stroke-width:1.4;opacity:.5}
  .svc-ads .cmd-flow{filter:drop-shadow(0 0 4px rgba(255,255,255,.8))}

  /* left rail — ad-platform sources */
  .svc-ads .cmd-sources{position:absolute;left:0;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:11px;z-index:3}
  .svc-ads .cmd-src{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:11px;padding:7px 11px 7px 8px;
    animation:adsSrcPulse 2.2s var(--ease) infinite;animation-delay:calc(var(--si)*.44s)}
  .svc-ads .cmd-src img{width:18px;height:18px;flex:none}
  .svc-ads .cmd-src b{font-family:var(--f-display);font-size:11px;color:#ffffff;font-weight:500;white-space:nowrap}
  @keyframes adsSrcPulse{0%,100%{border-color:rgba(255,255,255,.12);box-shadow:none}40%{border-color:rgba(255,255,255,.45);box-shadow:0 0 14px -2px rgba(255,255,255,.45)}}

  /* the AI core */
  .svc-ads .cmd-core{position:absolute;left:50%;top:50%;width:122px;height:122px;margin:-61px 0 0 -61px;z-index:2}
  .svc-ads .cmd-core-ring{position:absolute;inset:0;border-radius:50%;border:1px dashed rgba(255,255,255,.3);animation:adsSpin 16s linear infinite}
  .svc-ads .cmd-core-ring.r2{inset:14px;border-style:solid;border-color:rgba(255,255,255,.4);animation:adsSpin 11s linear reverse infinite}
  .svc-ads .cmd-core-sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0deg,rgba(255,255,255,.5) 70deg,transparent 150deg);animation:adsSpin 6s linear infinite}
  @keyframes adsSpin{to{transform:rotate(360deg)}}
  .svc-ads .cmd-core-hub{position:absolute;inset:26px;border-radius:50%;background:radial-gradient(circle at 50% 38%,rgba(255,255,255,.06),#0a0a0a);border:1px solid rgba(255,255,255,.18);display:grid;place-items:center;text-align:center;line-height:1}
  .svc-ads .cmd-core-hub svg{width:18px;height:18px;color:#ffffff;margin-bottom:5px;animation:adsSpin 9s linear infinite}
  .svc-ads .cmd-core-hub b{font-family:var(--f-display);font-size:11px;color:#fff;font-weight:600;display:block}
  .svc-ads .cmd-core-hub span{font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.72)}
  .svc-ads .cmd-opt{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,255,255,.6);animation:adsOpt 2.6s var(--ease) infinite}
  @keyframes adsOpt{0%{transform:scale(.7);opacity:.8}100%{transform:scale(1.4);opacity:0}}

  /* right column — qualified leads out */
  .svc-ads .cmd-leads{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px;z-index:3}
  .svc-ads .cmd-lead{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(120deg,rgba(255,255,255,.2),rgba(255,255,255,.12));border:1px solid rgba(255,255,255,.45);border-radius:999px;padding:7px 13px;
    font-family:var(--f-display);font-size:11px;font-weight:500;color:#eafff7;white-space:nowrap;animation:adsLeadIn 2.4s var(--ease) infinite;animation-delay:calc(var(--li)*.8s + .6s)}
  .svc-ads .cmd-lead i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.72);box-shadow:0 0 8px 1px rgba(255,255,255,.7);flex:none}
  @keyframes adsLeadIn{0%{opacity:.35;transform:translateX(6px)}30%{opacity:1;transform:none}80%{opacity:1}100%{opacity:.35;transform:translateX(6px)}}

  /* live metric dashboard */
  .svc-ads .cmd-dash{position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:8px;width:min(100%,360px);margin:0 auto;z-index:4}
  .svc-ads .cmd-tile{background:rgba(0,0,0,.82);border:1px solid rgba(255,255,255,.1);border-radius:11px;padding:9px 11px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
  .svc-ads .cmd-cap{display:block;font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:5px}
  .svc-ads .cmd-cpl{display:flex;align-items:center;gap:6px}
  .svc-ads .cmd-cpl-v,.svc-ads .cmd-roas-v{font-family:var(--f-display);font-size:18px;font-weight:600;color:#fff;line-height:1}
  .svc-ads .cmd-trend{width:13px;height:13px}
  .svc-ads .cmd-trend.down{color:rgba(255,255,255,.72);animation:adsBobD 2.6s var(--ease) infinite}
  .svc-ads .cmd-trend.up{color:#ffffff;animation:adsBobU 2.6s var(--ease) infinite}
  @keyframes adsBobD{0%,100%{transform:translateY(0)}50%{transform:translateY(2px)}}
  @keyframes adsBobU{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
  .svc-ads .cmd-gauge{height:5px;border-radius:4px;background:#0a0a0a;overflow:hidden;margin-top:7px}
  .svc-ads .cmd-gauge i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#bbbbbb,#ffffff);width:82%;animation:adsGaugeDn 4.6s var(--ease) infinite}
  .svc-ads .cmd-gauge.up i{width:34%;animation:adsGaugeUp 4.6s var(--ease) infinite}
  @keyframes adsGaugeDn{0%,8%{width:82%}55%,92%{width:30%}100%{width:82%}}
  @keyframes adsGaugeUp{0%,8%{width:30%}55%,92%{width:86%}100%{width:30%}}
  .svc-ads .cmd-bars{display:flex;align-items:flex-end;gap:4px;height:30px}
  .svc-ads .cmd-bars i{flex:1;border-radius:3px 3px 0 0;background:linear-gradient(90deg,#bbbbbb,#ffffff);height:#ffffff;transform-origin:bottom;animation:adsBar 2.8s var(--ease) infinite}
  .svc-ads .cmd-bars i:nth-child(2){animation-delay:.2s}
  .svc-ads .cmd-bars i:nth-child(3){animation-delay:.4s}
  .svc-ads .cmd-bars i:nth-child(4){animation-delay:.6s}
  .svc-ads .cmd-bars i:nth-child(5){animation-delay:.8s}
  .svc-ads .cmd-bars i:nth-child(6){animation-delay:1s}
  @keyframes adsBar{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1)}}
  .svc-ads .cmd-line{width:100%;height:30px;overflow:visible}
  .svc-ads .cmd-line-p{fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:260;stroke-dashoffset:260;animation:adsDraw 4.5s var(--ease) infinite}
  .svc-ads .cmd-line-p.b{stroke:rgba(255,255,255,.4);opacity:.7;animation-delay:.4s}
  @keyframes adsDraw{0%{stroke-dashoffset:260}45%,70%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}

  @media(max-width:820px){
    .svc-ads .leak,.svc-ads .funnel,.svc-ads .loop{grid-template-columns:1fr}
    .svc-ads .feat{grid-template-columns:1fr}
    .svc-ads .loop-dial{width:230px;height:230px}
  }
  @media(max-width:560px){
    .svc-ads .cmd-src b{display:none}
    .svc-ads .cmd-src{padding:6px}
    .svc-ads .cmd-dash{width:74%}
  }
  @media(prefers-reduced-motion:reduce){
    .svc-ads .drip,.svc-ads .fn-opt,.svc-ads .pkt,.svc-ads .cpl-bar i,.svc-ads .loop-dial .sweep,
    .svc-ads .cmd-glow,.svc-ads .cmd-src,.svc-ads .cmd-core-ring,.svc-ads .cmd-core-ring.r2,.svc-ads .cmd-core-sweep,.svc-ads .cmd-core-hub svg,.svc-ads .cmd-opt,
    .svc-ads .cmd-lead,.svc-ads .cmd-trend,.svc-ads .cmd-gauge i,.svc-ads .cmd-gauge.up i,.svc-ads .cmd-bars i,.svc-ads .cmd-line-p,.svc-ads .cmd-flow{animation:none}
    .svc-ads .cmd-line-p{stroke-dashoffset:0}
    .svc-ads .cpl-bar i{width:30%}
  }

/* ===== AI Lead Follow-Up ===== */
  /* ===== bespoke styling — AI Lead Follow-Up journey (scoped to .svc-lead) ===== */
  .svc-lead .reveal-l{transform:translateX(-42px)}
  .svc-lead .reveal-r{transform:translateX(42px)}
  .svc-lead .reveal-l.in,.svc-lead .reveal-r.in{transform:none}
  .svc-lead .chap{display:inline-flex;align-items:center;gap:13px;margin-bottom:20px}
  .svc-lead .chap b{font-family:var(--f-display);font-size:13px;color:#000000;background:#ffffff;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:600;flex:none}
  .svc-lead .chap span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.6)}
  .svc-lead .band-alt{background:linear-gradient(180deg,rgba(0,0,0,.45),transparent 80%)}

  /* CH.01 — the leak: cold-lead clock */
  .svc-lead .leak{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:48px;align-items:stretch}
  .svc-lead .leak-panel{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:30px;position:relative;overflow:hidden}
  .svc-lead .leak-panel .lp-h{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:20px}
  .svc-lead .leak-clock{display:flex;align-items:center;gap:16px}
  .svc-lead .leak-dial{width:74px;height:74px;border-radius:50%;flex:none;display:grid;place-items:center;position:relative;border:2px solid rgba(255,255,255,.1)}
  .svc-lead .leak-dial svg{width:30px;height:30px}
  .svc-lead .leak-dial .hand{position:absolute;top:50%;left:50%;width:2px;height:26px;background:#ffffff;transform-origin:bottom center;transform:translate(-50%,-100%);border-radius:2px}
  .svc-lead .leak-panel.cold .leak-dial{border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.5)}
  .svc-lead .leak-panel.cold .leak-dial .hand{background:rgba(255,255,255,.5);animation:leakSpin 6s linear infinite}
  .svc-lead .leak-panel.warm .leak-dial{border-color:rgba(255,255,255,.5);color:#ffffff;box-shadow:0 0 26px -4px rgba(255,255,255,.4)}
  .svc-lead .leak-panel.warm .leak-dial .hand{animation:leakTick 1s steps(8) infinite}
  @keyframes leakSpin{to{transform:translate(-50%,-100%) rotate(360deg)}}
  @keyframes leakTick{to{transform:translate(-50%,-100%) rotate(45deg)}}
  .svc-lead .leak-clock b{font-family:var(--f-display);font-size:30px;line-height:1;color:#fff;display:block}
  .svc-lead .leak-panel.cold .leak-clock b{color:rgba(255,255,255,.55)}
  .svc-lead .leak-panel.warm .leak-clock b{color:#ffffff}
  .svc-lead .leak-clock span{font-size:12.5px;color:rgba(255,255,255,.6)}
  .svc-lead .leak-drip{margin-top:24px;font-size:13px;color:rgba(255,255,255,.6);line-height:1.55}
  .svc-lead .leak-drip strong{color:#fff;font-weight:600}
  .svc-lead .leak-bar{height:8px;border-radius:5px;background:rgba(255,255,255,.07);margin-top:16px;overflow:hidden}
  .svc-lead .leak-bar i{display:block;height:100%;border-radius:5px}
  .svc-lead .leak-panel.cold .leak-bar i{width:42%;background:linear-gradient(90deg,#5d6f6d,rgba(255,255,255,.5));animation:leakDrain 4s var(--ease) infinite}
  .svc-lead .leak-panel.warm .leak-bar i{width:94%;background:linear-gradient(90deg,#bbbbbb,#ffffff)}
  @keyframes leakDrain{0%,100%{width:48%}50%{width:34%}}

  /* CH.02 — speed-to-lead timeline (signature diagram) */
  .svc-lead .stl{position:relative;margin-top:54px}
  .svc-lead .stl-rail{position:absolute;top:62px;left:4%;right:4%;height:3px;background:rgba(255,255,255,.09);border-radius:3px;z-index:1;overflow:hidden}
  .svc-lead .stl-rail i{position:absolute;top:0;left:0;height:100%;width:22%;background:linear-gradient(90deg,transparent,#ffffff,transparent);animation:stlPulse 3.6s linear infinite}
  @keyframes stlPulse{0%{transform:translateX(-120%)}100%{transform:translateX(560%)}}
  .svc-lead .stl-track{position:relative;z-index:2;display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
  .svc-lead .stl-node{text-align:center;padding:0 4px}
  .svc-lead .stl-dot{width:66px;height:66px;border-radius:18px;margin:0 auto 14px;background:#0f0f0f;border:1px solid rgba(255,255,255,.14);display:grid;place-items:center;color:#ffffff;position:relative;transition:.5s}
  .svc-lead .stl-dot svg{width:25px;height:25px}
  .svc-lead .stl-node.in .stl-dot{box-shadow:0 0 24px -6px rgba(255,255,255,.55);border-color:rgba(255,255,255,.4)}
  .svc-lead .stl-node .stl-when{font-family:var(--f-display);font-size:15px;color:#fff;font-weight:500;margin-bottom:5px}
  .svc-lead .stl-node .stl-what{font-size:12px;color:rgba(255,255,255,.6);line-height:1.45}
  .svc-lead .stl-start{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-bottom:8px;display:inline-flex;align-items:center;gap:8px}
  .svc-lead .stl-start::before{content:'';width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.72);box-shadow:0 0 0 0 rgba(255,255,255,.6);animation:stlPing 1.8s var(--ease) infinite}
  @keyframes stlPing{0%{box-shadow:0 0 0 0 rgba(255,255,255,.55)}70%,100%{box-shadow:0 0 0 11px rgba(255,255,255,0)}}
  /* contrasting competitor marker */
  .svc-lead .stl-vs{display:flex;flex-wrap:wrap;gap:18px;margin-top:46px}
  .svc-lead .stl-card{flex:1 1 220px;border-radius:16px;padding:22px 24px;position:relative;overflow:hidden}
  .svc-lead .stl-card.you{background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(0,0,0,.3));border:1px solid rgba(255,255,255,.4)}
  .svc-lead .stl-card.them{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);opacity:.62;filter:grayscale(.4)}
  .svc-lead .stl-card .sc-tag{font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px}
  .svc-lead .stl-card.you .sc-tag{color:#ffffff}
  .svc-lead .stl-card.them .sc-tag{color:rgba(255,255,255,.5)}
  .svc-lead .stl-card b{font-family:var(--f-display);font-size:34px;line-height:1;color:#fff;display:block;margin-bottom:6px}
  .svc-lead .stl-card.them b{color:rgba(255,255,255,.55)}
  .svc-lead .stl-card span{font-size:13px;color:rgba(255,255,255,.6)}
  .svc-lead .stl-stat{display:flex;align-items:center;gap:14px;margin-top:30px;background:linear-gradient(90deg,rgba(255,255,255,.16),transparent);border:1px solid rgba(255,255,255,.22);border-left:3px solid #ffffff;border-radius:12px;padding:16px 20px}
  .svc-lead .stl-stat b{font-family:var(--f-display);font-size:30px;color:#ffffff;line-height:1;flex:none}
  .svc-lead .stl-stat span{font-size:14px;color:#ffffff}

  /* CH.03 — what's included grid */
  .svc-lead .inc{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:46px}
  .svc-lead .inc-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:24px;transition:.4s}
  .svc-lead .inc-card:hover{border-color:rgba(255,255,255,.3);transform:translateY(-3px)}
  .svc-lead .inc-card .ic{width:42px;height:42px;border-radius:11px;background:rgba(255,255,255,.06);display:grid;place-items:center;color:#ffffff;margin-bottom:16px}
  .svc-lead .inc-card .ic svg{width:21px;height:21px}
  .svc-lead .inc-card h4{font-size:16px;color:#fff;font-family:var(--f-display);font-weight:500;margin-bottom:8px}
  .svc-lead .inc-card p{font-size:13.5px;color:rgba(255,255,255,.6);line-height:1.55}
  .svc-lead .inc-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;margin-top:30px;background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(0,0,0,.3));border:1px solid rgba(255,255,255,.22);border-radius:16px;padding:26px 30px}
  .svc-lead .inc-foot p{margin:0;max-width:52ch}
  .svc-lead .inc-foot h3{margin:0 0 6px}

  /* HERO — "Instant response engine" centerpiece */
  .svc-lead .ire{position:relative;width:100%;max-width:460px;margin:0 auto;aspect-ratio:1/1;font-family:var(--f-display)}
  .svc-lead .ire-stage{position:absolute;inset:0;display:grid;place-items:center}
  .svc-lead .ire-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
  /* connector lines + travelling pulses */
  .svc-lead .ire-link{stroke:rgba(255,255,255,.18);stroke-width:1.4;fill:none}
  .svc-lead .ire-flow{stroke:#ffffff;stroke-width:2;fill:none;stroke-linecap:round;stroke-dasharray:14 150;filter:drop-shadow(0 0 4px rgba(255,255,255,.6));animation:ireFlow 2.6s linear infinite}
  .svc-lead .ire-flow.f2{animation-delay:.35s}
  .svc-lead .ire-flow.f3{animation-delay:.7s}
  .svc-lead .ire-flow.f4{animation-delay:1.05s}
  @keyframes ireFlow{0%{stroke-dashoffset:164}100%{stroke-dashoffset:0}}
  /* central "new lead" core */
  .svc-lead .ire-core{position:relative;z-index:4;width:108px;height:108px;border-radius:50%;display:grid;place-items:center;text-align:center;
    background:radial-gradient(circle at 50% 38%,rgba(255,255,255,.55),rgba(255,255,255,.06));border:1.5px solid rgba(255,255,255,.5);box-shadow:0 0 40px -8px rgba(255,255,255,.7)}
  .svc-lead .ire-core::before,.svc-lead .ire-core::after{content:'';position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(255,255,255,.45);animation:irePing 2.4s var(--ease) infinite}
  .svc-lead .ire-core::after{animation-delay:1.2s}
  @keyframes irePing{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.1);opacity:0}}
  .svc-lead .ire-core em{font-style:normal;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.72);display:block;margin-bottom:2px}
  .svc-lead .ire-core b{font-size:17px;color:#fff;line-height:1.05;font-weight:600}
  .svc-lead .ire-core span{display:block;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#ffffff;margin-top:3px}
  /* channel nodes — fan out around core */
  .svc-lead .ire-node{position:absolute;z-index:5;width:60px;height:60px;border-radius:16px;display:grid;place-items:center;
    background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.16);color:#ffffff;
    transform:translate(-50%,-50%);box-shadow:0 0 0 0 rgba(255,255,255,0);animation:ireFire 2.6s var(--ease) infinite}
  .svc-lead .ire-node svg{width:24px;height:24px}
  .svc-lead .ire-node img{width:24px;height:24px;display:block}
  .svc-lead .ire-node i{position:absolute;top:-7px;right:-7px;font-style:normal;font-size:8px;font-weight:600;letter-spacing:.04em;
    background:rgba(255,255,255,.06);color:#ffffff;border:1px solid rgba(255,255,255,.35);border-radius:20px;padding:2px 6px;white-space:nowrap}
  .svc-lead .ire-node.n1{top:14%;left:50%}
  .svc-lead .ire-node.n2{top:50%;left:88%;animation-delay:.35s}
  .svc-lead .ire-node.n3{top:86%;left:50%;animation-delay:.7s}
  .svc-lead .ire-node.n4{top:50%;left:12%;animation-delay:1.05s}
  @keyframes ireFire{0%,55%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0);border-color:rgba(255,255,255,.16);transform:translate(-50%,-50%) scale(1)}
    62%{box-shadow:0 0 22px -2px rgba(255,255,255,.75);border-color:rgba(255,255,255,.55);transform:translate(-50%,-50%) scale(1.12);color:#ffffff}
    74%{transform:translate(-50%,-50%) scale(1)}}
  /* speed gauge — top-left float */
  .svc-lead .ire-gauge{position:absolute;z-index:6;top:-6px;left:-6px;background:rgba(0,0,0,.82);backdrop-filter:blur(4px);
    border:1px solid rgba(255,255,255,.2);border-radius:14px;padding:11px 14px;min-width:118px}
  .svc-lead .ire-gauge .g-lab{font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:5px}
  .svc-lead .ire-gauge .g-now{font-size:26px;line-height:1;color:#ffffff;font-weight:600;text-shadow:0 0 16px rgba(255,255,255,.45)}
  .svc-lead .ire-gauge .g-now small{font-size:12px;color:#ffffff}
  .svc-lead .ire-gauge .g-old{font-size:10.5px;color:rgba(255,255,255,.5);margin-top:4px;text-decoration:line-through;text-decoration-color:rgba(125,145,143,.7)}
  .svc-lead .ire-gauge .g-arc{height:4px;border-radius:4px;background:rgba(255,255,255,.08);margin-top:8px;overflow:hidden}
  .svc-lead .ire-gauge .g-arc i{display:block;height:100%;width:8%;border-radius:4px;background:linear-gradient(90deg,#bbbbbb,#ffffff);box-shadow:0 0 10px rgba(255,255,255,.6);animation:ireGauge 2.6s var(--ease) infinite}
  @keyframes ireGauge{0%,100%{width:8%}50%{width:13%}}
  /* conversion meter — bottom-left float */
  .svc-lead .ire-conv{position:absolute;z-index:6;bottom:-6px;left:-6px;background:rgba(0,0,0,.82);backdrop-filter:blur(4px);
    border:1px solid rgba(255,255,255,.2);border-radius:14px;padding:11px 14px;min-width:128px}
  .svc-lead .ire-conv .c-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px}
  .svc-lead .ire-conv .c-lab{font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6)}
  .svc-lead .ire-conv .c-val{font-size:14px;color:#fff;font-weight:600}
  .svc-lead .ire-conv .c-bar{height:6px;border-radius:5px;background:rgba(255,255,255,.08);overflow:hidden}
  .svc-lead .ire-conv .c-bar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#bbbbbb,#ffffff);box-shadow:0 0 10px rgba(255,255,255,.5);animation:ireConv 4.2s var(--ease) infinite}
  @keyframes ireConv{0%{width:6%}45%,100%{width:78%}}
  /* booked confirmation chip — top-right, pops on a loop */
  .svc-lead .ire-booked{position:absolute;z-index:7;top:6px;right:-8px;display:inline-flex;align-items:center;gap:7px;
    background:linear-gradient(135deg,rgba(255,255,255,.5),rgba(0,0,0,.85));border:1px solid rgba(255,255,255,.6);border-radius:30px;
    padding:8px 13px;color:#fff;font-size:12px;font-weight:600;box-shadow:0 0 26px -6px rgba(255,255,255,.6);
    transform-origin:right center;animation:ireBooked 4.2s var(--ease) infinite}
  .svc-lead .ire-booked svg{width:15px;height:15px;color:rgba(255,255,255,.72)}
  @keyframes ireBooked{0%,38%{opacity:0;transform:scale(.7) translateY(6px)}46%{opacity:1;transform:scale(1.08) translateY(0)}52%,90%{opacity:1;transform:scale(1) translateY(0)}100%{opacity:0;transform:scale(.9) translateY(0)}}

  @media(max-width:820px){
    .svc-lead .ire{max-width:340px}
    .svc-lead .ire-gauge,.svc-lead .ire-conv{min-width:0;padding:9px 11px}
    .svc-lead .ire-gauge .g-now{font-size:21px}
    .svc-lead .leak,.svc-lead .inc{grid-template-columns:1fr}
    .svc-lead .stl-rail{display:none}
    .svc-lead .stl-track{grid-template-columns:1fr;gap:14px}
    .svc-lead .stl-node{display:flex;align-items:center;gap:16px;text-align:left}
    .svc-lead .stl-dot{margin:0;flex:none}
    .svc-lead .inc-foot{flex-direction:column;align-items:flex-start}
  }
  @media(prefers-reduced-motion:reduce){
    .svc-lead .leak-dial .hand,.svc-lead .leak-bar i,.svc-lead .stl-rail i,.svc-lead .stl-start::before{animation:none}
    .svc-lead .ire-flow,.svc-lead .ire-core::before,.svc-lead .ire-core::after,.svc-lead .ire-node,
    .svc-lead .ire-gauge .g-arc i,.svc-lead .ire-conv .c-bar i,.svc-lead .ire-booked{animation:none}
    .svc-lead .ire-flow{display:none}
    .svc-lead .ire-conv .c-bar i{width:78%}
    .svc-lead .ire-booked{opacity:1;transform:none}
  }

/* ===== Email & SMS ===== */
  /* ===== bespoke styling — Email & SMS Marketing journey (scoped to .svc-flows) ===== */
  .svc-flows .reveal-l{transform:translateX(-42px)}
  .svc-flows .reveal-r{transform:translateX(42px)}
  .svc-flows .reveal-l.in,.svc-flows .reveal-r.in{transform:none}
  .svc-flows .chap{display:inline-flex;align-items:center;gap:13px;margin-bottom:20px}
  .svc-flows .chap b{font-family:var(--f-display);font-size:13px;color:#000000;background:#ffffff;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:600;flex:none}
  .svc-flows .chap span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.6)}
  .svc-flows .band-alt{background:linear-gradient(180deg,rgba(0,0,0,.45),transparent 80%)}

  /* ── CH.01 — dormant revenue (sleeping list) ── */
  .svc-flows .dorm{display:grid;grid-template-columns:1.05fr .95fr;gap:24px;margin-top:48px;align-items:center}
  .svc-flows .dorm-panel{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:28px;position:relative;overflow:hidden}
  .svc-flows .dorm-h{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:20px;display:flex;align-items:center;gap:9px}
  .svc-flows .dorm-h svg{width:15px;height:15px;color:rgba(255,255,255,.4)}
  .svc-flows .contact-row{display:flex;align-items:center;gap:13px;padding:11px 13px;border-radius:11px;margin-bottom:9px;background:#0a0a0a;border:1px solid rgba(255,255,255,.05);opacity:.42;filter:grayscale(.4)}
  .svc-flows .contact-row:last-child{margin-bottom:0}
  .svc-flows .contact-row .av{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.06);display:grid;place-items:center;color:rgba(255,255,255,.6);flex:none;font-size:12px;font-family:var(--f-display)}
  .svc-flows .contact-row .cl{flex:1;display:flex;flex-direction:column;gap:6px}
  .svc-flows .contact-row .cl i{height:7px;border-radius:3px;background:rgba(255,255,255,.3);display:block}
  .svc-flows .contact-row .cl i:first-child{width:55%}
  .svc-flows .contact-row .cl i:last-child{width:34%;background:rgba(255,255,255,.5)}
  .svc-flows .contact-row .zzz{font-size:13px;color:rgba(255,255,255,.6);opacity:.6;flex:none}
  .svc-flows .contact-row.waking{animation:wake 5s var(--ease) infinite}
  @keyframes wake{0%,40%{opacity:.42;filter:grayscale(.4);border-color:rgba(255,255,255,.05)}55%,90%{opacity:1;filter:none;border-color:rgba(255,255,255,.4);box-shadow:0 0 22px -6px rgba(255,255,255,.5)}100%{opacity:.42;filter:grayscale(.4);border-color:rgba(255,255,255,.05)}}
  .svc-flows .dorm-stat{text-align:center}
  .svc-flows .dorm-stat .big{font-family:var(--f-display);font-weight:600;font-size:clamp(46px,7vw,72px);line-height:1;background:linear-gradient(90deg,#bbbbbb,#ffffff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
  .svc-flows .dorm-stat .cap{display:block;font-size:13.5px;color:rgba(255,255,255,.6);margin-top:14px;max-width:30ch;margin-inline:auto;line-height:1.5}

  /* ── CH.02 — automation flow-builder canvas ── */
  .svc-flows .canvas-wrap{margin-top:50px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:34px 26px;position:relative;overflow:hidden}
  .svc-flows .canvas-wrap::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:22px 22px;opacity:.5;pointer-events:none}
  .svc-flows .canvas-tag{position:relative;z-index:2;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6);display:flex;align-items:center;gap:9px;margin-bottom:8px}
  .svc-flows .canvas-tag .dot{width:8px;height:8px;border-radius:50%;background:var(--mint,rgba(255,255,255,.72));box-shadow:0 0 10px rgba(255,255,255,.72)}
  .svc-flows .flow-svg{position:relative;z-index:2;width:100%;height:auto;display:block;overflow:visible}
  .svc-flows .flow-path{fill:none;stroke:rgba(255,255,255,.28);stroke-width:2}
  .svc-flows .flow-dot{fill:#ffffff;filter:drop-shadow(0 0 5px #ffffff)}
  .svc-flows .fnode .nbox{fill:#0a0a0a;stroke:rgba(255,255,255,.12);stroke-width:1.5;rx:12}
  .svc-flows .fnode .ntitle{fill:#fff;font-family:var(--f-display);font-weight:500;font-size:13px}
  .svc-flows .fnode .nsub{fill:rgba(255,255,255,.6);font-size:10.5px}
  .svc-flows .fnode .nico{fill:none;stroke:#ffffff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .svc-flows .fnode .nbadge{fill:rgba(255,255,255,.06)}
  .svc-flows .diamond{fill:#000000;stroke:rgba(255,255,255,.5);stroke-width:1.6}
  .svc-flows .diamond-t{fill:#ffffff;font-family:var(--f-display);font-size:12px;font-weight:500}
  .svc-flows .branch-lbl{fill:rgba(255,255,255,.6);font-size:10px;letter-spacing:.08em}
  .svc-flows .fnode-glow{animation:nodeLight 6s var(--ease) infinite}
  .svc-flows .fnode-glow .nbox{transition:.5s}
  .svc-flows .fnode.s0{animation-delay:0s}.svc-flows .fnode.s1{animation-delay:.9s}.svc-flows .fnode.s2{animation-delay:1.2s}.svc-flows .fnode.s3{animation-delay:2.1s}.svc-flows .fnode.s4{animation-delay:3s}.svc-flows .fnode.s5{animation-delay:3.9s}
  @keyframes nodeLight{0%,8%{filter:none}14%,26%{filter:drop-shadow(0 0 9px rgba(255,255,255,.55))}34%,100%{filter:none}}
  .svc-flows .canvas-foot{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:26px}
  .svc-flows .ctool{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:#ffffff;background:#0a0a0a;border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:8px 14px}
  .svc-flows .ctool img{width:15px;height:15px}
  .svc-flows .rev-counter{position:relative;z-index:2;text-align:center;margin-top:28px;padding-top:24px;border-top:1px solid rgba(255,255,255,.07)}
  .svc-flows .rev-counter .rc-num{font-family:var(--f-display);font-weight:600;font-size:clamp(34px,5vw,52px);line-height:1;color:#fff}
  .svc-flows .rev-counter .rc-num .pre{color:var(--mint,rgba(255,255,255,.72))}
  .svc-flows .rev-counter .rc-cap{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-top:12px}

  /* ── CH.03 — what's included grid ── */
  .svc-flows .incl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:46px}
  .svc-flows .incl-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:24px;transition:.4s}
  .svc-flows .incl-card:hover{border-color:rgba(255,255,255,.35);transform:translateY(-3px)}
  .svc-flows .incl-card .ii{width:42px;height:42px;border-radius:11px;background:rgba(255,255,255,.06);display:grid;place-items:center;color:#ffffff;margin-bottom:16px}
  .svc-flows .incl-card .ii svg{width:21px;height:21px}
  .svc-flows .incl-card h4{font-size:15.5px;color:#fff;font-family:var(--f-display);font-weight:500;margin-bottom:7px}
  .svc-flows .incl-card p{font-size:13px;color:rgba(255,255,255,.6);line-height:1.55}
  .svc-flows .incl-cta{margin-top:30px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;background:linear-gradient(90deg,rgba(255,255,255,.16),transparent);border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:22px 26px}
  .svc-flows .incl-cta p{font-size:14.5px;color:#ffffff;max-width:50ch;margin:0}
  .svc-flows .incl-cta .btn{flex:none}

  @media(max-width:820px){
    .svc-flows .dorm{grid-template-columns:1fr;gap:30px}
    .svc-flows .incl-grid{grid-template-columns:1fr}
    .svc-flows .canvas-wrap{padding:24px 14px}
    .svc-flows .incl-cta{flex-direction:column;align-items:flex-start}
  }
  /* ── HERO — "Lifecycle engine" centerpiece ── */
  .svc-flows .le-art{position:relative;width:100%;max-width:480px;margin-inline:auto}
  .svc-flows .le-svg{width:100%;height:auto;display:block;overflow:visible}
  /* database stack */
  .svc-flows .le-db{fill:#000000;stroke:rgba(255,255,255,.1)}
  .svc-flows .le-db-top{fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.3)}
  .svc-flows .le-db-lbl{fill:rgba(255,255,255,.6);font-family:var(--f-display);font-size:9px;letter-spacing:.12em;text-transform:uppercase}
  .svc-flows .le-seg{animation:leSeg 6s ease-in-out infinite}
  .svc-flows .le-seg.q1{animation-delay:0s}
  .svc-flows .le-seg.q2{animation-delay:.5s}
  .svc-flows .le-seg.q3{animation-delay:1s}
  @keyframes leSeg{0%,30%{opacity:.35}45%,60%{opacity:1}75%,100%{opacity:.35}}
  /* engine core */
  .svc-flows .le-engine{transform-origin:center;animation:lePulse 3.4s ease-in-out infinite}
  @keyframes lePulse{0%,100%{filter:drop-shadow(0 0 4px rgba(255,255,255,.4))}50%{filter:drop-shadow(0 0 16px rgba(255,255,255,.85))}}
  .svc-flows .le-engine-ring{fill:none;stroke:rgba(255,255,255,.4);stroke-dasharray:5 7;transform-origin:128px 150px;animation:leSpin 14s linear infinite}
  @keyframes leSpin{to{transform:rotate(360deg)}}
  .svc-flows .le-engine-ring.r2{stroke:rgba(255,255,255,.35);transform-origin:128px 150px;animation:leSpin 9s linear infinite reverse}
  .svc-flows .le-engine-face{fill:#0a0a0a;stroke:rgba(255,255,255,.6)}
  .svc-flows .le-engine-ico{fill:none;stroke:#ffffff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .svc-flows .le-engine-lbl{fill:#fff;font-family:var(--f-display);font-size:9.5px;font-weight:500;letter-spacing:.06em;text-anchor:middle}
  /* feed pulses db -> engine */
  .svc-flows .le-feed{fill:none;stroke:rgba(255,255,255,.3);stroke-width:1.5;stroke-dasharray:4 6;animation:leDash 1.2s linear infinite}
  @keyframes leDash{to{stroke-dashoffset:-20}}
  /* send paths engine -> avatars */
  .svc-flows .le-path{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1.5}
  .svc-flows .le-msg{transform-origin:center}
  .svc-flows .le-msg circle{fill:#000000;stroke:rgba(255,255,255,.5)}
  .svc-flows .le-msg image{width:15px;height:15px}
  /* customer avatars */
  .svc-flows .le-av-ring{fill:none;stroke:rgba(255,255,255,.12);stroke-width:1.5}
  .svc-flows .le-av-fill{fill:#000000}
  .svc-flows .le-av-ico{fill:#7c8b8a}
  .svc-flows .le-av.react .le-av-ring{stroke:rgba(255,255,255,.9);animation:leGlow 5s ease-in-out infinite}
  .svc-flows .le-av.react .le-av-ico{fill:#ffffff}
  .svc-flows .le-av.a1.react .le-av-ring{animation-delay:0s}
  .svc-flows .le-av.a2.react .le-av-ring{animation-delay:1.6s}
  .svc-flows .le-av.a3.react .le-av-ring{animation-delay:3.2s}
  @keyframes leGlow{0%,55%,100%{stroke:rgba(255,255,255,.12);filter:none}65%,85%{stroke:rgba(255,255,255,.95);filter:drop-shadow(0 0 9px rgba(255,255,255,.7))}}
  /* reply spark from reacting avatars */
  .svc-flows .le-spark{fill:rgba(255,255,255,.72);opacity:0}
  .svc-flows .le-av.a1.react .le-spark{animation:leSpark 5s ease-in-out infinite}
  .svc-flows .le-av.a2.react .le-spark{animation:leSpark 5s ease-in-out 1.6s infinite}
  .svc-flows .le-av.a3.react .le-spark{animation:leSpark 5s ease-in-out 3.2s infinite}
  @keyframes leSpark{0%,60%{opacity:0;transform:scale(.4)}70%{opacity:1;transform:scale(1)}85%,100%{opacity:0;transform:scale(1.4)}}
  /* metric chips */
  .svc-flows .le-chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:18px}
  .svc-flows .le-chip{display:inline-flex;align-items:center;gap:7px;font-size:11px;color:#ffffff;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:7px 13px}
  .svc-flows .le-chip .le-dot{width:6px;height:6px;border-radius:50%;flex:none}
  .svc-flows .le-chip.opens .le-dot{background:#ffffff;box-shadow:0 0 7px #ffffff}
  .svc-flows .le-chip.clicks .le-dot{background:var(--mint,rgba(255,255,255,.72));box-shadow:0 0 7px rgba(255,255,255,.72)}
  .svc-flows .le-chip.rev .le-dot{background:var(--lilac,#ffffff);box-shadow:0 0 7px #ffffff}
  .svc-flows .le-chip b{font-family:var(--f-display);font-weight:600;color:#fff;font-variant-numeric:tabular-nums}
  .svc-flows .le-cap{text-align:center;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-top:14px}
  .svc-flows .le-cap span{color:var(--mint,rgba(255,255,255,.72))}
  @media(max-width:560px){
    .svc-flows .le-chip{font-size:10px;padding:6px 10px}
  }

  @media(prefers-reduced-motion:reduce){
    .svc-flows .contact-row.waking,.svc-flows .fnode-glow,.svc-flows .flow-dot{animation:none}
    .svc-flows .le-seg,.svc-flows .le-engine,.svc-flows .le-engine-ring,.svc-flows .le-feed,
    .svc-flows .le-av .le-av-ring,.svc-flows .le-spark,.svc-flows .le-msg-move{animation:none}
    .svc-flows .le-msg{display:none}
  }

/* ===== Web & Social ===== */
  /* ===== bespoke styling — Web & Social journey (scoped to .svc-web) ===== */
  .svc-web .reveal-l{transform:translateX(-42px)}
  .svc-web .reveal-r{transform:translateX(42px)}
  .svc-web .reveal-l.in,.svc-web .reveal-r.in{transform:none}
  .svc-web .chap{display:inline-flex;align-items:center;gap:13px;margin-bottom:20px}
  .svc-web .chap b{font-family:var(--f-display);font-size:13px;color:#000000;background:#ffffff;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:600;flex:none}
  .svc-web .chap span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.6)}
  .svc-web .band-alt{background:linear-gradient(180deg,rgba(0,0,0,.45),transparent 80%)}

  /* ---- build split: assembling browser + social climb ---- */
  .svc-web .build{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;margin-top:48px;align-items:start}

  /* (a) assembling browser mockup */
  .svc-web .mock{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:16px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
  .svc-web .mock-chrome{display:flex;align-items:center;gap:14px;padding:13px 16px;background:#0a0a0a;border-bottom:1px solid rgba(255,255,255,.07)}
  .svc-web .mock-dots{display:flex;gap:7px}
  .svc-web .mock-dots i{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.28);display:block}
  .svc-web .mock-dots i:first-child{background:rgba(255,255,255,.55)}
  .svc-web .mock-dots i:nth-child(2){background:rgba(255,255,255,.55)}
  .svc-web .mock-dots i:nth-child(3){background:rgba(255,255,255,.55)}
  .svc-web .mock-url{flex:1;display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:7px 14px;font-size:12px;color:#ffffff}
  .svc-web .mock-url svg{width:13px;height:13px;color:rgba(255,255,255,.72);flex:none}
  .svc-web .mock-body{padding:18px;display:flex;flex-direction:column;gap:14px}
  .svc-web .piece{opacity:0;transform:translateY(14px)}
  .svc-web .reveal.in .piece{animation:pieceIn .55s var(--ease) forwards}
  .svc-web .reveal.in .p1{animation-delay:.15s}
  .svc-web .reveal.in .p2{animation-delay:.45s}
  .svc-web .reveal.in .p3{animation-delay:.75s}
  .svc-web .reveal.in .p4{animation-delay:1.05s}
  .svc-web .reveal.in .p5{animation-delay:1.35s}
  @keyframes pieceIn{to{opacity:1;transform:none}}
  .svc-web .m-nav{display:flex;align-items:center;gap:10px}
  .svc-web .m-nav .logo{width:30px;height:10px;border-radius:3px;background:linear-gradient(90deg,#bbbbbb,#ffffff)}
  .svc-web .m-nav .nl{height:7px;width:42px;border-radius:3px;background:rgba(255,255,255,.3)}
  .svc-web .m-nav .nl:last-child{margin-left:auto;width:64px;background:rgba(255,255,255,.5)}
  .svc-web .m-hero{display:flex;flex-direction:column;gap:10px;padding:20px;border-radius:12px;background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(0,0,0,.2));border:1px solid rgba(255,255,255,.06)}
  .svc-web .m-hero .hl{height:13px;width:78%;border-radius:4px;background:#ffffff}
  .svc-web .m-hero .hl2{height:9px;width:58%;border-radius:4px;background:rgba(255,255,255,.4)}
  .svc-web .m-rows{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
  .svc-web .m-rows span{height:46px;border-radius:9px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.05)}
  .svc-web .m-cta{align-self:flex-start;font-size:12.5px;font-weight:600;color:#000000;background:linear-gradient(90deg,#bbbbbb,#ffffff);padding:11px 22px;border-radius:999px}

  /* (b) social authority climb */
  .svc-web .climb{display:flex;flex-direction:column;gap:18px}
  .svc-web .climb-logos{display:flex;gap:10px;flex-wrap:wrap}
  .svc-web .climb-logos span{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.07);display:grid;place-items:center}
  .svc-web .climb-logos img{width:17px;height:17px}
  .svc-web .feed{display:flex;flex-direction:column;gap:11px}
  .svc-web .post{display:flex;gap:11px;align-items:center;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:11px 13px}
  .svc-web .post .av{width:30px;height:30px;border-radius:50%;background:linear-gradient(90deg,#bbbbbb,#ffffff);flex:none}
  .svc-web .post .pl{flex:1;display:flex;flex-direction:column;gap:6px}
  .svc-web .post .pl i{height:6px;border-radius:3px;background:rgba(255,255,255,.3);display:block}
  .svc-web .post .pl i:first-child{width:66%}
  .svc-web .post .pl i:last-child{width:40%;background:rgba(255,255,255,.45)}
  .svc-web .post .heart{color:var(--lilac);font-size:13px;display:flex;align-items:center;gap:5px;font-weight:600}
  .svc-web .post .heart svg{width:14px;height:14px}
  .svc-web .bars{display:flex;align-items:flex-end;gap:10px;height:120px;padding:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:12px}
  .svc-web .bar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:7px;height:100%}
  .svc-web .bar i{width:100%;border-radius:6px 6px 0 0;background:linear-gradient(90deg,#bbbbbb,#ffffff);height:0;transition:height 1s var(--ease)}
  .svc-web .reveal.in .bar:nth-child(1) i{height:34%;transition-delay:.3s}
  .svc-web .reveal.in .bar:nth-child(2) i{height:52%;transition-delay:.5s}
  .svc-web .reveal.in .bar:nth-child(3) i{height:71%;transition-delay:.7s}
  .svc-web .reveal.in .bar:nth-child(4) i{height:100%;transition-delay:.9s}
  .svc-web .bar b{font-size:10px;letter-spacing:.1em;color:rgba(255,255,255,.6)}

  /* ---- what's included grid (re-styled) ---- */
  .svc-web .incl{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
  .svc-web .incl-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:24px}
  .svc-web .incl-card .ii{width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.06);display:grid;place-items:center;color:#ffffff;margin-bottom:16px}
  .svc-web .incl-card .ii svg{width:20px;height:20px}
  .svc-web .incl-card h4{font-size:15.5px;color:#fff;font-family:var(--f-display);font-weight:500;margin-bottom:7px}
  .svc-web .incl-card p{font-size:13px;color:rgba(255,255,255,.6);line-height:1.55}

  /* ===== HERO CENTERPIECE — "Presence engine" (scoped .svc-web) ===== */
  .svc-web .engine{position:relative;width:100%;max-width:460px;margin-inline:auto;aspect-ratio:1/1;display:grid;place-items:center}
  .svc-web .engine *{box-sizing:border-box}

  /* ambient field */
  .svc-web .eng-glow{position:absolute;inset:6%;border-radius:50%;background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.30),rgba(0,0,0,0) 62%);filter:blur(8px);animation:webPulseGlow 6s var(--ease) infinite}
  .svc-web .eng-orbit{position:absolute;border:1px solid rgba(255,255,255,.12);border-radius:50%}
  .svc-web .eng-orbit.o1{inset:8%}
  .svc-web .eng-orbit.o2{inset:21%;border-color:rgba(255,255,255,.08)}

  /* central converting browser */
  .svc-web .eng-screen{position:relative;z-index:4;width:60%;max-width:264px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);border-radius:13px;overflow:hidden;box-shadow:0 24px 50px -28px rgba(0,0,0,.7),0 0 0 6px rgba(0,0,0,.5);animation:webFloat 7s var(--ease) infinite}
  .svc-web .eng-bar{display:flex;align-items:center;gap:6px;padding:8px 10px;background:#0a0a0a;border-bottom:1px solid rgba(255,255,255,.07)}
  .svc-web .eng-bar i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.28)}
  .svc-web .eng-bar i:nth-child(1){background:rgba(255,255,255,.55)}
  .svc-web .eng-bar i:nth-child(2){background:rgba(255,255,255,.55)}
  .svc-web .eng-bar i:nth-child(3){background:rgba(255,255,255,.55)}
  .svc-web .eng-bar u{flex:1;height:11px;margin-left:6px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
  .svc-web .eng-page{padding:12px;display:flex;flex-direction:column;gap:9px}
  .svc-web .eng-nav{display:flex;align-items:center;gap:6px}
  .svc-web .eng-nav .lg{width:24px;height:8px;border-radius:3px;background:linear-gradient(90deg,#bbbbbb,#ffffff)}
  .svc-web .eng-nav .nk{height:5px;width:26px;border-radius:3px;background:rgba(255,255,255,.3)}
  .svc-web .eng-nav .nk:last-child{margin-left:auto;width:34px;background:rgba(255,255,255,.55)}
  .svc-web .eng-h{display:flex;flex-direction:column;gap:7px;padding:13px;border-radius:9px;background:linear-gradient(135deg,rgba(255,255,255,.24),rgba(0,0,0,.2));border:1px solid rgba(255,255,255,.06)}
  .svc-web .eng-h .t1{height:9px;width:80%;border-radius:4px;background:#ffffff}
  .svc-web .eng-h .t2{height:6px;width:55%;border-radius:4px;background:rgba(255,255,255,.4)}
  .svc-web .eng-cta{align-self:flex-start;margin-top:2px;font-size:9.5px;font-weight:600;color:#000000;background:linear-gradient(90deg,#bbbbbb,#ffffff);padding:7px 14px;border-radius:999px;position:relative;animation:webCtaPulse 2.6s var(--ease) infinite}
  .svc-web .eng-cta::after{content:"";position:absolute;inset:0;border-radius:999px;border:1.5px solid rgba(255,255,255,.72);opacity:0;animation:webCtaRing 2.6s var(--ease) infinite}

  /* inbound traffic particles */
  .svc-web .eng-traffic{position:absolute;inset:0;z-index:3;pointer-events:none}
  .svc-web .eng-traffic .pt{offset-path:path("M12 12 L230 230");offset-distance:0%;position:absolute;top:0;left:0}
  .svc-web .eng-traffic .pt b{display:block;width:6px;height:6px;margin:-3px;border-radius:50%;background:#ffffff;box-shadow:0 0 8px #ffffff}
  .svc-web .eng-traffic .t-a{offset-path:path("M0 92 C90 60,150 120,222 200")}
  .svc-web .eng-traffic .t-b{offset-path:path("M460 70 C360 70,300 130,236 196")}
  .svc-web .eng-traffic .t-c{offset-path:path("M40 420 C120 360,170 300,222 244")}
  .svc-web .eng-traffic .t-d{offset-path:path("M430 410 C350 360,300 300,238 248")}
  .svc-web .eng-traffic .t-a b,.svc-web .eng-traffic .t-c b{background:rgba(255,255,255,.72);box-shadow:0 0 8px rgba(255,255,255,.72)}
  .svc-web .eng-traffic .pt{animation:webFlowIn 3.4s linear infinite}
  .svc-web .eng-traffic .t-b{animation-delay:.6s}
  .svc-web .eng-traffic .t-c{animation-delay:1.3s}
  .svc-web .eng-traffic .t-d{animation-delay:2.1s}

  /* social platform tiles ringed around */
  .svc-web .eng-tiles{position:absolute;inset:0;z-index:5;pointer-events:none}
  .svc-web .eng-tile{position:absolute;display:flex;align-items:center;gap:6px;padding:6px 8px 6px 6px;background:rgba(0,0,0,.92);border:1px solid rgba(255,255,255,.09);border-radius:11px;box-shadow:0 10px 24px -14px rgba(0,0,0,.7);backdrop-filter:blur(3px);animation:webTileBob 5s var(--ease) infinite}
  .svc-web .eng-tile img{width:16px;height:16px;display:block}
  .svc-web .eng-tile s{display:flex;align-items:center;gap:3px;font-size:9.5px;font-weight:600;color:rgba(255,255,255,.72);font-family:var(--f-display);text-decoration:none;letter-spacing:.02em}
  .svc-web .eng-tile s::before{content:"";width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.72);box-shadow:0 0 5px rgba(255,255,255,.72)}
  .svc-web .eng-tile .ico{width:26px;height:26px;border-radius:7px;background:rgba(255,255,255,.06);display:grid;place-items:center;flex:none}
  .svc-web .eng-tile.s1{top:3%;left:50%;transform:translateX(-50%);animation-delay:0s}
  .svc-web .eng-tile.s2{top:24%;right:0;animation-delay:.7s}
  .svc-web .eng-tile.s3{bottom:24%;right:1%;animation-delay:1.4s}
  .svc-web .eng-tile.s4{bottom:4%;left:50%;transform:translateX(-50%);animation-delay:2.1s}
  .svc-web .eng-tile.s5{top:24%;left:0;animation-delay:2.8s}

  /* engagement bar-chart pod */
  .svc-web .eng-chart{position:absolute;z-index:5;left:1%;bottom:22%;width:30%;max-width:118px;padding:10px;background:rgba(0,0,0,.92);border:1px solid rgba(255,255,255,.09);border-radius:11px;box-shadow:0 12px 26px -16px rgba(0,0,0,.7);backdrop-filter:blur(3px)}
  .svc-web .eng-chart label{display:block;font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:7px}
  .svc-web .eng-chart .cbars{display:flex;align-items:flex-end;gap:5px;height:42px}
  .svc-web .eng-chart .cbars i{flex:1;border-radius:3px 3px 0 0;background:linear-gradient(90deg,#bbbbbb,#ffffff);transform-origin:bottom;animation:webBarGrow 4.5s var(--ease) infinite}
  .svc-web .eng-chart .cbars i:nth-child(1){animation-delay:0s}
  .svc-web .eng-chart .cbars i:nth-child(2){animation-delay:.25s}
  .svc-web .eng-chart .cbars i:nth-child(3){animation-delay:.5s}
  .svc-web .eng-chart .cbars i:nth-child(4){animation-delay:.75s}

  /* conversions counter pod */
  .svc-web .eng-conv{position:absolute;z-index:5;right:1%;top:50%;transform:translateY(-50%);width:30%;max-width:120px;padding:11px 12px;background:rgba(0,0,0,.92);border:1px solid rgba(255,255,255,.09);border-radius:11px;box-shadow:0 12px 26px -16px rgba(0,0,0,.7);backdrop-filter:blur(3px)}
  .svc-web .eng-conv label{display:flex;align-items:center;gap:5px;font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:5px}
  .svc-web .eng-conv label svg{width:11px;height:11px;color:rgba(255,255,255,.72)}
  .svc-web .eng-conv .num{font-family:var(--f-display);font-weight:600;font-size:24px;line-height:1;color:#fff;display:flex;align-items:baseline}
  .svc-web .eng-conv .num em{font-style:normal;display:inline-block;overflow:hidden;height:1em;position:relative}
  .svc-web .eng-conv .num em u{display:block;text-decoration:none;animation:webRoll 2.4s steps(1) infinite}
  .svc-web .eng-conv .num .pct{font-size:13px;color:rgba(255,255,255,.72);margin-left:4px}
  .svc-web .eng-conv .spark{margin-top:7px;height:3px;border-radius:999px;background:linear-gradient(90deg,#bbbbbb,#ffffff);width:30%;animation:webSpark 4.5s var(--ease) infinite}

  @keyframes webPulseGlow{0%,100%{opacity:.6;transform:scale(.98)}50%{opacity:1;transform:scale(1.04)}}
  @keyframes webFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
  @keyframes webCtaPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
  @keyframes webCtaRing{0%{opacity:.7;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.35)}}
  @keyframes webFlowIn{0%{offset-distance:0%;opacity:0}10%{opacity:1}85%{opacity:1}100%{offset-distance:100%;opacity:0}}
  @keyframes webTileBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
  @keyframes webTileBobC{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-5px)}}
  @keyframes webBarGrow{0%{transform:scaleY(.28)}50%{transform:scaleY(1)}100%{transform:scaleY(.5)}}
  @keyframes webRoll{0%{transform:translateY(0)}25%{transform:translateY(-1em)}50%{transform:translateY(-2em)}75%{transform:translateY(-3em)}100%{transform:translateY(-4em)}}
  @keyframes webSpark{0%{width:24%}50%{width:86%}100%{width:55%}}
  /* center tiles bob without losing their centring transform */
  .svc-web .eng-tile.s1,.svc-web .eng-tile.s4{animation-name:webTileBobC}

  @media(max-width:820px){
    .svc-web .build{grid-template-columns:1fr}
    .svc-web .incl{grid-template-columns:1fr}
    .svc-web .m-rows{grid-template-columns:1fr 1fr 1fr}
    .svc-web .engine{max-width:380px}
    .svc-web .eng-tile s{display:none}
  }
  @media(prefers-reduced-motion:reduce){
    .svc-web .piece{opacity:1;transform:none;animation:none}
    .svc-web .reveal.in .piece{animation:none}
    .svc-web .bar i{transition:none}
    .svc-web .eng-glow,.svc-web .eng-screen,.svc-web .eng-cta,.svc-web .eng-cta::after,
    .svc-web .eng-traffic .pt,.svc-web .eng-tile,.svc-web .eng-chart .cbars i,
    .svc-web .eng-conv .num em u,.svc-web .eng-conv .spark{animation:none}
    .svc-web .eng-traffic .pt{opacity:1}
    .svc-web .eng-conv .num em u{transform:none}
    .svc-web .eng-chart .cbars i{transform:scaleY(.75)}
  }