/* ==========================================================================
   Digital Marketing — page visuals
   growth journey (hero), visibility → growth (intro), search suggestions (SEO),
   orbit ecosystem (SMO), monthly rhythm (SMM), particle funnel, editorial figures
   ========================================================================== */
:root { --mono: ui-monospace, SFMono-Regular, Menlo, monospace; --lime: #9be15d; --grow: #4fae3a; --pink: #ff5ca8; --amber: #f5b43c; }
.d-glow--dm {
  inset: -4% 4% 42%;
  background:
    radial-gradient(34% 55% at 20% 62%, rgb(107 63 212 / 0.45), transparent 70%),
    radial-gradient(40% 60% at 55% 46%, rgb(58 126 246 / 0.4), transparent 70%),
    radial-gradient(32% 52% at 88% 38%, rgb(116 214 90 / 0.28), transparent 70%);
}

/* ==========================================================================
   Hero — search to conversion along one rising line
   ========================================================================== */
.gj { --px: 0; --py: 0; position: relative; max-width: 80rem; margin-inline: auto; overflow: hidden; border: 1px solid rgb(255 255 255 / 0.12); border-radius: clamp(1rem, 1.6vw, 1.75rem); background: #05060a; color: var(--white); }
.gj__bar { display: flex; align-items: center; gap: 1rem; padding: 0.9rem 1.25rem; border-bottom: 1px solid rgb(255 255 255 / 0.08); font: 600 var(--fs-micro)/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: rgb(255 255 255 / 0.45); }
.gj__run { flex: 1; }
.gj__key { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--lime); }
.gj__key i { width: 1.1rem; height: 2px; border-radius: 99em; background: linear-gradient(90deg, #6b3fd4, #5b96ff, #74d65a); }
.gj__canvas { position: relative; aspect-ratio: 1000 / 460; container-type: inline-size; translate: calc(var(--px) * 6px) calc(var(--py) * 4px); }
.gj__plot { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.gj__grid { fill: none; stroke: rgb(255 255 255 / 0.06); stroke-width: 1; vector-effect: non-scaling-stroke; }
.gj__area { fill: url(#gj-area); }
.gj__line { fill: none; stroke: url(#gj-line); stroke-width: 3.2; stroke-linecap: round; }
.gj__pulse { fill: none; stroke: #fff; stroke-width: 4.5; stroke-linecap: round; stroke-dasharray: 0.03 0.97; stroke-dashoffset: 0.03; opacity: 0; }

.gs { --c: #5b96ff; position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: 0; height: 0; }
.gs:nth-of-type(1) { --c: #8a63e8; }
.gs:nth-of-type(2) { --c: #7474ee; }
.gs:nth-of-type(3) { --c: #5f8cf6; }
.gs:nth-of-type(4) { --c: #5b9ee6; }
.gs:nth-of-type(5) { --c: #6cbf8a; }
.gs:nth-of-type(6) { --c: #86d65e; }
.gs::before { content: ""; position: absolute; left: -0.5px; width: 1px; background: linear-gradient(var(--c), rgb(255 255 255 / 0.1)); }
.gs--up::before { bottom: 0; height: 2.6cqi; background: linear-gradient(rgb(255 255 255 / 0.1), var(--c)); }
.gs--down::before { top: 0; height: 3.6cqi; }
.gs__dot { position: absolute; left: -0.75cqi; top: -0.75cqi; z-index: 1; width: 1.5cqi; height: 1.5cqi; border-radius: 50%; background: #05060a; box-shadow: 0 0 0 0.32cqi var(--c), 0 0 1.8cqi var(--c); }
.gs__ping { position: absolute; left: -2cqi; top: -2cqi; width: 4cqi; height: 4cqi; border: 1px solid var(--c); border-radius: 50%; opacity: 0; }
.gs__card { position: absolute; left: 0; width: 15cqi; padding: 1.1cqi 1.2cqi 1.3cqi; border-radius: 1.3cqi; background: rgb(13 15 24 / 0.9); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1), 0 1.5cqi 3cqi rgb(0 0 0 / 0.45); translate: var(--tx, -50%) 0; }
.gs--up .gs__card { bottom: 2.6cqi; }
.gs--down .gs__card { top: 3.6cqi; }
.gs--end .gs__card { top: 5.6cqi; }
.gs--end::before { height: 5.6cqi; }
.gs__k { display: flex; align-items: baseline; gap: 0.6cqi; font-size: max(0.7rem, 1.35cqi); font-weight: 600; letter-spacing: -0.01em; }
.gs__k b { font: 600 max(0.56rem, 0.95cqi)/1 var(--mono); color: var(--c); }
.gs__card > div { margin-top: 0.9cqi; }

.mq { display: grid; gap: 0.5cqi; }
.mq__bar { display: flex; align-items: center; gap: 0.6cqi; overflow: hidden; padding: 0.55cqi 0.8cqi; border-radius: 99em; background: rgb(255 255 255 / 0.08); font: 500 max(0.52rem, 0.92cqi)/1 var(--mono); white-space: nowrap; }
.mq__bar > i { flex: none; width: 0.9cqi; height: 0.9cqi; border: max(1px, 0.18cqi) solid rgb(255 255 255 / 0.6); border-radius: 50%; }
.mq__typed { display: inline-block; }
.mq__res { display: flex; align-items: center; gap: 0.6cqi; font: 600 max(0.5rem, 0.82cqi)/1 var(--mono); color: rgb(255 255 255 / 0.4); }
.mq__res i { flex: 1; height: 0.55cqi; border-radius: 99em; background: rgb(255 255 255 / 0.12); }
.mq__res em { padding: 0.15cqi 0.5cqi; border-radius: 99em; background: rgb(155 225 93 / 0.15); font-style: normal; }
.mq__res.is-you { color: var(--lime); }
.mq__res.is-you i { background: linear-gradient(90deg, var(--lime), rgb(155 225 93 / 0.15)); }
.ms { display: grid; gap: 0.7cqi; }
.ms__faces { display: flex; padding-left: 0.6cqi; }
.ms__faces i { width: 2.3cqi; aspect-ratio: 1; margin-left: -0.6cqi; border: max(1px, 0.2cqi) solid #0d0f18; border-radius: 50%; background: linear-gradient(135deg, #f6b38e, #d9785f); }
.ms__faces i:nth-child(2) { background: linear-gradient(135deg, #8fb4ff, #3a7ef6); }
.ms__faces i:nth-child(3) { background: linear-gradient(135deg, #b6e59f, #5aa845); }
.ms__faces i:nth-child(4) { background: linear-gradient(135deg, #c9a4ff, #7b4fd8); }
.ms__faces i:nth-child(5) { background: linear-gradient(135deg, #ffd08a, #e59a2f); }
.ms__pops { display: flex; flex-wrap: wrap; gap: 0.4cqi; }
.ms__pops em { padding: 0.35cqi 0.55cqi; border-radius: 99em; background: rgb(255 92 168 / 0.14); font: 600 max(0.5rem, 0.82cqi)/1 var(--mono); font-style: normal; color: #ff8fc2; }
.ms__pops em:nth-child(2) { background: rgb(91 150 255 / 0.14); color: #9cc0ff; }
.ms__pops em:nth-child(3) { background: rgb(155 225 93 / 0.14); color: var(--lime); }
.mc { display: grid; gap: 0.45cqi; }
.mc__tag { justify-self: start; padding: 0.3cqi 0.5cqi; border-radius: 0.3cqi; background: rgb(91 150 255 / 0.16); font: 600 max(0.5rem, 0.8cqi)/1 var(--mono); color: #9cc0ff; }
.mc i { height: 0.55cqi; width: var(--w); border-radius: 99em; background: rgb(255 255 255 / 0.18); }
.mc .mc__h { width: 88%; height: 1cqi; margin-block: 0.2cqi; background: rgb(255 255 255 / 0.78); }
.mau { display: flex; align-items: center; gap: 1.1cqi; }
.mau__rings { position: relative; flex: none; width: 6.4cqi; aspect-ratio: 1; }
.mau__rings i { position: absolute; inset: 0; border: 1px solid rgb(255 255 255 / 0.18); border-radius: 50%; }
.mau__rings i:nth-child(2) { inset: 1.1cqi; }
.mau__rings i:nth-child(3) { inset: 2.2cqi; border-color: rgb(91 150 255 / 0.5); background: rgb(91 150 255 / 0.25); }
.mau__rings b { position: absolute; left: 50%; top: 50%; width: 0.75cqi; height: 0.75cqi; margin: -0.375cqi; border-radius: 50%; background: var(--lime); transform: rotate(var(--a)) translateX(calc(var(--r) * 1.05cqi)); }
.mau__rings b:nth-of-type(2) { background: var(--pink); }
.mau__rings b:nth-of-type(3) { background: #9cc0ff; }
.mau__seg { display: grid; gap: 0.4cqi; }
.mau__seg em { display: flex; align-items: center; gap: 0.45cqi; font: 500 max(0.5rem, 0.82cqi)/1 var(--mono); font-style: normal; color: rgb(255 255 255 / 0.72); white-space: nowrap; }
.mau__seg em::before { content: ""; width: 0.6cqi; height: 0.6cqi; border-radius: 50%; background: var(--lime); }
.mau__seg em:nth-child(2)::before { background: var(--pink); }
.mau__seg em:nth-child(3)::before { background: #9cc0ff; }
.mt { display: grid; gap: 0.55cqi; }
.mt__bars { display: flex; align-items: flex-end; gap: 0.35cqi; height: 4.2cqi; }
.mt__bars i { flex: 1; height: calc(var(--h) * 100%); border-radius: 0.25cqi 0.25cqi 0 0; background: linear-gradient(#74d65a, rgb(116 214 90 / 0.25)); transform-origin: 50% 100%; }
.mt b { font: 600 max(0.52rem, 0.88cqi)/1 var(--mono); color: var(--lime); }
.mv { display: flex; align-items: center; gap: 0.9cqi; }
.mv__check { flex: none; display: grid; place-items: center; width: 3.6cqi; aspect-ratio: 1; border-radius: 50%; background: rgb(116 214 90 / 0.16); box-shadow: 0 0 0 0.25cqi rgb(116 214 90 / 0.35); }
.mv__check svg { width: 55%; fill: none; stroke: var(--lime); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 22; }
.mv__txt { display: grid; gap: 0.35cqi; }
.mv__txt b { font-size: max(0.66rem, 1.15cqi); font-weight: 600; white-space: nowrap; }
.mv__txt small { font: 500 max(0.5rem, 0.82cqi)/1 var(--mono); color: rgb(255 255 255 / 0.5); white-space: nowrap; }

@media (prefers-reduced-motion: no-preference) {
  .js .gj__line { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
  .js .gj__area, .js .gs__card { opacity: 0; }
  .js .gs__card { transform: translate3d(0, 1cqi, 0); }
  .is-loaded .gj__line { stroke-dashoffset: 0; transition: stroke-dashoffset 2.2s var(--ease-in-out) 0.9s; }
  .is-loaded .gj__area { opacity: 1; transition: opacity 1.6s var(--ease-soft) 1.8s; }
  .is-loaded .gs__card { opacity: 1; transform: none; transition: opacity 0.7s var(--ease-soft), transform 1s var(--ease-out); transition-delay: calc(1.1s + var(--k) * 0.3s); }
  .gj__pulse { animation: gj-run 6s var(--ease-in-out) infinite 3.2s; }
  .gj__pulse--late { animation-delay: 6.2s; }
  .gs__ping { animation: gj-ping 2.6s var(--ease-out) infinite; }
  .mq__typed { animation: gj-type 6s steps(16) infinite; }
  .ms__pops em { animation: gj-pop 3.6s var(--ease-out) infinite; animation-delay: calc(var(--j) * 0.35s); }
  .mau__rings { animation: gj-spin 18s linear infinite; }
  .mt__bars i { animation: gj-grow 4s var(--ease-out) infinite; }
  .mt__bars i:nth-child(odd) { animation-delay: 0.15s; }
  .mv__check svg { animation: gj-check 4s var(--ease-out) infinite; }
  .d-hero.is-paused .gj *, .d-hero.is-paused .gj *::before { animation-play-state: paused; }
  @keyframes gj-run { 0% { stroke-dashoffset: 0.03; opacity: 1; } 55% { stroke-dashoffset: -0.97; opacity: 1; } 55.1%, 100% { opacity: 0; } }
  @keyframes gj-ping { from { transform: scale(0.4); opacity: 0.9; } to { transform: scale(1.8); opacity: 0; } }
  @keyframes gj-type { 0% { clip-path: inset(0 100% 0 0); } 45%, 90% { clip-path: inset(0); } 100% { clip-path: inset(0 100% 0 0); } }
  @keyframes gj-pop { 0% { transform: translate3d(0, 0.4cqi, 0) scale(0.8); opacity: 0; } 12%, 70% { transform: none; opacity: 1; } 100% { transform: translate3d(0, -0.4cqi, 0); opacity: 0.35; } }
  @keyframes gj-spin { to { rotate: 360deg; } }
  @keyframes gj-grow { 0% { transform: scaleY(0.2); } 40%, 100% { transform: none; } }
  @keyframes gj-check { 0% { stroke-dashoffset: 22; } 30%, 100% { stroke-dashoffset: 0; } }
}

/* ==========================================================================
   Intro — what we stop counting, what we count instead
   ========================================================================== */
.shift { max-width: 70rem; margin: clamp(3.5rem, 6.5vw, 7rem) auto 0; border-top: 1px solid var(--black); text-align: left; }
.shift__row { display: grid; grid-template-columns: minmax(0, 0.8fr) clamp(3rem, 7vw, 7rem) minmax(0, 1.2fr) 8.5rem; align-items: center; gap: 1rem clamp(1rem, 2.5vw, 2.5rem); padding-block: clamp(1rem, 2vw, 1.75rem); border-bottom: 1px solid var(--border-light); }
.shift__from { position: relative; justify-self: start; font-size: clamp(1.4rem, 0.9rem + 1.8vw, 3rem); font-weight: 500; letter-spacing: -0.04em; text-decoration: none; color: #a6a6a6; }
.shift__from::after { content: ""; position: absolute; left: -3%; right: -3%; top: 54%; height: 0.07em; background: #a6a6a6; transform-origin: 0 50%; }
.shift__arrow { position: relative; height: 1px; background: var(--black); transform-origin: 0 50%; }
.shift__arrow::after { content: ""; position: absolute; right: 0; top: -0.3rem; width: 0.6rem; height: 0.6rem; border-top: 1px solid var(--black); border-right: 1px solid var(--black); rotate: 45deg; }
.shift__to { font-size: clamp(1.6rem, 1rem + 2.2vw, 3.6rem); font-weight: 600; line-height: 1.05; letter-spacing: -0.045em; }
.shift__via { justify-self: end; padding: 0.35rem 0.65rem; border: 1px solid rgb(58 126 246 / 0.3); border-radius: 99em; font: 500 0.76rem/1 var(--mono); color: var(--blue); white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .js .shift__row .shift__from::after, .js .shift__row .shift__arrow { transform: scaleX(0); transition: transform 0.6s var(--ease-out); transition-delay: calc(var(--i) * var(--stagger) + 0.45s); }
  .js .shift__row .shift__arrow { transition-delay: calc(var(--i) * var(--stagger) + 0.75s); }
  .js .shift__row.is-in .shift__arrow { transform: none; }
  .js .shift__row.is-in .shift__from::after { transform: none; }
}

/* ==========================================================================
   SEO — a search box whose suggestions are the service
   ========================================================================== */
.seo2 { background: var(--black); color: var(--white); padding-block: clamp(5rem, 9vw, 10rem); }
.seo2__grid { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); align-items: start; gap: 2rem clamp(2rem, 4vw, 5rem); margin-top: clamp(3rem, 5.5vw, 6rem); }
.qs { overflow: hidden; border-radius: 1.4rem; background: #fff; color: #202124; box-shadow: 0 1.5rem 3rem rgb(0 0 0 / 0.4); }
.qs__box { display: flex; align-items: center; gap: 0.9rem; padding: 1rem 1.1rem 1rem 1.3rem; border-bottom: 1px solid #e8eaed; }
.qs__icon { position: relative; flex: none; width: 1.05rem; height: 1.05rem; border: 2px solid #5f6368; border-radius: 50%; }
.qs__icon::after, .qs__mag::after { content: ""; position: absolute; right: -0.32rem; bottom: -0.28rem; width: 0.4rem; height: 2px; border-radius: 99em; background: currentColor; rotate: 45deg; }
.qs__icon::after { color: #5f6368; }
.qs__q { flex: 1; min-width: 0; overflow: hidden; font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem); white-space: nowrap; }
.qs__text { display: none; overflow: hidden; vertical-align: bottom; }
.seo2:not([data-active]) .qs__text:first-child,
.seo2[data-active="0"] .qs__text:nth-child(1),
.seo2[data-active="1"] .qs__text:nth-child(2),
.seo2[data-active="2"] .qs__text:nth-child(3),
.seo2[data-active="3"] .qs__text:nth-child(4),
.seo2[data-active="4"] .qs__text:nth-child(5),
.seo2[data-active="5"] .qs__text:nth-child(6),
.seo2[data-active="6"] .qs__text:nth-child(7) { display: inline-block; }
.qs__q::after { content: ""; display: inline-block; width: 2px; height: 1.15em; margin-left: 1px; background: var(--blue); vertical-align: bottom; }
.qs__box kbd { padding: 0.3rem 0.5rem; border-radius: 0.4rem; background: #f1f3f4; font: 500 0.75rem/1 var(--mono); color: #5f6368; }
.qs__list { padding-block: 0.4rem 0.8rem; }
.qs__opt { width: 100%; display: grid; grid-template-columns: 1.1rem minmax(0, 1fr) auto; align-items: center; gap: 0.9rem; padding: 0.72rem 1.3rem; text-align: left; transition: background-color 0.2s; }
.qs__mag { position: relative; width: 0.85rem; height: 0.85rem; border: 1.5px solid #9aa0a6; border-radius: 50%; color: #9aa0a6; }
.qs__name { font-size: clamp(1rem, 0.9rem + 0.35vw, 1.2rem); font-weight: 500; }
.qs__hint { font-size: 0.78rem; color: #70757a; white-space: nowrap; }
.qs__opt:hover { background: #f1f3f4; }
.qs__opt[aria-selected="true"] { background: #e8f0fe; }
.qs__opt[aria-selected="true"] .qs__name { font-weight: 600; color: var(--blue); }
.qs__opt[aria-selected="true"] .qs__mag { border-color: var(--blue); color: var(--blue); }
.qs__opt:focus-visible { outline-offset: -3px; }

.seo2__panels { min-width: 0; }
.seo2__panel { display: grid; gap: 1.5rem; }
.seo2__viz { display: grid; place-items: center; min-height: clamp(20rem, 27vw, 24rem); padding: clamp(1rem, 2.2vw, 2rem); border: 1px solid rgb(255 255 255 / 0.1); border-radius: clamp(1rem, 1.4vw, 1.4rem); background: #0b0c12 radial-gradient(rgb(255 255 255 / 0.05) 1px, transparent 1.5px) 0 0 / 20px 20px; }
.seo2__viz > * { width: 100%; }
.seo2__copy { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1fr); gap: 0.9rem 2rem; align-items: start; }
.seo2__copy h3 { font-size: clamp(1.6rem, 1rem + 1.6vw, 2.6rem); font-weight: 700; line-height: 1; letter-spacing: -0.045em; }
.seo2__copy p { grid-column: 2; grid-row: 1 / span 2; font-size: 1rem; line-height: 1.5; color: rgb(255 255 255 / 0.7); }
.seo2__facts { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.seo2__facts li { padding: 0.4rem 0.7rem; border: 1px solid rgb(255 255 255 / 0.16); border-radius: 99em; font: 500 0.72rem/1 var(--mono); color: rgb(255 255 255 / 0.72); }
.viz__cap { margin-bottom: 0.9rem; font: 600 var(--fs-micro)/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: rgb(255 255 255 / 0.45); }
.viz__stats { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid rgb(255 255 255 / 0.1); font-size: 0.8rem; color: rgb(255 255 255 / 0.55); }
.viz__stats b { margin-right: 0.4rem; font: 600 1rem/1 var(--mono); color: var(--white); }

/* technical */
.crawl__tree { display: grid; gap: 0.15rem; font: 500 0.85rem/1 var(--mono); }
.crawl__tree li { position: relative; display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0.7rem 0.5rem calc(0.7rem + var(--lv) * 1.5rem); border-radius: 0.45rem; }
.crawl__tree li::before { content: ""; position: absolute; left: calc(var(--lv) * 1.5rem - 0.55rem); top: 0; bottom: 50%; width: 0.55rem; border-left: 1px solid rgb(255 255 255 / 0.25); border-bottom: 1px solid rgb(255 255 255 / 0.25); opacity: min(var(--lv), 1); }
.crawl__tree code { color: rgb(255 255 255 / 0.85); }
.crawl__tree .is-fixed { background: rgb(116 214 90 / 0.07); }
.st { margin-left: auto; padding: 0.22rem 0.45rem; border-radius: 0.3rem; font-size: 0.72rem; font-style: normal; font-weight: 700; }
.st--ok { background: rgb(116 214 90 / 0.16); color: var(--green); }
.st--warn { background: rgb(245 180 60 / 0.16); color: var(--amber); text-decoration: line-through; }
.st--err { background: rgb(255 122 122 / 0.16); color: #ff8a8a; text-decoration: line-through; }
.crawl__fix { font-size: 0.72rem; color: var(--green); white-space: nowrap; }
.crawl__fix::before { content: "→ "; }

/* on-page */
.snip { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); align-items: center; gap: 1.5rem 2.5rem; padding-left: 2rem; }
.snip__res { display: grid; gap: 0.35rem; padding: 1.1rem 1.2rem; border-radius: 0.9rem; background: #fff; color: #202124; }
.snip__site { display: flex; align-items: center; gap: 0.55rem; }
.snip__site > i { width: 1.5rem; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(135deg, var(--purple), var(--blue)); }
.snip__site > span { display: grid; }
.snip__site b { font-size: 0.8rem; font-weight: 500; }
.snip__site small { font-size: 0.72rem; color: #4d5156; }
.snip__title { position: relative; margin-top: 0.2rem; font-size: clamp(1rem, 0.9rem + 0.3vw, 1.2rem); font-weight: 400; line-height: 1.3; color: #1a0dab; }
.snip__rate { position: relative; font-size: 0.78rem; color: #70757a; }
.snip__rate em { font-style: normal; color: #f5a623; }
.snip__desc { position: relative; font-size: 0.82rem; line-height: 1.5; color: #4d5156; }
.snip__pin, .snip__notes li::before { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--pink); font: 700 0.68rem/1 var(--mono); font-style: normal; color: #fff; }
.snip__pin { position: absolute; left: -3.2rem; top: 0.15rem; }
.snip__notes { display: grid; gap: 0.9rem; counter-reset: note; }
.snip__notes li { position: relative; display: grid; gap: 0.25rem; padding-left: 1.9rem; font-size: 0.8rem; line-height: 1.35; color: rgb(255 255 255 / 0.6); }
.snip__notes li::before { content: counter(note); counter-increment: note; position: absolute; left: 0; top: 0; }
.snip__notes b { font-size: 0.92rem; font-weight: 600; color: var(--white); }

/* content */
.tc { position: relative; aspect-ratio: 16 / 10; }
.tc__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.tc__link { fill: none; stroke: rgb(255 255 255 / 0.18); stroke-width: 1; vector-effect: non-scaling-stroke; }
.tc__flow { fill: none; stroke: var(--lime); stroke-width: 0.7; stroke-linecap: round; stroke-dasharray: 0.14 0.86; stroke-dashoffset: 0.14; opacity: 0; }
.tc__pillar { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; gap: 0.3rem; max-width: 12rem; padding: 0.9rem 1.1rem; border-radius: 1rem; background: linear-gradient(135deg, var(--purple), var(--blue)); font-size: 0.95rem; font-weight: 600; line-height: 1.2; text-align: center; box-shadow: 0 0 0 0.5rem rgb(58 126 246 / 0.15); }
.tc__pillar small { font: 600 0.62rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: rgb(255 255 255 / 0.75); }
.tc__node { position: absolute; left: var(--nx); top: var(--ny); translate: -50% -50%; padding: 0.45rem 0.75rem; border-radius: 99em; background: #161824; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16); font-size: 0.78rem; white-space: nowrap; }

/* keywords */
.kw { display: grid; gap: 0.1rem; }
.kw__row { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.95fr) minmax(0, 0.9fr) 4.5rem; align-items: center; gap: 0.75rem; padding: 0.6rem 0.75rem; border-radius: 0.5rem; font-size: 0.85rem; }
.kw__row--head { padding-block: 0.3rem 0.5rem; font: 600 0.64rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: rgb(255 255 255 / 0.4); }
.kw__row > span:first-child { overflow: hidden; font: 500 0.8rem/1.2 var(--mono); white-space: nowrap; text-overflow: ellipsis; }
.kw__row.is-pick { background: rgb(155 225 93 / 0.07); box-shadow: inset 2px 0 0 var(--lime); }
.in { justify-self: start; padding: 0.22rem 0.5rem; border-radius: 99em; font-size: 0.7rem; font-style: normal; font-weight: 600; white-space: nowrap; }
.in--com { background: rgb(91 150 255 / 0.16); color: #9cc0ff; }
.in--info { background: rgb(255 255 255 / 0.08); color: rgb(255 255 255 / 0.6); }
.in--buy { background: rgb(155 225 93 / 0.16); color: var(--lime); }
.kw__vol { display: flex; align-items: center; gap: 0.5rem; font: 500 0.76rem/1 var(--mono); }
.kw__vol i { width: calc(var(--v) * 3.5rem); height: 0.35rem; border-radius: 99em; background: var(--blue-bright); }
.kw__kd { width: 3.4rem; height: 0.55rem; background: linear-gradient(90deg, var(--amber) calc(var(--d) * 20%), rgb(255 255 255 / 0.14) 0); -webkit-mask: repeating-linear-gradient(90deg, #000 0 0.55rem, transparent 0.55rem 0.7rem); mask: repeating-linear-gradient(90deg, #000 0 0.55rem, transparent 0.55rem 0.7rem); }
.kw__kd i { display: none; }

/* local */
.local { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.local__map { position: relative; min-height: 15rem; overflow: hidden; border-radius: 0.9rem; background-color: #e8eee9; background-image: linear-gradient(120deg, transparent 44%, #fff 44% 47%, transparent 47%), linear-gradient(30deg, transparent 58%, #fff 58% 60.5%, transparent 60.5%), linear-gradient(transparent 62%, #cfe0ea 62% 76%, transparent 76%), radial-gradient(circle at 78% 18%, #d3e6cc 0 16%, transparent 16.5%); }
.local__pin { position: absolute; left: var(--mx); top: var(--my); isolation: isolate; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; translate: -50% -115%; font: 700 0.72rem/1 var(--mono); font-style: normal; color: #fff; }
.local__pin::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50% 50% 50% 0; background: #5f6368; rotate: -45deg; }
.local__pin.is-you::before { background: #e0589a; }
.local__pin.is-you::after { content: ""; position: absolute; left: 50%; bottom: -0.9rem; width: 1.6rem; height: 0.5rem; margin-left: -0.8rem; border-radius: 50%; background: rgb(224 88 154 / 0.35); z-index: -2; }
.local__me { position: absolute; left: var(--mx); top: var(--my); width: 0.9rem; height: 0.9rem; border: 2px solid #fff; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 0.35rem rgb(58 126 246 / 0.25); }
.local__list { display: grid; align-content: center; gap: 0.5rem; }
.local__list li { display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 0.8rem; border-radius: 0.7rem; background: rgb(255 255 255 / 0.04); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); }
.local__list b { flex: none; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: #5f6368; font: 700 0.72rem/1 var(--mono); }
.local__list span { display: grid; gap: 0.2rem; min-width: 0; }
.local__list strong { font-size: 0.92rem; font-weight: 600; }
.local__list small { font-size: 0.74rem; color: rgb(255 255 255 / 0.55); }
.local__list .is-you { background: rgb(224 88 154 / 0.1); box-shadow: inset 0 0 0 1px rgb(224 88 154 / 0.45); }
.local__list .is-you b { background: #e0589a; }

/* performance */
.cwv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); }
.cwv__m { display: grid; align-content: start; gap: 0.6rem; }
.cwv__m small { min-height: 2.4em; font-size: 0.75rem; line-height: 1.2; color: rgb(255 255 255 / 0.55); }
.cwv__m b { font-size: clamp(2rem, 1.2rem + 2vw, 3.2rem); font-weight: 700; line-height: 1; letter-spacing: -0.05em; color: var(--green); }
.cwv__m b em { font-size: 0.45em; font-style: normal; letter-spacing: 0; color: rgb(255 255 255 / 0.6); }
.cwv__scale { position: relative; display: flex; gap: 3px; height: 0.45rem; margin-top: 0.4rem; }
.cwv__scale i { border-radius: 99em; }
.cwv__scale i:nth-child(1) { flex: 5; background: var(--green); }
.cwv__scale i:nth-child(2) { flex: 3; background: var(--amber); }
.cwv__scale i:nth-child(3) { flex: 3; background: #ff7a7a; }
.cwv__scale u, .cwv__scale s { position: absolute; top: 50%; border-radius: 50%; }
.cwv__scale u { left: var(--at); width: 0.95rem; height: 0.95rem; margin: -0.475rem; background: var(--white); box-shadow: 0 0 0 3px #0b0c12; }
.cwv__scale s { left: var(--was); width: 0.7rem; height: 0.7rem; margin: -0.35rem; border: 2px solid rgb(255 255 255 / 0.55); background: #0b0c12; }
.cwv__was { font: 500 0.72rem/1 var(--mono); color: rgb(255 255 255 / 0.45); }

/* analytics */
.climb__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; font-size: 0.9rem; color: rgb(255 255 255 / 0.6); }
.climb__head b { font: 500 0.9rem/1.2 var(--mono); color: var(--white); }
.climb__head s { color: rgb(255 255 255 / 0.4); }
.climb__head strong { font-size: 1.5rem; color: var(--lime); }
.climb__plot { position: relative; height: clamp(10rem, 15vw, 13rem); margin-top: 1rem; border-left: 1px solid rgb(255 255 255 / 0.12); border-bottom: 1px solid rgb(255 255 255 / 0.12); }
.climb__band { position: absolute; left: 0; right: 0; top: 0; height: 25%; display: flex; justify-content: flex-start; padding: 0.35rem 0.5rem; border-bottom: 1px dashed rgb(155 225 93 / 0.45); background: rgb(155 225 93 / 0.08); font: 600 0.64rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--lime); }
.climb__plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.climb__line { fill: none; stroke: var(--lime); stroke-width: 2.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.climb__dot { position: absolute; left: 100%; top: 7.5%; width: 0.8rem; height: 0.8rem; margin: -0.4rem; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 0.35rem rgb(155 225 93 / 0.25); }
.climb__axis { display: flex; justify-content: space-between; margin-top: 0.5rem; font: 500 0.7rem/1 var(--mono); color: rgb(255 255 255 / 0.4); }

@media (prefers-reduced-motion: no-preference) {
  .seo2[data-active] .qs__text { animation: qs-type 0.8s steps(18) both; }
  .qs__q::after { animation: qs-caret 1s steps(1) infinite; }
  .seo2__panel.is-active .crawl__tree li,
  .seo2__panel.is-active .kw__row,
  .seo2__panel.is-active .local__list li,
  .seo2__panel.is-active .snip__notes li,
  .seo2__panel.is-active .tc__node { animation: dm-up 0.5s var(--ease-out) both; }
  .seo2__panel.is-active :is(.crawl__tree li, .kw__row, .local__list li, .snip__notes li, .tc__node):nth-child(2) { animation-delay: 0.06s; }
  .seo2__panel.is-active :is(.crawl__tree li, .kw__row, .local__list li, .snip__notes li, .tc__node):nth-child(3) { animation-delay: 0.12s; }
  .seo2__panel.is-active :is(.crawl__tree li, .kw__row, .tc__node):nth-child(4) { animation-delay: 0.18s; }
  .seo2__panel.is-active :is(.crawl__tree li, .kw__row, .tc__node):nth-child(5) { animation-delay: 0.24s; }
  .seo2__panel.is-active :is(.crawl__tree li, .kw__row, .tc__node):nth-child(6) { animation-delay: 0.3s; }
  .seo2__panel.is-active :is(.crawl__tree li, .tc__node):nth-child(7) { animation-delay: 0.36s; }
  .seo2__panel.is-active .tc__flow { animation: dm-flow 2.4s linear infinite; animation-delay: calc(var(--k) * 0.4s); }
  .seo2__panel.is-active .cwv__scale u { animation: cwv-move 1.2s var(--ease-out) both 0.2s; }
  .seo2__panel.is-active .climb__plot svg { animation: dm-wipe 1.4s var(--ease-in-out) both 0.1s; }
  .seo2__panel.is-active .climb__dot { animation: dm-pop 0.5s var(--ease-out) both 1.3s; }
  @keyframes qs-type { from { max-width: 0; } to { max-width: 24em; } }
  @keyframes qs-caret { 50% { opacity: 0; } }
  @keyframes dm-up { from { opacity: 0; transform: translate3d(0, 0.6rem, 0); } }
  @keyframes dm-flow { 0% { stroke-dashoffset: 0.14; opacity: 1; } 60% { stroke-dashoffset: -0.86; opacity: 1; } 60.1%, 100% { opacity: 0; } }
  @keyframes cwv-move { from { left: var(--was); } }
  @keyframes dm-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(-10% -2% -10% 0); } }
  @keyframes dm-pop { from { opacity: 0; transform: scale(0); } }
}

/* ==========================================================================
   Social (SMO) — an orbiting ecosystem
   ========================================================================== */
.eco { background: var(--off-white); color: var(--black); padding-block: clamp(5rem, 9vw, 10rem); overflow-x: clip; }
.eco__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; gap: 3rem clamp(2rem, 5vw, 6rem); margin-top: clamp(3rem, 5.5vw, 6rem); }
.eco__orbit { position: relative; justify-self: center; width: 100%; max-width: 42rem; margin: 0; aspect-ratio: 1; }
.eco__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.eco__ring { fill: none; stroke: rgb(0 0 0 / 0.14); stroke-width: 1.2; stroke-dasharray: 3 5; transition: stroke 0.35s, stroke-width 0.35s; }
.eco__spin { transform-box: view-box; transform-origin: 50% 50%; }
.eco__spin--1 circle { fill: var(--blue-bright); }
.eco__spin--1 .is-hot { fill: var(--purple); }
.eco__spark circle { fill: var(--pink); }
.eco__spark--b circle { fill: var(--blue); }
.eco__spark--a circle { fill: var(--amber); }
.eco__spark .eco__halo { fill-opacity: 0.16; transform-box: fill-box; transform-origin: center; }
.eco__club path { fill: rgb(116 214 90 / 0.2); stroke: var(--grow); stroke-width: 1.2; }
.eco__club circle { fill: var(--grow); }
.eco__exit { fill: none; stroke: rgb(0 0 0 / 0.25); stroke-width: 1.5; stroke-dasharray: 4 5; transition: stroke 0.35s; }
.eco__exit-flow { fill: none; stroke: var(--grow); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 0.14 0.86; stroke-dashoffset: 0.14; opacity: 0; }
.eco__goal { fill: var(--grow); }
.eco__goal-check { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.eco__core { position: absolute; left: 50%; top: 50%; isolation: isolate; display: grid; place-items: end center; width: 22%; aspect-ratio: 1; padding-bottom: 17%; overflow: hidden; border-radius: 50%; translate: -50% -50%; background: var(--black); color: var(--white); box-shadow: 0 0 0 0.6rem rgb(0 0 0 / 0.06), 0 1.5rem 3rem -1rem rgb(0 0 0 / 0.35); transition: box-shadow 0.35s; }
.eco__core b { position: absolute; left: 0; right: 0; bottom: 15%; font-size: clamp(0.72rem, 0.55rem + 0.5vw, 1.05rem); font-weight: 600; text-align: center; }
.eco__tile { position: absolute; top: 16%; left: 35%; z-index: -1; width: 30%; aspect-ratio: 4 / 5; border-radius: 0.35rem; background: linear-gradient(135deg, var(--purple), var(--blue)); }
.eco__tile:nth-child(1) { left: 22%; rotate: -14deg; opacity: 0.55; }
.eco__tile:nth-child(3) { left: 48%; rotate: 14deg; background: linear-gradient(135deg, var(--lime), var(--grow)); opacity: 0.8; }
.eco__tag { position: absolute; left: var(--tx); top: var(--ty); translate: -50% -50%; padding: 0.35rem 0.7rem; border-radius: 99em; background: var(--white); box-shadow: 0 0.25rem 1rem rgb(0 0 0 / 0.1); font-size: 0.8rem; font-weight: 600; white-space: nowrap; transition: background-color 0.35s, color 0.35s; }
.eco__tag--1 { --tx: 50%; --ty: 32.5%; }
.eco__tag--2 { --tx: 23.4%; --ty: 40.3%; }
.eco__tag--3 { --tx: 24.8%; --ty: 80%; }
.eco__tag--4 { --tx: 88%; --ty: 5%; }
.eco__steps { border-top: 1px solid var(--black); }
.eco__step { position: relative; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: clamp(0.9rem, 1.6vw, 1.3rem) 0.5rem; border-bottom: 1px solid var(--border-light); transition: background-color 0.3s; }
.eco__n { font: 600 var(--fs-small)/1 var(--mono); color: #8a8a8a; transition: color 0.3s; }
.eco__step h3 { font-size: clamp(1.3rem, 0.9rem + 1vw, 2rem); font-weight: 600; letter-spacing: -0.035em; }
.eco__step p { max-width: 28em; margin-top: 0.3rem; font-size: 0.92rem; line-height: 1.45; color: #5e5e5e; }
.eco__stat { display: grid; justify-items: end; font: 600 clamp(1.1rem, 0.9rem + 0.5vw, 1.5rem)/1 var(--mono); letter-spacing: -0.02em; }
.eco__stat small { margin-top: 0.35rem; font: 500 0.7rem/1 var(--mono); letter-spacing: 0; color: #8a8a8a; }
@media (hover: hover) {
  .eco__step:hover { background: linear-gradient(90deg, rgb(58 126 246 / 0.07), transparent 70%); }
  .eco__step:hover .eco__n { color: var(--blue); }
  .eco__grid:has(.eco__step:nth-child(1):hover) .eco__core { box-shadow: 0 0 0 0.75rem rgb(58 126 246 / 0.28), 0 1.5rem 3rem -1rem rgb(0 0 0 / 0.35); }
  .eco__grid:has(.eco__step:nth-child(2):hover) .eco__ring--1,
  .eco__grid:has(.eco__step:nth-child(3):hover) .eco__ring--2,
  .eco__grid:has(.eco__step:nth-child(4):hover) .eco__ring--3 { stroke: var(--blue); stroke-width: 2.5; stroke-dasharray: none; }
  .eco__grid:has(.eco__step:nth-child(5):hover) .eco__exit { stroke: var(--grow); }
  .eco__grid:has(.eco__step:nth-child(2):hover) .eco__tag--1,
  .eco__grid:has(.eco__step:nth-child(3):hover) .eco__tag--2,
  .eco__grid:has(.eco__step:nth-child(4):hover) .eco__tag--3,
  .eco__grid:has(.eco__step:nth-child(5):hover) .eco__tag--4 { background: var(--black); color: var(--white); }
}
@media (prefers-reduced-motion: no-preference) {
  .eco__spin--1 { animation: eco-spin 70s linear infinite; }
  .eco__spin--2 { animation: eco-spin 110s linear infinite reverse; }
  .eco__spin--3 { animation: eco-spin 160s linear infinite; }
  .eco__spark .eco__halo { animation: eco-halo 2.8s ease-in-out infinite; }
  .eco__spark:nth-child(even) .eco__halo { animation-delay: -1.4s; }
  .eco__exit-flow { animation: dm-flow 3s linear infinite; }
  .eco__exit-flow--b { animation-delay: 1.5s; }
  .eco.is-paused :is(.eco__spin, .eco__halo, .eco__exit-flow) { animation-play-state: paused; }
  @keyframes eco-spin { to { rotate: 360deg; } }
  @keyframes eco-halo { 50% { transform: scale(1.5); fill-opacity: 0.05; } }
}

/* ==========================================================================
   SMM — five steps a month, looping back
   ========================================================================== */
.smm { background: var(--black); color: var(--white); padding-block: clamp(5rem, 9vw, 10rem); }
.rhythm { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2.5rem clamp(1rem, 2vw, 2rem); margin-top: clamp(3rem, 5.5vw, 6rem); }
.rh { display: grid; align-content: start; }
.rh__viz { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3.3; margin-bottom: 1.25rem; padding: 1rem; overflow: hidden; border-radius: 1rem; background: #0d0e14; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); }
.rh__n { font: 600 var(--fs-small)/1 var(--mono); color: var(--lime); }
.rh__name { margin-top: 0.6rem; font-size: clamp(1.35rem, 0.9rem + 1vw, 2rem); font-weight: 600; letter-spacing: -0.04em; }
.rh__text { margin-top: 0.5rem; font-size: 0.92rem; line-height: 1.45; color: rgb(255 255 255 / 0.6); }
.rh__out { justify-self: start; margin-top: 1rem; padding: 0.35rem 0.7rem; border: 1px solid rgb(255 255 255 / 0.18); border-radius: 99em; font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(255 255 255 / 0.75); }

.rh__viz--strategy { grid-template-rows: minmax(0, 1fr) auto; gap: 0.6rem; }
.rh__target { position: relative; height: 100%; aspect-ratio: 1; }
.rh__target i { position: absolute; inset: 0; border: 1px solid rgb(255 255 255 / 0.2); border-radius: 50%; }
.rh__target i:nth-child(2) { inset: 18%; }
.rh__target i:nth-child(3) { inset: 36%; border-color: rgb(91 150 255 / 0.5); background: rgb(58 126 246 / 0.25); }
.rh__target b { position: absolute; left: 50%; top: 50%; width: 14%; aspect-ratio: 1; border-radius: 50%; translate: -50% -50%; background: var(--lime); box-shadow: 0 0 0 0.3rem rgb(155 225 93 / 0.25); }
.rh__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem; }
.rh__chips em { padding: 0.3rem 0.45rem; border-radius: 99em; background: rgb(255 255 255 / 0.08); font: 500 0.64rem/1 var(--mono); font-style: normal; color: rgb(255 255 255 / 0.75); }
.rh__post { position: absolute; top: 16%; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; gap: 0.3rem; width: 36%; aspect-ratio: 4 / 5; padding: 0.35rem; border-radius: 0.55rem; background: #fff; box-shadow: 0 0.75rem 1.5rem rgb(0 0 0 / 0.45); }
.rh__post:nth-child(1) { left: 11%; rotate: -9deg; }
.rh__post:nth-child(2) { top: 10%; left: 32%; z-index: 2; }
.rh__post:nth-child(3) { left: 53%; rotate: 9deg; }
.rh__post > i { position: relative; border-radius: 0.3rem; }
.rh__post b { height: 0.28rem; border-radius: 99em; background: rgb(0 0 0 / 0.15); }
.rh__post b:last-child { width: 60%; }
.im-a { background: linear-gradient(135deg, #ff9f7a, #6b79d8); }
.im-b { background: linear-gradient(160deg, #6b3fd4, #3a7ef6); }
.im-c { background: linear-gradient(135deg, #9be15d, #3f8f55); }
.im-b u { position: absolute; left: 50%; top: 50%; width: 30%; aspect-ratio: 1; border-radius: 50%; translate: -50% -50%; background: rgb(255 255 255 / 0.9); }
.im-b u::after { content: ""; position: absolute; inset: 30% 26% 30% 38%; background: var(--purple); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.rh__viz--publish { grid-template-rows: minmax(0, 1fr) auto; gap: 0.6rem; }
.rh__cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); align-content: center; gap: 0.3rem; width: 100%; }
.rh__cal em { font: 600 0.58rem/1 var(--mono); font-style: normal; text-align: center; color: rgb(255 255 255 / 0.4); }
.rh__cal i { position: relative; aspect-ratio: 1; border-radius: 0.25rem; background: rgb(255 255 255 / 0.07); }
.rh__cal .is-p::after { content: ""; position: absolute; inset: 24%; border-radius: 50%; background: var(--blue-bright); }
.rh__clock { justify-self: center; padding: 0.3rem 0.55rem; border-radius: 99em; background: rgb(155 225 93 / 0.12); font: 500 0.68rem/1 var(--mono); color: var(--lime); }
.rh__viz--engage { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 0.45rem; }
.rh__bub { max-width: 88%; padding: 0.45rem 0.7rem; border-radius: 0.9rem 0.9rem 0.9rem 0.25rem; background: rgb(255 255 255 / 0.1); font-size: 0.72rem; line-height: 1.3; }
.rh__bub--you { align-self: flex-end; border-radius: 0.9rem 0.9rem 0.25rem 0.9rem; background: linear-gradient(135deg, var(--purple), var(--blue)); }
.rh__viz--measure { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0.8rem; }
.rh__bars { display: flex; align-items: flex-end; gap: 0.35rem; height: clamp(3.5rem, 6vw, 5.5rem); }
.rh__bars i { flex: 1; height: calc(var(--h) * 100%); border-radius: 0.25rem 0.25rem 0 0; background: linear-gradient(var(--blue-bright), rgb(91 150 255 / 0.2)); transform-origin: 50% 100%; }
.rh__bars i:last-child { background: linear-gradient(var(--lime), rgb(155 225 93 / 0.2)); }
.rh__delta { display: grid; font-size: 1.6rem; font-weight: 700; line-height: 1; letter-spacing: -0.04em; color: var(--lime); }
.rh__delta small { margin-top: 0.25rem; font: 500 0.64rem/1 var(--mono); letter-spacing: 0; color: rgb(255 255 255 / 0.5); }
.rhythm__loop { position: relative; height: 3.5rem; margin-top: 1.5rem; }
.rhythm__loop svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rhythm__arc, .rhythm__head { fill: none; stroke: rgb(255 255 255 / 0.25); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.rhythm__arc { stroke-dasharray: 5 6; }
.rhythm__flow { fill: none; stroke: var(--lime); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0.05 0.95; stroke-dashoffset: 0.05; opacity: 0; }
.rhythm__loop span { position: absolute; left: 50%; bottom: -0.45rem; padding-inline: 0.8rem; translate: -50% 0; background: var(--black); font: 500 0.74rem/1 var(--mono); color: rgb(255 255 255 / 0.55); }
@media (prefers-reduced-motion: no-preference) {
  .rhythm__flow { animation: dm-flow 5s var(--ease-in-out) infinite; }
  .rh.is-in .rh__bars i { animation: gj-grow 1.2s var(--ease-out) both 0.4s; }
  .rh.is-in .rh__bub { animation: dm-up 0.5s var(--ease-out) both; animation-delay: calc(var(--j) * 0.35s + 0.5s); }
  .rh.is-in .rh__cal .is-p::after { animation: dm-pop 0.4s var(--ease-out) both 0.6s; }
  .smm.is-paused .rhythm__flow { animation-play-state: paused; }
}

/* ==========================================================================
   Growth funnel — people drop out at every stage; some make it through
   ========================================================================== */
.fun { background: var(--off-white); color: var(--black); padding-block: clamp(5rem, 9vw, 10rem); }
.fun__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 2rem clamp(2rem, 4vw, 4rem); margin-top: clamp(3rem, 5.5vw, 6rem); }
.fun__vis { margin: 0; }
.fun__canvas { position: relative; aspect-ratio: 600 / 540; container-type: inline-size; }
.fun__shape { position: absolute; inset: 0; width: 100%; height: 100%; }
.fun__band { fill: rgb(58 126 246 / calc(0.07 + var(--k) * 0.035)); stroke: rgb(58 126 246 / 0.35); stroke-width: 1; vector-effect: non-scaling-stroke; }
.fun__band:last-child { fill: rgb(116 214 90 / 0.35); stroke: var(--grow); }
.fun__drops { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.fun__drop { position: absolute; left: 50%; top: 0; width: 1.4cqi; height: 1.4cqi; margin: -0.7cqi; border-radius: 50%; background: var(--blue); opacity: 0; }
.fun__drop--through { width: 1.9cqi; height: 1.9cqi; margin: -0.95cqi; background: var(--grow); box-shadow: 0 0 0 0.5cqi rgb(116 214 90 / 0.25); }
.fun__stages { display: grid; grid-template-rows: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--black); }
.fun__st { position: relative; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; align-items: center; gap: 1rem; border-bottom: 1px solid var(--border-light); }
.fun__n { font: 600 var(--fs-small)/1 var(--mono); color: #8a8a8a; }
.fun__txt h3 { font-size: clamp(1.2rem, 0.9rem + 0.8vw, 1.8rem); font-weight: 600; letter-spacing: -0.035em; }
.fun__txt p { margin-top: 0.2rem; font-size: 0.88rem; line-height: 1.4; color: #5e5e5e; }
.fun__val { display: grid; justify-items: end; font: 600 clamp(1.2rem, 0.9rem + 0.8vw, 1.8rem)/1 var(--mono); letter-spacing: -0.03em; }
.fun__val small { margin-top: 0.3rem; font: 500 0.68rem/1 var(--mono); letter-spacing: 0; color: #8a8a8a; }
.fun__st:last-child .fun__val { color: #3f8f2f; }
.fun__rate { position: absolute; right: 0; top: 0; z-index: 1; padding: 0.15rem 0.45rem; border-radius: 99em; translate: 0 -50%; background: var(--off-white); box-shadow: inset 0 0 0 1px rgb(58 126 246 / 0.3); font: 600 0.66rem/1.2 var(--mono); font-style: normal; color: var(--blue); }
.fun__rate--none { display: none; }
.fun__note { margin-top: 1.25rem; font-size: 0.8rem; color: #8a8a8a; }
@media (prefers-reduced-motion: no-preference) {
  .fun__drop { animation: fun-leak 7s linear infinite; animation-delay: var(--delay); }
  .fun__drop--through { animation-name: fun-through; }
  .fun__band { animation: fun-glow 6s ease-in-out infinite; animation-delay: calc(var(--k) * 0.6s); }
  .fun.is-paused :is(.fun__drop, .fun__band) { animation-play-state: paused; }
  @keyframes fun-leak {
    0% { translate: calc(var(--r) * 40cqi) 1cqi; opacity: 0; }
    6% { opacity: 1; }
    70% { translate: calc(var(--r) * (40cqi - 34cqi * var(--stop))) calc(var(--stop) * 90cqi); opacity: 1; }
    100% { translate: calc(var(--r) * (40cqi - 34cqi * var(--stop)) + var(--side) * 16cqi) calc(var(--stop) * 90cqi + 5cqi); opacity: 0; }
  }
  @keyframes fun-through {
    0% { translate: calc(var(--r) * 40cqi) 1cqi; opacity: 0; }
    6% { opacity: 1; }
    90% { translate: calc(var(--r) * 6cqi) 88cqi; opacity: 1; }
    100% { translate: 0 92cqi; opacity: 0; }
  }
  @keyframes fun-glow { 0%, 100% { opacity: 0.75; } 12% { opacity: 1; } }
}

/* ==========================================================================
   Analytics — editorial figures
   ========================================================================== */
.ana { background: var(--black); color: var(--white); padding-block: clamp(5rem, 9vw, 10rem); }
.ana__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(3rem, 5.5vw, 6rem); border-top: 1px solid rgb(255 255 255 / 0.25); }
.fig { display: grid; align-content: start; gap: 0.5rem; padding: clamp(1.5rem, 2.5vw, 2.5rem) clamp(1rem, 2.2vw, 2.25rem) clamp(2rem, 3vw, 3rem); border-bottom: 1px solid rgb(255 255 255 / 0.12); }
.fig--traffic { grid-column: span 2; padding-left: 0; }
.fig--eng { padding-left: 0; }
.fig--rank, .fig--leads, .fig--conv { border-left: 1px solid rgb(255 255 255 / 0.12); }
.fig--rank, .fig--conv { padding-right: 0; }
.fig__k { display: flex; align-items: baseline; gap: 0.7rem; font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(255 255 255 / 0.55); }
.fig__k b { font-family: var(--mono); letter-spacing: 0.04em; color: var(--lime); }
.fig__num { justify-self: start; margin-top: 0.6rem; font-size: clamp(3rem, 1.5rem + 4.2vw, 6.5rem); font-weight: 700; line-height: 0.9; letter-spacing: -0.06em; }
.fig__num small { margin-left: 0.08em; font-size: 0.45em; letter-spacing: -0.02em; color: rgb(255 255 255 / 0.55); }
.fig--traffic .fig__num { font-size: clamp(3.6rem, 1.5rem + 6vw, 9rem); background: linear-gradient(90deg, var(--lime), var(--blue-bright)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fig--traffic .fig__num small { color: transparent; }
.fig__cap { max-width: 24em; font-size: 0.95rem; color: rgb(255 255 255 / 0.6); }
.fig__viz { margin-top: 1.5rem; }
.tr { position: relative; height: clamp(11rem, 16vw, 15rem); }
.tr svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tr__grid { fill: none; stroke: rgb(255 255 255 / 0.08); vector-effect: non-scaling-stroke; }
.tr__area { fill: rgb(155 225 93 / 0.12); }
.tr__line { fill: none; stroke: var(--lime); stroke-width: 2.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.tr__note { position: absolute; left: var(--at); top: var(--top); padding-bottom: 1.3rem; translate: -50% -100%; font: 500 0.72rem/1.2 var(--mono); color: rgb(255 255 255 / 0.78); white-space: nowrap; }
.tr__note::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 1px; height: 1rem; background: rgb(255 255 255 / 0.4); }
.tr__axis { display: flex; justify-content: space-between; margin-top: 0.5rem; font: 500 0.7rem/1 var(--mono); color: rgb(255 255 255 / 0.4); }
.slope { display: block; width: 100%; height: auto; overflow: visible; }
.slope__h { font: 600 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; fill: rgb(255 255 255 / 0.45); }
.sl path { fill: none; stroke: rgb(255 255 255 / 0.3); stroke-width: 1.5; }
.sl__a { fill: #0a0a0a; stroke: rgb(255 255 255 / 0.5); stroke-width: 1.5; }
.sl__b { fill: var(--lime); }
.sl text { font: 500 11px/1 var(--mono); fill: rgb(255 255 255 / 0.7); }
.sl:first-of-type path { stroke: var(--lime); }
.dots { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); align-items: center; gap: 0.75rem; margin-bottom: 0.7rem; }
.dots small, .dots__key, .waffles small, .units small { font: 500 0.68rem/1 var(--mono); color: rgb(255 255 255 / 0.45); }
.dots span { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.dots i { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: rgb(255 255 255 / 0.25); }
.dots--now i { background: var(--lime); }
.dots__key { margin-top: 0.8rem; }
.units { display: flex; align-items: flex-end; gap: 0.6rem; height: 11rem; }
.units__col { display: grid; justify-items: center; gap: 0.45rem; }
.units__stack { display: flex; flex-direction: column-reverse; gap: 3px; }
.units__stack i { width: 1.5rem; height: 0.45rem; border-radius: 2px; background: rgb(91 150 255 / 0.8); }
.units__col:last-child i { background: var(--lime); }
.waffles { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.waffles > span { display: grid; gap: 0.5rem; }
.waffle { display: grid; grid-template-columns: repeat(10, 0.55rem); gap: 3px; }
.waffle i { aspect-ratio: 1; border-radius: 2px; background: rgb(255 255 255 / 0.12); }
.waffle .is-on { background: var(--lime); }
@media (prefers-reduced-motion: no-preference) {
  .js .fig .tr svg { clip-path: inset(0 100% 0 0); transition: clip-path 1.8s var(--ease-in-out) 0.3s; }
  .js .fig.is-in .tr svg { clip-path: inset(-10% -2% -10% 0); }
  .js .fig .tr__note { opacity: 0; transition: opacity 0.5s; transition-delay: calc(0.6s + var(--at) * 0.016s); }
  .js .fig.is-in .tr__note { opacity: 1; }
  .js .fig .units__stack { transform: scaleY(0); transform-origin: 50% 100%; transition: transform 0.8s var(--ease-out); }
  .js .fig .units__col:nth-child(n) .units__stack { transition-delay: 0.3s; }
  .js .fig .units__col:nth-child(n+3) .units__stack { transition-delay: 0.45s; }
  .js .fig .units__col:nth-child(n+5) .units__stack { transition-delay: 0.6s; }
  .js .fig.is-in .units__stack { transform: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 64em) {
  .seo2__grid, .eco__grid, .fun__grid { grid-template-columns: minmax(0, 1fr); }
  .qs { max-width: 36rem; }
  .eco__orbit { max-width: 32rem; }
  .fun__vis { max-width: 32rem; width: 100%; justify-self: center; }
  .fun__stages { grid-template-rows: none; }
  .fun__st { padding-block: 1rem; }
  .rhythm { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rhythm__loop { display: none; }
  .ana__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fig { padding-inline: 0 1.5rem; border-left: 0 !important; }
  .fig--traffic { grid-column: 1 / -1; }
  .fig--rank, .fig--leads { padding-inline: 1.5rem 0; border-left: 1px solid rgb(255 255 255 / 0.12) !important; }
  .fig--conv { grid-column: 1 / -1; padding-right: 0; }
}

@media (max-width: 48em) {
  .gj__key { display: none; }
  .gj__canvas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; aspect-ratio: auto; padding: 1rem; translate: none; }
  .gj__plot { opacity: 0.45; }
  .gs { position: relative; left: auto; top: auto; width: auto; height: auto; }
  .gs::before, .gs__dot, .gs__ping { display: none; }
  .gs__card { position: static; width: auto; height: 100%; padding: 0.75rem; border-radius: 0.8rem; translate: none; }
  .gs__k { font-size: 0.8rem; }
  .gs__card > div { margin-top: 0.6rem; }
  .mq__bar { padding: 0.35rem 0.5rem; }
  .mau__rings { width: 2.4rem; }
  .mau__rings b { width: 0.35rem; height: 0.35rem; margin: -0.175rem; }
  .mt__bars { height: 2rem; }
  .mv__check { width: 2rem; }

  .shift__row { grid-template-columns: auto 2rem minmax(0, 1fr); row-gap: 0.4rem; }
  .shift__via { grid-column: 1 / -1; justify-self: start; }

  .seo2__copy { grid-template-columns: minmax(0, 1fr); }
  .seo2__copy p { grid-column: 1; grid-row: auto; }
  .qs__hint { display: none; }
  .snip { grid-template-columns: minmax(0, 1fr); }
  .kw__row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 4rem; }
  .kw__row > :nth-child(3) { display: none; }
  .local { grid-template-columns: minmax(0, 1fr); }
  .local__map { min-height: 11rem; }
  .cwv { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .tc { aspect-ratio: 1 / 1; }
  .tc__node { font-size: 0.68rem; padding: 0.35rem 0.55rem; }
  .tc__pillar { max-width: 8.5rem; font-size: 0.8rem; }

  .eco__step { grid-template-columns: 2rem minmax(0, 1fr); }
  .eco__stat { grid-column: 2; justify-items: start; }
  .eco__tag { font-size: 0.68rem; padding: 0.25rem 0.5rem; }

  .rhythm { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .rh__viz { max-width: 24rem; }

  .fun__txt p { display: none; }

  .ana__grid { grid-template-columns: minmax(0, 1fr); }
  .fig, .fig--rank, .fig--leads { padding-inline: 0 !important; border-left: 0 !important; }
  .fig--conv { grid-column: auto; }
}