/* GENERATED by src-guides/service_pages.py from index.html styles + service components. Do not edit by hand. */

  :root {
    --bg: #030405;
    --surface: #0D0F14;
    --surface-2: #0A1220;
    --line: #191C22;
    --text: #F5F6F7;
    --text-dim: #9BA6B2;
    --text-faint: #565F6A;
    --accent: #0066B2;
    --accent-2: #2FA8FF;
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  html, body { margin: 0; background: var(--bg); color: var(--text); }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  body {
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  h1, h2, h3 { text-wrap: balance; margin: 0; }
  .display { font-family: 'Instrument Sans', system-ui, sans-serif; }
  /* hero CTA: a light tracing the border (2026-09-30) */
  @property --cta-a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
  .btn.cta-trace { position: relative; isolation: isolate; box-shadow: 0 12px 34px -12px rgba(47,168,255,.7); }
  .btn.cta-trace::before { content: ''; position: absolute; inset: -2px; border-radius: 6px; z-index: -2;
    background: conic-gradient(from var(--cta-a), transparent 0 70%, #BFE6FF 82%, #FFFFFF 86%, #BFE6FF 90%, transparent 100%); animation: ctaTrace 5s linear infinite; }
  .btn.cta-trace::after { content: ''; position: absolute; inset: 0; border-radius: 4px; z-index: -1; background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); }
  @keyframes ctaTrace { to { --cta-a: 360deg; } }
  @media (prefers-reduced-motion: reduce) { .btn.cta-trace::before { animation: none; } }
  /* hero headline: always three lines (2026-09-30) */
  .hero-h1 { font-size: clamp(25.3px, 6.95vw, 42px); } /* mobile, 4-line headline +3% (2026-10-05) */
  @media (min-width: 800px) { .hero-h1 { font-size: min(42px, 4vw); } }
  .hero-h1 .hl + .hl { display: block; }
  /* proof stats (2026-10-04): 4 cards between the hero and the logo wall, case-card look */
  .stats4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  @media (max-width: 860px) { .stats4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
  .stat4 { position: relative; overflow: hidden; border-radius: 16px; padding: 22px 22px 24px;
    background: radial-gradient(120% 90% at 100% 0%, rgba(47,168,255,.14), transparent 55%), linear-gradient(180deg, #0B1624, #070B12);
    border: 1px solid rgba(47,168,255,.32); box-shadow: 0 24px 60px -30px rgba(0,102,178,.6), inset 0 1px 0 rgba(255,255,255,.06); }
  .stat4::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .3;
    background-image: radial-gradient(rgba(111,195,255,.35) 1px, transparent 1.2px); background-size: 16px 16px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 40%, transparent 85%); mask-image: linear-gradient(180deg, transparent 0%, #000 40%, transparent 85%); }
  .stat4 > * { position: relative; }
  .stat4-label { font-family: 'Instrument Sans', sans-serif; font-weight: 700; font-size: 19px; color: #FAFBFB; }
  .stat4-num { font-variant-numeric: tabular-nums; font-family: 'Instrument Sans', sans-serif; font-weight: 800; font-size: clamp(34px, 5vw, 48px); letter-spacing: -.02em; line-height: 1.05; margin-top: 10px;
    background: linear-gradient(135deg, #FFFFFF 10%, #9FD6FF 60%, #2FA8FF); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .stat4-text { font-size: 14px; line-height: 1.45; color: var(--text-dim); margin-top: 10px; }
  @media (max-width: 480px) { .stat4 { padding: 16px 14px 18px; } .stat4-label { font-size: 16px; } .stat4-text { font-size: 12.5px; } }
  .hero-grad { background: linear-gradient(135deg, #6FC3FF, #2FA8FF 55%, #0066B2); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
  .hero-h1 .hl { display: inline; }
  @media (min-width: 800px) { .hero-h1 .hl { display: block; white-space: nowrap; } }
  /* hero audience pill (2026-09-30) */
  .tag.hero-pill { position: relative; display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px; border-radius: 999px; overflow: hidden;
    text-transform: uppercase; color: #D6EEFF; font-weight: 500; background: rgba(47,168,255,.1); border: 1px solid rgba(111,195,255,.45);
    box-shadow: 0 0 24px -8px rgba(47,168,255,.6), inset 0 1px 0 rgba(255,255,255,.08); }
  .hero-pill i { flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: #6FC3FF; box-shadow: 0 0 0 0 rgba(111,195,255,.7); animation: pillPulse 2.2s ease-out infinite; }
  @keyframes pillPulse { 0% { box-shadow: 0 0 0 0 rgba(111,195,255,.7); } 70% { box-shadow: 0 0 0 7px rgba(111,195,255,0); } 100% { box-shadow: 0 0 0 0 rgba(111,195,255,0); } }
  .hero-pill::after { content: ''; position: absolute; top: 0; bottom: 0; width: 30%; left: -40%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent); transform: skewX(-20deg); animation: pillSweep 2.4s ease-in-out 1.2s 1 both; }
  @keyframes pillSweep { 0% { left: -40%; } 100% { left: 120%; } }
  @media (prefers-reduced-motion: reduce) { .hero-pill i, .hero-pill::after { animation: none; } }
  @media (max-width: 480px) { .tag.hero-pill { font-size: 10.8px; letter-spacing: .01em; padding: 7px 11px; gap: 7px; white-space: nowrap; } .hero-pill i { width: 6px; height: 6px; } }
  /* hero ownership badge (2026-10-03): desktop = three checks under the CTA, mobile = card under the subhead; copy to be reworked later */
  .own-card { display: none; position: relative; align-items: center; gap: 16px; text-align: left; padding: 16px 22px 16px 16px; border-radius: 14px; max-width: 520px; overflow: hidden;
    background: linear-gradient(160deg, rgba(13,15,20,.95), rgba(10,18,32,.95)); border: 1px solid rgba(111,195,255,.22); box-shadow: 0 24px 60px -28px rgba(47,168,255,.55), inset 0 1px 0 rgba(255,255,255,.05); }
  .own-card::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size: 14px 14px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%); mask-image: linear-gradient(90deg, transparent, #000 70%); pointer-events: none; }
  .own-card > * { position: relative; }
  .own-card .ic { flex-shrink: 0; width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 8px 22px -8px rgba(47,168,255,.9); }
  .own-card .ic svg { width: 22px; height: 22px; }
  .own-card b { display: block; font-family: 'Instrument Sans', system-ui, sans-serif; font-size: 17px; font-weight: 700; color: #FAFBFB; }
  .own-card small { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.45; color: var(--text-dim); }
  .own-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin-top: 22px; }
  .own-row .ck { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #DCE3EA; }
  .own-row .ck::before { content: ''; flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; box-shadow: 0 0 14px -4px rgba(47,168,255,.8);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat, linear-gradient(135deg, var(--accent), var(--accent-2)); }
  @media (max-width: 799px) { .own-card { display: flex; } .own-row { display: none; } }
  @media (min-width: 800px) and (max-width: 899px) { .own-row { gap: 10px 18px; } .own-row .ck { font-size: 13px; } }
  /* headline shine (2026-09-30): same sweep idea as the phone CTAs, white text with a light sweep */
  .shine-text { color: #FAFBFB; background: linear-gradient(105deg, #FAFBFB 0%, #FAFBFB 38%, #9FD6FF 46%, #FFFFFF 50%, #9FD6FF 54%, #FAFBFB 62%, #FAFBFB 100%);
    background-size: 250% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    padding-right: .08em; animation: shineSweep 2.6s ease-in-out 1s 1 both; }
  @keyframes shineSweep { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } }
  @media (prefers-reduced-motion: reduce) { .shine-text { animation: none; } }
  .accent-serif { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; }
  .mono { font-family: 'Geist Mono', 'SF Mono', monospace; }
  a { color: var(--accent-2); text-decoration: none; }
  a:hover { color: #6FC3FF; }
  img { max-width: 100%; display: block; }

  .page { position: relative; }
  .field { position: absolute; left: 0; right: 0; height: 900px; pointer-events: none; z-index: 0; overflow: hidden; }

  .blob {
    position: absolute; border-radius: 50%; pointer-events: none;
    filter: blur(70px); will-change: transform;
  }
  @keyframes driftA { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(4%,3%) scale(1.08); } }
  @keyframes driftB { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-5%,4%) scale(0.94); } }
  @keyframes driftC { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(3%,-4%) scale(1.05); } }
  .blob-a { animation: driftA 26s ease-in-out infinite; }
  .blob-b { animation: driftB 34s ease-in-out infinite; }
  .blob-c { animation: driftC 30s ease-in-out infinite; }

  .grain {
    position: fixed; inset: 0; z-index: 5; pointer-events: none;
    opacity: 0.05; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  .wrap { position: relative; z-index: 1; max-width: 1160px; margin-inline: auto; padding-inline: 64px; }
  @media (max-width: 900px) { .wrap { padding-inline: 22px; } }

  .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 28px; }
  .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
  .grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 22px; }
  .grid-5 { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 20px; }
  .grid-show { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 40px; }
  .logo-grid { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 36px 24px; align-items: center; justify-items: center; }
  .logo-grid img { max-width: 100%; max-height: 34px; width: auto; height: auto; opacity: 0.8; transition: opacity 0.2s ease; }
  .logo-grid img:hover { opacity: 1; }
  @media (max-width: 780px) {
    .logo-grid { grid-template-columns: repeat(6, minmax(0,1fr)); gap: 22px 10px; }
    .logo-grid img { max-height: 20px; }
  }
  @media (max-width: 780px) {
    .grid-2, .grid-3, .grid-4, .grid-5, .grid-show { grid-template-columns: 1fr; }
    .flow-row { flex-direction: column !important; }
    .flow-arrow { transform: rotate(90deg); }
    .cal-mock { grid-template-columns: 1fr !important; }
  }

  .tag { font-family: 'Geist Mono', monospace; font-size: 11.5px; letter-spacing: 0.07em; color: var(--text-faint); }

  @media (min-width: 901px) { .ai-callout { max-width: none; } }
  @media (max-width: 900px) {
    .why-now-row { flex-direction: column !important; align-items: stretch !important; gap: 36px !important; }
    .why-now-chart, .reframe-chart { width: 100% !important; max-width: 380px; }
  }

  .btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 16px 30px; border-radius: 4px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
    color: #FFFFFF; font-weight: 700; font-size: 15.5px; white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }
  .btn:hover { color: #000000; }
  .btn-ghost {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 15px 28px; border-radius: 4px;
    background: transparent; border: 1.5px solid rgba(255,255,255,0.22);
    color: var(--text); font-weight: 600; font-size: 15px; white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }
  .btn-ghost:hover { color: #FFFFFF; border-color: var(--accent-2); background: rgba(255,255,255,0.06); }
  .btn-sm { padding: 11px 20px; font-size: 13px; }
  .btn-ghost.btn-sm { padding: 9.5px 18px; }
  .nav-actions { display: flex; align-items: center; gap: 10px; }
  @media (max-width: 640px) {
    .nav-actions .btn { display: none; }
  }

  .grad-text {
    background-image: linear-gradient(135deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
  }

  .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }
  .reveal.in { opacity: 1; transform: translateY(0); }
  @keyframes heroIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
  .hero-in { animation: heroIn 0.8s ease both; }

  .spotlight {
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background: radial-gradient(560px circle at var(--mx, 50%) var(--my, 20%), rgba(47,168,255,0.14), transparent 72%);
    transition: background 0.2s ease-out;
  }

  .tilt-card { transition: transform 0.25s ease, box-shadow 0.25s ease; }
  /* homepage visuals v2 (2026-09-30): same family as the case-study cards */
  .viz2 { position: relative; overflow: hidden; border-radius: 14px; padding: 22px;
    background: radial-gradient(120% 90% at 100% 0%, rgba(47,168,255,.16), transparent 55%), linear-gradient(180deg, #0B1624, #070B12) !important;
    border: 1px solid rgba(47,168,255,.38) !important; box-shadow: 0 24px 60px -28px rgba(0,102,178,.65), inset 0 1px 0 rgba(255,255,255,.06); }
  .viz2::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .3;
    background-image: radial-gradient(rgba(111,195,255,.35) 1px, transparent 1.2px); background-size: 16px 16px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 40%, transparent 85%); mask-image: linear-gradient(180deg, transparent 0%, #000 40%, transparent 85%); }
  .viz2 > * { position: relative; }
  .viz2-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 14px; }
  .viz2-tag { font-family: 'Geist Mono', monospace; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-2); }
  .viz2-pill { font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: #9FD6FF; background: rgba(47,168,255,.1); border: 1px solid rgba(47,168,255,.3); border-radius: 999px; padding: 3px 9px; }
  .viz2-metric { font-family: 'Instrument Sans', sans-serif; font-weight: 800; font-size: 34px; letter-spacing: -.02em; line-height: 1;
    background: linear-gradient(135deg, #FFFFFF 10%, #9FD6FF 60%, #2FA8FF); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 16px; }
  .viz2-metric small { font-size: 14px; font-weight: 600; }
  .viz2-foot { margin-top: 12px; font-size: 12px; color: var(--text-faint); }
  .aw { display: flex; flex-direction: column; gap: 9px; }
  .aw-row { display: flex; flex-direction: column; align-items: center; gap: 3px; }
  .aw-bar { width: var(--w); height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 13.5px; font-weight: 600; color: #EAF4FF;
    background: linear-gradient(90deg, rgba(0,102,178,.55), rgba(47,168,255,.35)); border: 1px solid rgba(111,195,255,.45);
    transform: scaleX(.2); opacity: 0; transition: transform .7s cubic-bezier(.2,.8,.2,1) calc(.2s + var(--i) * .1s), opacity .5s ease calc(.2s + var(--i) * .1s); }
  .aw-row.aim .aw-bar { background: linear-gradient(90deg, rgba(224,86,110,.3), rgba(224,86,110,.12)); border-color: rgba(224,86,110,.5); color: #F6C1CA; }
  .aw-row:not(.go):not(.aim) .aw-bar { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color: var(--text-dim); }
  .aw-row em { font-style: normal; font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: #6FC3FF; }
  .aw-row.aim em { color: #F08497; }
  .reveal.in .aw-bar { transform: scaleX(1); opacity: 1; }
  .wn { display: flex; align-items: flex-end; gap: 10px; height: 170px; }
  .wn-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; }
  .wn-col b { font-family: 'Geist Mono', monospace; font-size: 10.5px; font-weight: 500; color: #9FD6FF; opacity: 0; transition: opacity .5s ease calc(.9s + var(--i) * .1s); }
  .wn-col span { font-family: 'Geist Mono', monospace; font-size: 10.5px; color: var(--text-faint); }
  .wn-bar { width: 100%; height: var(--h); border-radius: 5px 5px 0 0; background: linear-gradient(180deg, #2FA8FF, rgba(0,102,178,.45));
    transform: scaleY(0); transform-origin: bottom; transition: transform .8s cubic-bezier(.2,.8,.2,1) calc(.3s + var(--i) * .12s); }
  .wn-bar.hi { background: linear-gradient(180deg, #BFE6FF, #2FA8FF); box-shadow: 0 0 24px -4px rgba(47,168,255,.7); }
  .reveal.in .wn-bar { transform: scaleY(1); } .reveal.in .wn-col b { opacity: 1; }
  /* red variant for loss visuals (2026-09-30) */
  .viz2.viz2-red { background: radial-gradient(120% 90% at 100% 0%, rgba(224,86,110,.2), transparent 55%), linear-gradient(180deg, #1A0C12, #0B070A) !important;
    border-color: rgba(224,86,110,.45) !important; box-shadow: 0 24px 60px -28px rgba(194,69,91,.7), inset 0 1px 0 rgba(255,255,255,.06); }
  .viz2-red::before { background-image: radial-gradient(rgba(240,132,151,.35) 1px, transparent 1.2px); }
  .viz2-red .viz2-tag { color: #F08497; }
  .viz2-red .viz2-metric { background: linear-gradient(135deg, #FFFFFF 10%, #F6C1CA 55%, #E0566E); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .viz2-red .wn-bar { background: linear-gradient(180deg, #E0566E, rgba(160,40,62,.45)); }
  .viz2-red .wn-bar.hi { background: linear-gradient(180deg, #FFC2CD, #E0566E); box-shadow: 0 0 26px -4px rgba(224,86,110,.8); }
  .viz2-red .wn-col b { color: #F6C1CA; }
  .outcome-card.viz2 { padding: 28px; }
  .outcome-card.viz2 .outcome-bar { height: 12px; border-radius: 6px; background: rgba(255,255,255,.05); }
  .outcome-card.viz2 .outcome-bar span { border-radius: 6px; transform: scaleX(0); transform-origin: left; transition: transform .9s cubic-bezier(.2,.8,.2,1) .3s; }
  .outcome-card.viz2 .outcome-bar + .outcome-bar span { transition-delay: .6s; box-shadow: 0 0 16px -2px rgba(47,168,255,.6); }
  .reveal.in .outcome-card.viz2 .outcome-bar span { transform: scaleX(1); }
  .lever.viz2 { padding: 24px; }
  .lever-ic { position: absolute; top: 20px; right: 20px; width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #6FC3FF;
    background: rgba(47,168,255,.12); border: 1px solid rgba(47,168,255,.4); box-shadow: 0 0 24px -6px rgba(47,168,255,.6); }
  .lever-ic svg { width: 24px; height: 24px; }
  @media (prefers-reduced-motion: reduce) { .aw-bar, .wn-bar, .outcome-card.viz2 .outcome-bar span { transform: none !important; opacity: 1 !important; transition: none !important; } .wn-col b { opacity: 1; transition: none; } }
  .mb-card-red { background: radial-gradient(120% 90% at 0% 0%, rgba(224,86,110,.16), transparent 55%), linear-gradient(180deg, #170B10, #0B070A);
    border: 1px solid rgba(224,86,110,.38); box-shadow: 0 24px 60px -30px rgba(194,69,91,.55), inset 0 1px 0 rgba(255,255,255,.05); }
  /* problem cards (2026-09-30): mini visuals, red only on the bad signal */
  .pb-card { display: flex; flex-direction: column; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
  .pb-card:hover { transform: translateY(-3px); border-color: rgba(111,195,255,.7) !important; box-shadow: 0 26px 60px -28px rgba(47,168,255,.65), inset 0 1px 0 rgba(255,255,255,.07); }
  .pb-pill { font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: #F08497; background: rgba(224,86,110,.1); border: 1px solid rgba(224,86,110,.35); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
  .pb-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: .04em; color: var(--text-faint); margin-bottom: 8px; }
  .pb-legend i { display: inline-block; width: 7px; height: 7px; border-radius: 2px; margin-right: 5px; vertical-align: 0; }
  .pb-viz { width: 100%; height: auto; display: block; overflow: visible; margin-bottom: 18px; }
  .pb-h { font-size: 16.5px; font-weight: 700; margin-bottom: 8px; color: #FAFBFB; }
  .pb-p { font-size: 14px; line-height: 1.5; color: var(--text-dim); }
  .pb-line { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.3s cubic-bezier(.2,.8,.2,1) .35s; }
  .pb-line.pb-d2 { transition-delay: .55s; } .pb-line.pb-d3 { transition-delay: .9s; }
  .pb-dot { opacity: 0; transition: opacity .4s ease 1.5s; }
  .pb-bar { transform: scaleY(0); transform-box: fill-box; transform-origin: bottom; transition: transform .7s cubic-bezier(.2,.8,.2,1) calc(.25s + var(--i) * .08s); }
  .pb-hbar { transform: scaleX(0); transform-box: fill-box; transform-origin: left; transition: transform .9s cubic-bezier(.2,.8,.2,1) calc(.35s + var(--i) * .3s); }
  .pb-nodes, .pb-links { opacity: 0; transition: opacity .6s ease .3s; } .pb-links { transition-delay: .6s; }
  .pb-x { opacity: 0; transform: scale(.4); transform-box: fill-box; transform-origin: center; transition: opacity .35s ease 1s, transform .35s cubic-bezier(.3,1.6,.5,1) 1s; }
  .reveal.in .pb-line { stroke-dashoffset: 0; } .reveal.in .pb-dot { opacity: 1; }
  .reveal.in .pb-bar { transform: scaleY(1); } .reveal.in .pb-hbar { transform: scaleX(1); }
  .reveal.in .pb-nodes { opacity: 1; } .reveal.in .pb-links { opacity: .75; } .reveal.in .pb-x { opacity: 1; transform: scale(1); }
  .reveal.in .pb-links path { animation: pbMarch 1.6s linear infinite; }
  @keyframes pbMarch { to { stroke-dashoffset: -16; } }
  .pb-card:hover .pb-dot { animation: pbPulse 1.2s ease-in-out infinite; }
  @keyframes pbPulse { 50% { r: 5.5; opacity: .6; } }
  @media (prefers-reduced-motion: reduce) { .pb-line, .pb-dot, .pb-bar, .pb-hbar, .pb-nodes, .pb-links, .pb-x { transition: none !important; animation: none !important; stroke-dashoffset: 0; opacity: 1; transform: none; } }
  @media (max-width: 1100px) and (min-width: 781px) { .grid-4:has(.pb-card) { grid-template-columns: repeat(2, minmax(0,1fr)); } }
  /* Trustpilot badge (2026-09-30); links to Trustpilot since 2026-10-04 */
  a.tp-badge { text-decoration:none; transition:border-color .2s ease, background .2s ease; } a.tp-badge:hover { border-color:rgba(255,255,255,.28); }
  .tp-badge { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 8px 10px; margin-top: 22px; padding: 10px 16px; border-radius: 999px;
    background: rgba(255,255,255,.04); border: 1px solid rgba(91,214,155,.28); font-size: 13.5px; color: var(--text-dim); }
  .tp-badge[hidden] { display: none; }
  .tp-badge b { color: #FAFBFB; font-weight: 700; }
  .tp-stars { display: inline-flex; gap: 2px; }
  .tp-stars i { width: 18px; height: 18px; border-radius: 2px; background: #00B67A; display: inline-flex; align-items: center; justify-content: center; }
  .tp-stars svg { width: 13px; height: 13px; fill: #fff; }
  .tp-top .tp-badge { margin-top: 0; }
  .tp-img { height: 20px; width: auto; display: block; }
  .tp-brand { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; color: #FAFBFB; letter-spacing: -.01em; }
  .tp-brand svg { width: 16px; height: 16px; fill: #00B67A; }
  /* site-wide card style (2026-09-30), same family as the case-study cards */
  .mb-card { background: radial-gradient(120% 90% at 100% 0%, rgba(47,168,255,.12), transparent 55%), linear-gradient(180deg, #0B1624, #070B12) !important;
    border: 1px solid rgba(47,168,255,.28) !important; box-shadow: 0 20px 50px -30px rgba(0,102,178,.55), inset 0 1px 0 rgba(255,255,255,.05); }
  a.mb-card { transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
  a.mb-card:hover { transform: translateY(-3px); border-color: rgba(111,195,255,.7) !important; box-shadow: 0 26px 60px -28px rgba(47,168,255,.65), inset 0 1px 0 rgba(255,255,255,.07); }
  /* case study cards v2 (2026-09-30): stand out, data feel */
  .cs2-grid { gap: 18px; }
  .cs2 { position: relative; display: flex; flex-direction: column; overflow: hidden; padding: 24px 24px 22px; border-radius: 14px; color: var(--text);
    background: radial-gradient(120% 90% at 100% 0%, rgba(47,168,255,.16), transparent 55%), linear-gradient(180deg, #0B1624, #070B12);
    border: 1px solid rgba(47,168,255,.38); box-shadow: 0 24px 60px -28px rgba(0,102,178,.65), inset 0 1px 0 rgba(255,255,255,.06);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
  .cs2::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .35;
    background-image: radial-gradient(rgba(111,195,255,.35) 1px, transparent 1.2px); background-size: 16px 16px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 35%, transparent 75%); mask-image: linear-gradient(180deg, transparent 0%, #000 35%, transparent 75%); }
  .cs2:hover { transform: translateY(-4px); border-color: rgba(111,195,255,.8); box-shadow: 0 30px 70px -26px rgba(47,168,255,.7), inset 0 1px 0 rgba(255,255,255,.08); color: var(--text); }
  .cs2 > * { position: relative; }
  .cs2-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
  .cs2-tag { font-family: 'Geist Mono', monospace; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-2); }
  .cs2-live { display: inline-flex; align-items: center; gap: 6px; font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: #9FD6FF; background: rgba(47,168,255,.1); border: 1px solid rgba(47,168,255,.3); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
  .cs2-live i { width: 6px; height: 6px; border-radius: 50%; background: #5BD69B; box-shadow: 0 0 8px #5BD69B; }
  .cs2-metric { font-family: 'Instrument Sans', sans-serif; font-weight: 800; font-size: clamp(28px,4vw,36px); letter-spacing: -.02em; margin-top: 16px; line-height: 1.05;
    background: linear-gradient(135deg, #FFFFFF 10%, #9FD6FF 60%, #2FA8FF); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .cs2-sub { font-size: 13.5px; color: var(--text-dim); margin-top: 6px; }
  .cs2-chart { margin-top: 18px; }
  .cs2-chart svg { width: 100%; height: 96px; display: block; overflow: visible; }
  .cs2-axis { display: flex; justify-content: space-between; margin-top: 6px; font-family: 'Geist Mono', monospace; font-size: 10.5px; color: var(--text-faint); }
  .cs2-stats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
  .cs2-stats span { font-size: 12px; color: #C9D1DA; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 6px; padding: 4px 8px; }
  .cs2-stats b { color: #fff; font-weight: 700; }
  .cs2-desc { font-size: 14px; line-height: 1.6; color: #AEB8C4; margin: 14px 0 18px; }
  .cs2-go { margin-top: auto; font-weight: 700; font-size: 14px; color: var(--accent-2); }
  .cs2-go span { display: inline-block; transition: transform .2s; }
  .cs2:hover .cs2-go span { transform: translateX(4px); }
  .cs2 .cs-line { stroke-dasharray: 420; stroke-dashoffset: 420; transition: stroke-dashoffset 1.6s ease .3s; }
  .cs2 .cs-area, .cs2 .cs-dot { opacity: 0; transition: opacity .8s ease 1.4s; }
  .cs2 .cs-bar { transform: scaleY(0); transform-origin: bottom; transform-box: fill-box; transition: transform .7s cubic-bezier(.2,.8,.2,1) calc(.3s + var(--i) * .12s); }
  .reveal.in .cs2 .cs-line { stroke-dashoffset: 0; }
  .reveal.in .cs2 .cs-area, .reveal.in .cs2 .cs-dot { opacity: 1; }
  .reveal.in .cs2 .cs-bar { transform: scaleY(1); }
  @media (prefers-reduced-motion: reduce) { .cs2 .cs-line { stroke-dashoffset: 0; transition: none; } .cs2 .cs-area, .cs2 .cs-dot { opacity: 1; transition: none; } .cs2 .cs-bar { transform: none; transition: none; } }
  .cs-card { transition: border-color 0.2s ease, transform 0.2s ease; }
  .cs-card:hover { border-color: rgba(47,168,255,0.75); transform: translateY(-2px); color: var(--text); }

  /* Showcase: congruent ad -> page -> outcome */
  .build-flow { display: grid; grid-template-columns: minmax(0,1fr) 88px minmax(0,1fr) 88px minmax(0,1fr); align-items: center; }
  .outcome-metrics { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 36px; margin-top: 28px; }
  .build-link { display: flex; flex-direction: column; align-items: center; gap: 10px; }
  .build-link .tag { font-size: 9.5px; letter-spacing: 0.05em; text-align: center; line-height: 1.6; text-transform: uppercase; white-space: nowrap; }
  /* phones v2 (2026-09-30): dark UI in the site palette, shared hook highlighted on every screen */
  .ph-label { text-align: center; margin-bottom: 22px; font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
  .ph-label span { color: var(--accent-2); margin-right: 10px; }
  .phone {
    position: relative; width: 100%; max-width: 250px; margin-inline: auto; aspect-ratio: 9 / 16;
    border-radius: 36px; padding: 6px; background: linear-gradient(160deg, #1B3350, #070B12 55%, #0D1B2C);
    border: 1px solid rgba(47,168,255,.38); box-shadow: 0 40px 80px -30px rgba(0,102,178,.7), inset 0 1px 0 rgba(255,255,255,.1);
  }
  .phone-screen { position: relative; height: 100%; border-radius: 30px; overflow: hidden; background: #070B12; color: #EAF4FF; }
  .phone-notch { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 70px; height: 19px; border-radius: 12px; background: #000; z-index: 4; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
  .scr { position: absolute; inset: 0; background: radial-gradient(120% 55% at 50% 0%, rgba(47,168,255,.2), transparent 60%), linear-gradient(180deg, #0B1624, #070B12); }
  .scr::before { content: ''; position: absolute; inset: 0; opacity: .25; background-image: radial-gradient(rgba(111,195,255,.4) 1px, transparent 1.2px); background-size: 14px 14px;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, transparent 75%); mask-image: linear-gradient(180deg, transparent, #000 30%, transparent 75%); }
  .scr-ad { background: radial-gradient(70% 45% at 50% 40%, rgba(47,168,255,.42), transparent 70%), radial-gradient(120% 60% at 50% 100%, rgba(0,102,178,.35), transparent 60%), linear-gradient(180deg, #0D1D31, #060A10); }
  .phone-screen > * { z-index: 2; }
  .phone-screen > .scr { z-index: 0; }
  .ph-prog { position: absolute; top: 34px; left: 12px; right: 12px; display: flex; gap: 4px; }
  .ph-prog span { flex: 1; height: 2px; border-radius: 2px; background: rgba(255,255,255,.25); overflow: hidden; }
  .ph-prog span.on::after { content: ''; display: block; height: 100%; width: 100%; background: #fff; transform-origin: left; animation: phProg 5s linear infinite; }
  @keyframes phProg { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  .ph-acct { position: absolute; top: 45px; left: 12px; display: flex; align-items: center; gap: 7px; }
  .ph-av { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #6FC3FF, #0066B2); border: 1.5px solid rgba(255,255,255,.8); }
  .ph-acct b { display: block; font-size: 10.5px; font-weight: 700; line-height: 1.2; } .ph-acct i { display: block; font-style: normal; font-size: 8.5px; color: rgba(234,244,255,.6); }
  .ph-stage { position: absolute; top: 22%; left: 0; right: 0; display: flex; justify-content: center; }
  .ph-bag { height: auto; display: block; filter: drop-shadow(0 14px 22px rgba(0,0,0,.45)); }
  .scr-ad ~ .ph-stage .ph-bag { animation: phFloat 5s ease-in-out infinite; }
  @keyframes phFloat { 50% { transform: translateY(-5px); } }
  .ph-rail { position: absolute; right: 9px; bottom: 122px; display: flex; flex-direction: column; gap: 12px; }
  .ph-rail span { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 8.5px; color: #EAF4FF; }
  .ph-rail svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
  .ph-rail span:first-child svg { fill: #E0566E; stroke: #E0566E; filter: drop-shadow(0 0 6px rgba(224,86,110,.6)); }
  .ph-cap { position: absolute; left: 13px; right: 46px; bottom: 64px; }
  .ph-h { font-family: 'Instrument Sans', sans-serif; font-weight: 800; line-height: 1.16; color: #FFFFFF; letter-spacing: -.01em; }
  .hook { background: linear-gradient(180deg, transparent 58%, rgba(47,168,255,.5) 58%, rgba(47,168,255,.5) 92%, transparent 92%); padding-inline: 1px; }
  .ph-sub { margin-top: 7px; font-size: 9.5px; line-height: 1.4; color: rgba(234,244,255,.72); }
  .ph-cta { position: absolute; left: 11px; right: 11px; bottom: 14px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; gap: 6px; overflow: hidden;
    font-size: 11.5px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 10px 24px -10px rgba(47,168,255,.9); }
  .ph-cta::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg); animation: phShine 4.5s ease-in-out infinite; }
  @keyframes phShine { 0%, 60% { left: -60%; } 85%, 100% { left: 130%; } }
  .ph-cta.glass { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); box-shadow: none; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
  .ph-url { position: absolute; top: 34px; left: 14px; right: 14px; height: 20px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09);
    display: flex; align-items: center; justify-content: center; gap: 5px; font-family: 'Geist Mono', monospace; font-size: 8.5px; color: #8FA3B8; }
  .ph-body { position: absolute; top: 64px; left: 14px; right: 14px; }
  .ph-eyebrow { font-family: 'Geist Mono', monospace; font-size: 8px; letter-spacing: .1em; text-transform: uppercase; color: #6FC3FF; margin-bottom: 5px; }
  .ph-img { position: relative; border-radius: 14px; display: flex; align-items: center; justify-content: center; overflow: hidden;
    background: radial-gradient(70% 70% at 50% 42%, rgba(47,168,255,.38), transparent 70%), linear-gradient(160deg, #13263D, #0A121D); border: 1px solid rgba(111,195,255,.25); }
  .ph-dotfield { position: absolute; left: 0; right: 0; top: 14%; height: 46%; z-index: 1 !important; pointer-events: none;
    background-image: radial-gradient(rgba(111,195,255,.75) 1px, transparent 1.3px); background-size: 11px 11px;
    -webkit-mask-image: radial-gradient(52% 50% at 50% 50%, #000 0%, rgba(0,0,0,.55) 55%, transparent 100%); mask-image: radial-gradient(52% 50% at 50% 50%, #000 0%, rgba(0,0,0,.55) 55%, transparent 100%); opacity: .55; }
  .ph-img::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(111,195,255,.7) 1px, transparent 1.3px); background-size: 9px 9px;
    -webkit-mask-image: radial-gradient(60% 65% at 50% 45%, #000, transparent 100%); mask-image: radial-gradient(60% 65% at 50% 45%, #000, transparent 100%); opacity: .5; }
  .ph-img > * { position: relative; }
  .ph-red { z-index: 3; display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 999px; font-family: 'Geist Mono', monospace; font-size: 7.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    color: #FFE3E8; background: rgba(224,86,110,.22); border: 1px solid rgba(224,86,110,.6); box-shadow: 0 6px 16px -6px rgba(224,86,110,.7); }
  .ph-red i { width: 5px; height: 5px; border-radius: 50%; background: #E0566E; box-shadow: 0 0 6px #E0566E; animation: phBlink 1.6s ease-in-out infinite; }
  @keyframes phBlink { 50% { opacity: .35; } }
  .ph-price { display: flex; flex-direction: column; line-height: 1.05; }
  .ph-price s { font-size: 9px; color: #F08497; text-decoration-color: #E0566E; }
  .ph-price b { font-family: 'Instrument Sans', sans-serif; font-size: 15px; font-weight: 800; }
  .ph-li { display: flex; gap: 8px; margin-bottom: 7px; }
  .ph-li > span { flex-shrink: 0; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Geist Mono', monospace; font-size: 8.5px; color: #9FD6FF; background: rgba(47,168,255,.15); border: 1px solid rgba(47,168,255,.5); }
  .ph-li b { display: block; font-size: 10px; font-weight: 700; line-height: 1.25; color: #EAF4FF; } .ph-li i { display: block; font-style: normal; font-size: 8.5px; line-height: 1.35; color: #8FA3B8; }
  .ph-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .ph-nav b { font-size: 11px; font-weight: 800; letter-spacing: -.01em; }
  .ph-cart { position: relative; display: flex; } .ph-cart i { position: absolute; top: -2px; right: -3px; width: 6px; height: 6px; border-radius: 50%; background: #E0566E; box-shadow: 0 0 6px #E0566E; }
  .ph-dots { position: absolute; bottom: 8px; left: 0; right: 0; display: flex; justify-content: center; gap: 4px; }
  .ph-dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.3); } .ph-dots i.on { width: 12px; border-radius: 3px; background: #6FC3FF; }
  .ph-stars { display: flex; align-items: center; gap: 6px; font-size: 8.5px; color: #8FA3B8; margin-bottom: 7px; } .ph-stars span { font-size: 10px; letter-spacing: 1px; color: #5BD69B; }
  .ph-check { position: relative; padding-left: 15px; font-size: 9.5px; line-height: 1.5; color: #C9D6E4; }
  .ph-check::before { content: ''; position: absolute; left: 1px; top: 3px; width: 7px; height: 4px; border-left: 2px solid #6FC3FF; border-bottom: 2px solid #6FC3FF; transform: rotate(-45deg); }
  .ph-up { margin-top: 8px; display: flex; align-items: center; gap: 7px; padding: 6px 8px; border-radius: 9px; border: 1px dashed rgba(111,195,255,.4); background: rgba(47,168,255,.07); font-size: 9px; color: #C9D6E4; }
  .ph-up b { color: #fff; }
  .ph-box { width: 11px; height: 11px; border-radius: 3px; background: #2FA8FF; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .ph-buy { position: absolute; left: 11px; right: 11px; bottom: 14px; display: flex; align-items: center; gap: 9px; } .ph-buy > b { font-family: 'Instrument Sans', sans-serif; font-size: 15px; font-weight: 800; }
  .metric-chip {
    position: absolute; z-index: 6; display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 12px; border-radius: 12px; white-space: nowrap;
    font-family: 'Geist Mono', monospace; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: #EAF6FF;
    background: radial-gradient(120% 120% at 100% 0%, rgba(47,168,255,.2), transparent 60%), rgba(8,20,36,.94); border: 1px solid rgba(47,168,255,.55);
    box-shadow: 0 12px 30px -8px rgba(47,168,255,.5), inset 0 1px 0 rgba(255,255,255,.08);
  }
  .metric-chip b { color: #6FC3FF; font-weight: 700; }
  .metric-chip.hot { border-color: rgba(224,86,110,.7); background: radial-gradient(120% 120% at 100% 0%, rgba(224,86,110,.28), transparent 60%), rgba(22,9,14,.94);
    box-shadow: 0 12px 32px -8px rgba(224,86,110,.65), inset 0 1px 0 rgba(255,255,255,.08); }
  .metric-chip.hot b { color: #FF8FA3; font-size: 13.5px; text-shadow: 0 0 12px rgba(224,86,110,.6); }
  .bl-line { width: 70px; height: 12px; overflow: visible; }
  .bl-line path:first-child { animation: pbMarch 1.4s linear infinite; }
  .bl-dot { animation: blDot 2.4s ease-in-out infinite; }
  @keyframes blDot { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(72px); opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .ph-prog span.on::after, .ph-bag, .ph-cta::after, .bl-line path, .bl-dot { animation: none !important; } }
  .outcome-card { background: var(--surface-2); border: 1px solid rgba(0,102,178,0.4); border-radius: 10px; padding: 32px 36px; margin-top: 56px; }
  .outcome-bar { height: 8px; border-radius: 4px; background: #15161A; overflow: hidden; }
  .outcome-bar span { display: block; height: 100%; border-radius: 4px; }
  @media (max-width: 900px) {
    .build-flow { grid-template-columns: 1fr; gap: 26px; }
    .build-link { flex-direction: row; justify-content: center; }
    .build-link svg { transform: rotate(90deg); }
    .outcome-card { margin-top: 36px; padding: 28px 24px; }
    .outcome-metrics { grid-template-columns: 1fr; gap: 24px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .hero-in { animation: none; }
    .blob-a, .blob-b, .blob-c { animation: none; }
    .spotlight { display: none; }
    .tilt-card { transition: none; }
  }

  details summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  details summary::-webkit-details-marker { display: none; }
  details summary::after {
    content: '+'; flex-shrink: 0; font-family: 'Instrument Sans', sans-serif;
    font-size: 20px; color: var(--accent-2);
  }
  details[open] summary::after { content: '\2212'; }

  /* v4: dark particle-nebula background */
  :root { --bg: #020305; }
  .nebula-fog { position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
      radial-gradient(90% 38% at 50% 64%, rgba(16,58,110,0.42), transparent 70%),
      radial-gradient(60% 22% at 50% 60%, rgba(40,110,190,0.16), transparent 70%),
      linear-gradient(180deg, #020305 0%, #020305 30%, #03070D 60%, #020305 100%); }
  #nebula { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
  .nebula-vignette { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0,0,0,0.65) 100%); }



  /* TrendTrack-inspired layer (2026-10-04) */
  :root { --bg:#01050A; --surface:#0A0F15; --surface-2:#0A1220; --line:#171D25;
          --text:#FFFFFF; --text-dim:rgba(255,255,255,.66); --text-faint:rgba(255,255,255,.42); --hl:#3DB2FF; }
  body { font-family:'Geist',system-ui,sans-serif; letter-spacing:-.005em; }
  h1, h2, h3, .display { font-family:'Instrument Sans',system-ui,sans-serif !important; font-weight:600 !important; letter-spacing:-.042em !important; }
  .hero-h1 { line-height:1.08 !important; }
  .hero-grad { background:none !important; -webkit-text-fill-color:var(--hl) !important; color:var(--hl) !important; }
  .accent-serif { font-family:'Instrument Sans',sans-serif !important; font-style:normal !important; font-weight:600 !important; color:var(--hl) !important; }
  .tag { font-family:'Geist Mono',monospace !important; color:rgba(255,255,255,.7) !important; letter-spacing:.06em; }
  .tag:not(.hero-pill)::before { content:'[ '; color:var(--hl); } .tag:not(.hero-pill)::after { content:' ]'; color:var(--hl); }
  .tag.hero-pill { font-family:'Geist',sans-serif !important; text-transform:none !important; letter-spacing:0 !important; font-size:13px !important;
                   color:rgba(255,255,255,.85) !important; background:rgba(255,255,255,.05) !important; border:1px solid rgba(255,255,255,.1) !important;
                   box-shadow:none !important; border-radius:999px !important; padding:7px 14px !important; }
  .own-row .ck { border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.03); border-radius:9px; padding:7px 12px 7px 10px; font-size:13px; }
  .btn { border-radius:12px !important; padding:14px 14px 14px 22px !important; gap:14px;
         background:linear-gradient(90deg,#0B74D1 0%,#2FA8FF 100%) !important; color:#fff !important; font-weight:600 !important;
         box-shadow:0 0 0 1px rgba(61,178,255,.35), 0 10px 40px -8px rgba(47,168,255,.5) !important; }
  .btn:hover { color:#fff !important; filter:brightness(1.08); }
  .btn.cta-trace::before { display:none !important; }
  .btn::after, .btn.cta-trace::after { content:'\203A' !important; display:inline-grid; place-items:center; width:26px; height:26px; border-radius:8px;
                background:rgba(255,255,255,.2) !important; font-size:17px; line-height:1; position:static !important; inset:auto !important; z-index:auto !important; }
  .btn-ghost { border-radius:12px !important; }
  .stat4, .own-card { border-radius:20px !important; }
  [style*="border-radius:8px"], [style*="border-radius: 8px"], [style*="border-radius:10px"], [style*="border-radius: 10px"],
  [style*="border-radius:12px"], [style*="border-radius: 12px"] { border-radius:18px !important; }
  /* DFY badge in the hero headline (Pedram 2026-10-05: option B, outlined mono pill) */
  .dfy { display:inline-block; vertical-align:1.06em; margin-left:.35em; font:500 .26em/1 'Geist Mono',monospace; letter-spacing:.1em; color:#BFE3FF; -webkit-text-fill-color:#BFE3FF; border:1px solid rgba(61,178,255,.45); background:rgba(47,168,255,.08); padding:.55em .8em; border-radius:999px; white-space:nowrap; }
  .dfy-s { display:none; }
  @media (max-width: 799px) { .dfy-l { display:none; } .dfy-s { display:inline; } .dfy { font-size:.3em; vertical-align:.87em; } }


  body { font-family:'Geist',system-ui,-apple-system,sans-serif; letter-spacing:-.005em; }
  h1, h2, h3, .display { font-family:'Instrument Sans',system-ui,sans-serif !important; font-weight:600 !important; letter-spacing:-.042em !important; }
  .accent-serif { font-family:'Instrument Sans',sans-serif !important; font-style:normal !important; font-weight:600 !important; }
  [style*="Bricolage"], [font-family*="Bricolage"] { font-family:'Instrument Sans',sans-serif !important; }
  [style*="Manrope"], [font-family*="Manrope"] { font-family:'Geist',sans-serif !important; }
  [style*="IBM Plex"], [font-family*="IBM Plex"] { font-family:'Geist Mono',monospace !important; }


/* ===================== Service pages (built by src-guides/service_pages.py) ===================== */
.svc-glow { position:absolute; left:0; right:0; top:0; height:1150px; z-index:0; pointer-events:none; overflow:hidden;
  background: radial-gradient(80% 42% at 50% 46%, rgba(16,58,110,.42), transparent 70%), radial-gradient(46% 24% at 50% 40%, rgba(40,110,190,.16), transparent 70%); }
.svc-glow::before { content:''; position:absolute; inset:0; opacity:.4; background-image: radial-gradient(rgba(111,195,255,.38) 1px, transparent 1.3px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(55% 34% at 50% 48%, #000, transparent 75%); mask-image: radial-gradient(55% 34% at 50% 48%, #000, transparent 75%); }
.svc-glow::after { content:''; position:absolute; left:0; right:0; bottom:0; height:320px; background: linear-gradient(180deg, transparent, var(--bg)); }
.nav { position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:12px; padding-block:26px; }
.nav .btn.btn-sm { padding:9px 9px 9px 16px !important; font-size:13px; gap:10px; }
.nav .btn.btn-sm::after { width:20px; height:20px; font-size:14px; border-radius:6px; }
@media (max-width: 640px) { .nav-actions .btn { display:inline-flex; } }
@media (max-width: 420px) { .nav > a img { height:15px !important; } .nav-actions { gap:6px; }
  .nav-actions .btn.btn-sm { font-size:12px; padding:7px 7px 7px 11px !important; gap:8px; } .nav-actions .btn-ghost.btn-sm { padding:7.5px 10px; font-size:12px; } }
.site-footer { position:relative; z-index:1; }

/* hero */
.svc-hero { position:relative; z-index:1; padding-block: clamp(18px,6vw,44px) 0; text-align:center; }
.svc-hero-in { max-width:900px; margin-inline:auto; display:flex; flex-direction:column; align-items:center; gap:22px; }
.svc-h1 { font-size: clamp(31px, 7.4vw, 56px); line-height:1.06 !important; color:#FAFBFB; max-width:880px; }
.svc-lede { font-size:17px; line-height:1.6; color:var(--text-dim); max-width:650px; margin:0; }
.svc-hero-cta { padding-block:30px 52px; text-align:center; }
.svc-hero-cta .sub { font-size:13px; color:var(--text-faint); margin-top:14px; }
.svc-checks { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 12px; margin-top:22px; }
.svc-checks .ck { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:#DCE3EA; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.03); border-radius:9px; padding:7px 12px 7px 10px; }
.svc-checks .ck::before { content:''; flex-shrink:0; width:20px; height:20px; border-radius:50%; box-shadow:0 0 14px -4px rgba(47,168,255,.8);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat, linear-gradient(135deg, var(--accent), var(--accent-2)); }

@media (max-width: 480px) { .svc-checks { gap:8px; } .svc-checks .ck { font-size:12px; padding:6px 10px 6px 8px; gap:6px; } .svc-checks .ck::before { width:17px; height:17px; background-size:9px, auto; } }

/* sections */
.svc-sec { padding-block: clamp(44px,9vw,72px); }
.svc-kicker { display:block; text-transform:uppercase; color:var(--accent-2) !important; margin-bottom:16px; }
.svc-h2 { font-size: clamp(25px,6vw,36px); line-height:1.12; color:#FAFBFB; max-width:720px; margin-bottom:40px !important; }
.svc-intro { font-size:16px; line-height:1.6; color:var(--text-dim); max-width:640px; margin:-26px 0 44px; }
.svc-prose p { font-size:16.5px; line-height:1.68; color:var(--text-dim); margin:0 0 16px; }
.svc-prose p:last-child { margin-bottom:0; }
.svc-prose strong { color:#FAFBFB; }
.svc-prose .svc-h2 { margin-bottom:22px !important; }
.svc-split { display:grid; grid-template-columns: minmax(0,1fr) minmax(0,450px); gap:64px; align-items:center; }
@media (max-width: 960px) { .svc-split { grid-template-columns:1fr; gap:36px; } }
.svc-note { margin-top:36px; font-size:15px; line-height:1.6; color:var(--text-faint); max-width:680px; }
.svc-note strong { color:var(--text-dim); }
.svc-cap { margin-top:14px; font-size:13px; line-height:1.55; color:var(--text-dim); }
.svc-src { margin-top:10px; font-size:11.5px; line-height:1.5; color:var(--text-faint); }
.svc-center { text-align:center; padding-block:4px 24px; }
.svc-links { margin-top:26px; display:flex; gap:12px 28px; flex-wrap:wrap; font-size:14.5px; }

/* old way / new way: homepage flow-row, sized for these pages */
.svc-flow .mb-card-red, .svc-flow .mb-card { flex:1; border-radius:18px; padding:32px; }
.svc-flow .tag { text-transform:uppercase; margin-bottom:22px; display:block; }
.svc-flow .it { display:flex; gap:13px; } .svc-flow .it + .it { margin-top:16px; }
.svc-flow .it svg { flex-shrink:0; margin-top:4px; }
.svc-flow .it div { font-size:15px; line-height:1.5; color:var(--text-dim); }
.svc-flow .mb-card .it div { color:#E7E9EB; }
@media (max-width: 780px) { .svc-flow .mb-card-red, .svc-flow .mb-card { padding:26px 22px; } }

/* funnel chart (Meta ads page) */
.fnl { display:flex; flex-direction:column; gap:9px; margin-top:20px; }
.fnl-row { display:grid; grid-template-columns: minmax(0,1fr) 92px; gap:14px; align-items:center; }
.fnl-seg { height:62px; width:var(--w); margin-inline:auto; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  clip-path: polygon(0 0, 100% 0, calc(100% - 15px) 100%, 15px 100%); background: linear-gradient(180deg, rgba(47,168,255,.62), rgba(0,102,178,.38));
  transform:scaleX(.3); opacity:0; transition: transform .7s cubic-bezier(.2,.8,.2,1) calc(.2s + var(--i) * .12s), opacity .5s ease calc(.2s + var(--i) * .12s); }
.fnl-seg b { font-size:14px; font-weight:700; color:#fff; line-height:1.2; }
.fnl-seg i { font-style:normal; font-family:'Geist Mono',monospace; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:#CFE9FF; margin-top:4px; }
.fnl-row.hot .fnl-seg { background: linear-gradient(180deg, rgba(224,86,110,.66), rgba(150,38,60,.42)); }
.fnl-row.hot .fnl-seg i { color:#FFD3DB; }
.fnl-val b { display:block; font-family:'Instrument Sans',sans-serif; font-weight:800; font-size:30px; letter-spacing:-.02em; line-height:1;
  background: linear-gradient(135deg, #FFFFFF 10%, #9FD6FF 60%, #2FA8FF); -webkit-background-clip:text; background-clip:text; color:transparent; }
.fnl-row.hot .fnl-val b { background: linear-gradient(135deg, #FFFFFF 10%, #F6C1CA 55%, #E0566E); -webkit-background-clip:text; background-clip:text; }
.fnl-val i { display:block; font-style:normal; font-family:'Geist Mono',monospace; font-size:10px; color:var(--text-faint); margin-top:6px; }
.fnl-stack { display:flex; height:10px; border-radius:5px; overflow:hidden; margin-top:20px; gap:2px; }
.fnl-stack span { height:100%; background:#2FA8FF; } .fnl-stack span:nth-child(2) { background:#1E6FB5; } .fnl-stack span:nth-child(3) { background:#E0566E; }
.fnl-legend { display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 12px; margin-top:8px; font-family:'Geist Mono',monospace; font-size:10px; color:var(--text-faint); }
.reveal.in .fnl-seg { transform:none; opacity:1; }
@media (max-width: 420px) { .fnl-row { grid-template-columns: minmax(0,1fr) 74px; gap:10px; } .fnl-val b { font-size:25px; } .fnl-seg b { font-size:13px; } }

/* destinations chart (landing page page) */
.dst { display:flex; flex-direction:column; gap:12px; margin-top:18px; }
.dst-row { display:grid; grid-template-columns: 170px minmax(0,1fr) 30px; gap:12px; align-items:center; font-size:13px; color:var(--text-dim); }
.dst-track { height:14px; border-radius:5px; background:rgba(255,255,255,.05); overflow:hidden; }
.dst-bar { height:100%; width:var(--v); min-width:5px; border-radius:5px; background: linear-gradient(90deg, rgba(255,255,255,.16), rgba(255,255,255,.34));
  transform:scaleX(0); transform-origin:left; transition: transform .9s cubic-bezier(.2,.8,.2,1) calc(.25s + var(--i) * .1s); }
.dst-row b { font-family:'Geist Mono',monospace; font-size:12px; font-weight:500; color:#DCE3EA; text-align:right; }
.dst-row.hi { color:#FAFBFB; font-weight:600; }
.dst-row.hi .dst-track { background:rgba(47,168,255,.1); box-shadow: inset 0 0 0 1px rgba(47,168,255,.35); }
.dst-row.hi .dst-bar { background: linear-gradient(90deg, #6FC3FF, #2FA8FF); box-shadow:0 0 14px rgba(47,168,255,.9); }
.dst-row.hi b { color:#6FC3FF; }
.reveal.in .dst-bar { transform:scaleX(1); }
@media (max-width: 480px) { .dst-row { grid-template-columns: 118px minmax(0,1fr) 26px; gap:9px; font-size:12px; } }

/* showcase captions (landing page page) */
.svc-show .ph-label { margin-bottom:10px; }
.svc-show .ph-note { text-align:center; font-size:13px; line-height:1.45; color:var(--text-dim); max-width:250px; margin:0 auto 22px; min-height:38px; }
@media (max-width: 900px) { .svc-show .ph-note { min-height:0; } }
@media (max-width: 420px) { .svc-show .metric-chip { right:-6px !important; } }

/* card grids */
.svc-grid3 { display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:18px; }
@media (max-width: 980px) { .svc-grid3 { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 640px) { .svc-grid3 { grid-template-columns:1fr; } }
.svc-card { display:flex; flex-direction:column; padding:26px !important; border-radius:18px !important; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.svc-card:hover { transform:translateY(-3px); border-color:rgba(111,195,255,.7) !important; box-shadow:0 26px 60px -28px rgba(47,168,255,.65), inset 0 1px 0 rgba(255,255,255,.07); }
.svc-ic { width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; color:#6FC3FF; margin-bottom:20px;
  background:rgba(47,168,255,.12); border:1px solid rgba(47,168,255,.4); box-shadow:0 0 24px -6px rgba(47,168,255,.6); }
.svc-ic svg { width:23px; height:23px; }
.svc-card h3 { font-size:18px; color:#FAFBFB; margin-bottom:8px !important; }
.svc-card p { font-size:14.5px; line-height:1.55; color:var(--text-dim); margin:0; }
.svc-card .viz2-tag { display:block; margin-bottom:8px; }
.svc-card.cta-card { justify-content:center; border-style:dashed !important; }
.svc-card.cta-card .go { margin-top:18px; font-weight:700; font-size:14.5px; color:var(--accent-2); }

/* numbered steps */
.svc-steps { display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap:18px; }
@media (max-width: 980px) { .svc-steps { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 640px) { .svc-steps { grid-template-columns:1fr; } }
.svc-steps.three { grid-template-columns: repeat(3,minmax(0,1fr)); }
@media (max-width: 860px) { .svc-steps.three { grid-template-columns:1fr; } }
.svc-step { padding:24px !important; border-radius:18px !important; }
.svc-step .num { display:flex; align-items:center; gap:14px; margin-bottom:18px; font-family:'Instrument Sans',sans-serif; font-weight:800; font-size:40px; line-height:1; letter-spacing:-.03em; }
.svc-step .num span { background: linear-gradient(135deg, #FFFFFF 10%, #9FD6FF 60%, #2FA8FF); -webkit-background-clip:text; background-clip:text; color:transparent; }
.svc-step .num::after { content:''; flex:1; height:1px; background: linear-gradient(90deg, rgba(47,168,255,.55), transparent); }
.svc-step h3 { font-size:17px; color:#FAFBFB; margin-bottom:8px !important; }
.svc-step p { font-size:14.5px; line-height:1.55; color:var(--text-dim); margin:0; }
.svc-ai { margin-top:40px; padding:20px 24px; border:1px dashed rgba(47,168,255,.4); border-radius:18px; font-size:14.5px; line-height:1.6; color:var(--text-dim); }
.svc-ai b { display:block; font-size:16px; color:#FAFBFB; margin-bottom:8px; }

/* who it's for */
.svc-who { display:grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); gap:44px; padding:34px !important; border-radius:18px !important; align-items:start; }
@media (max-width: 860px) { .svc-who { grid-template-columns:1fr; gap:28px; padding:26px 22px !important; } }
.svc-who h2 { font-size: clamp(23px,5vw,30px); color:#FAFBFB; margin-bottom:10px !important; }
.svc-who > div > p { font-size:15px; line-height:1.6; color:var(--text-dim); margin:0; }
.svc-list { display:flex; flex-direction:column; gap:14px; }
.svc-li { display:flex; gap:12px; font-size:15px; line-height:1.5; color:#E7E9EB; }
.svc-li svg { flex-shrink:0; margin-top:3px; }
.svc-chips { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0; }
.svc-chip { font-size:13px; padding:6px 12px; border-radius:999px; background:rgba(47,168,255,.08); border:1px solid rgba(47,168,255,.28); color:#CFE9FF; }

/* page-type wireframes (landing page page) */
.wf { position:relative; height:170px; border-radius:12px; margin-bottom:22px; overflow:hidden; display:flex; align-items:flex-end; justify-content:center;
  background: radial-gradient(70% 80% at 50% 30%, rgba(47,168,255,.24), transparent 70%), linear-gradient(160deg, #13263D, #0A121D); border:1px solid rgba(111,195,255,.22); }
.wf::before { content:''; position:absolute; inset:0; background-image: radial-gradient(rgba(111,195,255,.6) 1px, transparent 1.3px); background-size:10px 10px; opacity:.35;
  -webkit-mask-image: radial-gradient(60% 60% at 50% 35%, #000, transparent 100%); mask-image: radial-gradient(60% 60% at 50% 35%, #000, transparent 100%); }
.wf-pg { position:relative; width:60%; max-width:190px; height:150px; border-radius:10px 10px 0 0; background:#0A1524; border:1px solid rgba(111,195,255,.38); border-bottom:0;
  padding:11px 11px 0; display:flex; flex-direction:column; gap:6px; box-shadow:0 -12px 34px -12px rgba(47,168,255,.55); overflow:hidden; transition: transform .35s ease; }
.svc-card:hover .wf-pg { transform:translateY(-4px); }
.wf-url { height:9px; border-radius:5px; background:rgba(255,255,255,.07); flex-shrink:0; margin-bottom:2px; }
.wf-eb { font-family:'Geist Mono',monospace; font-size:6.5px; letter-spacing:.1em; text-transform:uppercase; color:#6FC3FF; line-height:1; }
.wf-l { flex-shrink:0; height:4px; border-radius:3px; background:rgba(234,244,255,.2); width:var(--w,100%); }
.wf-l.h { height:7px; background:rgba(234,244,255,.85); }
.wf-l.hk { height:7px; background:#3DB2FF; box-shadow:0 0 8px rgba(61,178,255,.6); }
.wf-img { flex-shrink:0; height:34px; border-radius:6px; background: radial-gradient(55% 70% at 50% 45%, rgba(47,168,255,.55), transparent 75%), #10223A; border:1px solid rgba(111,195,255,.25); }
.wf-row { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.wf-n { flex-shrink:0; width:13px; height:13px; border-radius:50%; display:grid; place-items:center; font:500 7px/1 'Geist Mono',monospace; color:#9FD6FF; background:rgba(47,168,255,.15); border:1px solid rgba(47,168,255,.55); }
.wf-th { flex-shrink:0; width:22px; height:18px; border-radius:4px; background: radial-gradient(60% 70% at 50% 45%, rgba(47,168,255,.5), transparent 75%), #10223A; border:1px solid rgba(111,195,255,.2); }
.wf-col { flex:1; display:flex; flex-direction:column; gap:4px; }
.wf-stars { font-size:8px; letter-spacing:1px; color:#5BD69B; line-height:1; }
.wf-ck { display:flex; align-items:center; gap:5px; flex-shrink:0; }
.wf-ck::before { content:''; width:5px; height:3px; border-left:1.5px solid #6FC3FF; border-bottom:1.5px solid #6FC3FF; transform:rotate(-45deg); margin-top:-2px; }
.wf-btn { flex-shrink:0; height:15px; border-radius:5px; background: linear-gradient(90deg, #0B74D1, #2FA8FF); box-shadow:0 6px 14px -6px rgba(47,168,255,.9); }
.wf-tiles { display:grid; grid-template-columns: repeat(3,1fr); gap:5px; flex-shrink:0; }
.wf-tile { position:relative; height:46px; border-radius:6px; border:1px solid rgba(111,195,255,.22); background: radial-gradient(60% 50% at 50% 40%, rgba(47,168,255,.35), transparent 75%), #0F1E33; }
.wf-tile.best { border-color:#2FA8FF; box-shadow:0 0 14px -2px rgba(47,168,255,.75); }
.wf-tile.best::after { content:'BEST'; position:absolute; top:-5px; left:50%; transform:translateX(-50%); font:600 5.5px/1 'Geist Mono',monospace; letter-spacing:.08em; color:#fff; background:#2FA8FF; padding:2px 4px; border-radius:3px; }
.wf-fan { position:relative; width:100%; height:100%; }
.wf-fan .wf-pg { position:absolute; bottom:0; left:50%; width:44%; height:132px; margin-left:-22%; transform-origin:bottom center; }
.wf-fan .wf-pg:nth-child(1) { transform:translateX(-56%) rotate(-9deg); opacity:.8; }
.wf-fan .wf-pg:nth-child(3) { transform:translateX(56%) rotate(9deg); opacity:.8; }
.wf-fan .wf-pg:nth-child(2) { z-index:2; height:142px; }
.svc-card:hover .wf-fan .wf-pg:nth-child(1) { transform:translateX(-64%) rotate(-12deg); }
.svc-card:hover .wf-fan .wf-pg:nth-child(3) { transform:translateX(64%) rotate(12deg); }
.wf-ab { display:flex; gap:12px; align-items:flex-end; height:100%; padding-top:18px; }
.wf-ab .wf-pg { width:118px; height:134px; }
.wf-ab .wf-pg.win { border-color:#2FA8FF; box-shadow:0 -12px 34px -10px rgba(47,168,255,.85); }
.wf-tagab { position:absolute; top:8px; right:8px; font:600 7px/1 'Geist Mono',monospace; letter-spacing:.08em; color:#9FD6FF; border:1px solid rgba(47,168,255,.5); border-radius:999px; padding:3px 6px; background:rgba(47,168,255,.12); }
.wf-pg.win .wf-tagab { color:#fff; background:#2FA8FF; border-color:#2FA8FF; }
@media (max-width: 420px) { .wf-ab .wf-pg { width:104px; } }

/* conversion math (CRO page) */
.cm-grid { display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
.cm-side { border-radius:14px; padding:18px 16px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); text-align:center; }
.cm-side.bad { background: radial-gradient(120% 90% at 50% 0%, rgba(224,86,110,.16), transparent 60%), rgba(255,255,255,.02); border-color:rgba(224,86,110,.38); }
.cm-side.good { background: radial-gradient(120% 90% at 50% 0%, rgba(47,168,255,.2), transparent 60%), rgba(255,255,255,.02); border-color:rgba(47,168,255,.5); box-shadow:0 0 36px -14px rgba(47,168,255,.7); }
.cm-h { font-family:'Geist Mono',monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:#F08497; }
.cm-side.good .cm-h { color:#6FC3FF; }
.cm-dots { display:grid; grid-template-columns: repeat(10, 8px); gap:4px; justify-content:center; margin:14px auto 16px; }
.cm-dots i { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.12); }
.cm-side.bad .cm-dots i.on { background:#E0566E; box-shadow:0 0 8px #E0566E; }
.cm-side.good .cm-dots i.on { background:#6FC3FF; box-shadow:0 0 8px #2FA8FF; }
.cm-num { font-family:'Instrument Sans',sans-serif; font-weight:800; font-size:clamp(36px,6vw,46px); letter-spacing:-.03em; line-height:1;
  background: linear-gradient(135deg, #FFFFFF 10%, #F6C1CA 55%, #E0566E); -webkit-background-clip:text; background-clip:text; color:transparent; }
.cm-side.good .cm-num { background: linear-gradient(135deg, #FFFFFF 10%, #9FD6FF 60%, #2FA8FF); -webkit-background-clip:text; background-clip:text; }
.cm-l { font-size:12.5px; color:var(--text-dim); margin-top:8px; }
.cm-math { font-family:'Geist Mono',monospace; font-size:10.5px; color:var(--text-faint); margin-top:6px; }
.cm-delta { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:16px; font-size:14px; color:#DCE3EA; }
.cm-delta b { font-family:'Instrument Sans',sans-serif; font-size:20px; font-weight:800; color:#6FC3FF; }
@media (max-width: 400px) { .cm-grid { gap:10px; } .cm-side { padding:16px 10px; } .cm-dots { grid-template-columns: repeat(10, 7px); gap:3px; } .cm-dots i { width:7px; height:7px; } }

/* drop-off steps (CRO page) */
.dr { display:grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap:16px; margin-top:10px; }
.dr-col { position:relative; height:150px; display:flex; align-items:flex-end; }
.dr-ghost { position:absolute; left:0; right:0; bottom:0; height:var(--p); border-radius:8px 8px 3px 3px; border:1.5px dashed rgba(224,86,110,.55); background:rgba(224,86,110,.08); }
.dr-bar { position:relative; width:100%; height:var(--h); border-radius:8px 8px 3px 3px; background: linear-gradient(180deg, #2FA8FF, rgba(0,102,178,.4)); box-shadow:0 0 24px -8px rgba(47,168,255,.7);
  transform:scaleY(0); transform-origin:bottom; transition: transform .8s cubic-bezier(.2,.8,.2,1) calc(.3s + var(--i) * .12s); }
.dr-t { margin-top:14px; }
.dr-t .n { font-family:'Geist Mono',monospace; font-size:10px; letter-spacing:.08em; color:var(--accent-2); }
.dr-t b { display:block; font-size:15px; color:#FAFBFB; margin-top:4px; font-family:'Instrument Sans',sans-serif; letter-spacing:-.02em; }
.dr-t i { display:block; font-style:normal; font-size:13px; line-height:1.45; color:var(--text-dim); margin-top:4px; }
.dr-legend { display:flex; gap:18px; flex-wrap:wrap; margin-top:20px; font-family:'Geist Mono',monospace; font-size:10.5px; color:var(--text-faint); }
.dr-legend span { display:inline-flex; align-items:center; gap:7px; }
.dr-legend i { width:12px; height:8px; border-radius:2px; background:#2FA8FF; } .dr-legend i.lost { background:rgba(224,86,110,.15); border:1px dashed rgba(224,86,110,.7); }
.reveal.in .dr-bar { transform:scaleY(1); }
@media (max-width: 760px) {
  .dr { grid-template-columns:1fr; gap:14px; }
  .dr-step { display:grid; grid-template-columns: minmax(0,1fr) minmax(0,.9fr); gap:14px; align-items:center; }
  .dr-t { margin-top:0; }
  .dr-col { order:2; height:22px; align-items:stretch; }
  .dr-ghost { top:0; bottom:0; height:auto; width:var(--p); border-radius:3px 6px 6px 3px; }
  .dr-bar { height:100%; width:var(--h); border-radius:3px 6px 6px 3px; transform:scaleX(0); transform-origin:left; }
  .reveal.in .dr-bar { transform:scaleX(1); }
}

/* FAQ in the homepage accordion style */
.svc-faq { display:flex; flex-direction:column; gap:10px; max-width:900px; }
.svc-faq details { background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:18px 22px; transition: border-color .2s ease; }
.svc-faq details[open] { border-color:rgba(47,168,255,.35); }
.svc-faq summary { cursor:pointer; font-size:16px; font-weight:600; color:#F0F1F2; list-style:none; }
.svc-faq details p { margin:14px 0 0; font-size:14.5px; line-height:1.6; color:var(--text-dim); max-width:680px; }

/* related pages */
.svc-rel { display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:16px; }
@media (max-width: 780px) { .svc-rel { grid-template-columns:1fr; } }
.svc-rel a { display:flex; flex-direction:column; gap:8px; padding:22px; border-radius:18px; color:var(--text); }
.svc-rel .t { font-family:'Instrument Sans',sans-serif; font-size:17px; font-weight:600; letter-spacing:-.02em; color:#FAFBFB; }
.svc-rel .d { font-size:14px; line-height:1.5; color:var(--text-dim); }
.svc-rel .go { margin-top:auto; padding-top:6px; font-weight:700; font-size:14px; color:var(--accent-2); }

/* final CTA */
.svc-final { position:relative; padding-block: clamp(64px,14vw,110px); text-align:center; overflow:hidden; }
.svc-final::before { content:''; position:absolute; left:50%; top:50%; width:min(980px,140vw); height:440px; transform:translate(-50%,-50%); pointer-events:none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(16,58,110,.5), transparent 72%); }
.svc-final h2 { font-size: clamp(28px,7vw,42px); max-width:680px; margin:0 auto 28px !important; color:#FAFBFB; }
.svc-final .sub { font-size:13px; color:var(--text-faint); margin-top:20px; }