/* ==========================================================================
   IranDesigner Alfa — bespoke page kit
   Signature components owned by individual landing pages. Loaded only on
   bespoke pages, after cinema.css (shares its tokens, type and motion).
   ========================================================================== */

/* ---------- 0. Shared additions ---------- */
.cinema-sec--sticky .cinema-split { align-items: start; }
.cinema-sec--sticky .cinema-split__copy { position: sticky; top: calc(var(--header-h) + 40px); }
.mono-fa { font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Vazirmatn", monospace; }

/* Hero document attachment */
.attach { display: inline-flex; align-items: center; gap: 14px; max-width: 100%; margin-top: 22px; padding: 10px 12px 10px 14px; border-radius: 18px; border: 1px dashed rgba(224, 169, 95, .45); background: rgba(224, 169, 95, .05); color: var(--text); transition: border-color .3s, background .3s, transform .5s var(--ease-out); }
.attach:hover { border-style: solid; background: rgba(224, 169, 95, .1); transform: translateY(-2px); }
.attach__file { position: relative; flex: none; display: grid; place-items: end center; width: 40px; height: 50px; padding-bottom: 7px; border-radius: 0 7px 7px 7px; background: linear-gradient(160deg, #f3c27a, #d26a4e); box-shadow: 0 12px 24px -10px rgba(210, 106, 78, .8); }
.attach__file::before { content: ""; position: absolute; top: 0; left: 0; width: 13px; height: 13px; border-bottom-right-radius: 4px; background: linear-gradient(135deg, var(--bg) 50%, #a9563f 50%); }
.attach__file b { font: 800 10px/1 var(--mono); letter-spacing: .08em; color: #1a0d08; }
.attach__txt { display: grid; gap: 2px; min-width: 0; }
.attach__txt strong { font-size: 14.5px; font-weight: 800; line-height: 1.6; }
.attach__txt small { font-size: 12px; color: var(--muted); }
.attach__dl { flex: none; display: grid; place-items: center; width: 40px; height: 40px; overflow: hidden; border-radius: 12px; border: 1px solid var(--line-2); color: var(--gold-l); transition: background .3s, color .3s; }
.attach:hover .attach__dl { background: var(--gold); color: #1a0d08; }
.attach:hover .attach__dl .ico { animation: dl 1s var(--ease-out) infinite; }
@keyframes dl { 0% { transform: translateY(-4px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(4px); opacity: 0; } }

/* Art figure inside a section */
.cx-figure { position: relative; }
.cx-figure .cx-art { opacity: 1; transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.cx-figure .lens__tag { z-index: 3; }
.cx-figure .lens__tag--1 { top: -14px; right: 10%; }
.cx-figure .lens__tag--2 { top: 40%; left: -20px; }
.cx-figure .lens__tag--3 { bottom: -14px; left: 16%; }
.cx-figure .lens__tag--4 { bottom: 26%; right: -16px; }

/* Signal chips */
.sigchips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 580px; }
.sigchips li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line-2); background: linear-gradient(180deg, rgba(255, 236, 214, .04), rgba(255, 236, 214, .01)); font-size: 14.5px; font-weight: 800; }
.sigchips__ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: var(--teal); background: rgba(90, 167, 178, .1); border: 1px solid rgba(90, 167, 178, .25); }
.sigchips__bar { display: flex; align-items: flex-end; gap: 3px; height: 16px; margin-inline-start: auto; }
.sigchips__bar i { width: 3px; border-radius: 2px; background: var(--teal); opacity: .3; animation: sig 2.4s ease-in-out infinite; }
.sigchips__bar i:nth-child(1) { height: 30%; animation-delay: calc(var(--i) * .2s); }
.sigchips__bar i:nth-child(2) { height: 55%; animation-delay: calc(var(--i) * .2s + .15s); }
.sigchips__bar i:nth-child(3) { height: 80%; animation-delay: calc(var(--i) * .2s + .3s); }
.sigchips__bar i:nth-child(4) { height: 100%; animation-delay: calc(var(--i) * .2s + .45s); }
@keyframes sig { 0%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* ---------- Section sets (page-kit atmospheres) ---------- */
.set--sonar::before { top: 50%; left: -18%; width: min(90vw, 1100px); aspect-ratio: 1; transform: translateY(-50%); border-radius: 50%; background: repeating-radial-gradient(circle, rgba(90, 167, 178, .075) 0 1px, transparent 1px 58px); -webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent); mask-image: radial-gradient(closest-side, #000 20%, transparent); }
.set--sonar::after { top: 50%; left: calc(-18% + min(45vw, 550px)); width: 40px; aspect-ratio: 1; margin: -20px 0 0 -20px; border-radius: 50%; border: 1px solid rgba(90, 167, 178, .5); animation: sonar 5s var(--ease-out) infinite; }
@keyframes sonar { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(26); opacity: 0; } }
.set--scan::before { inset: 0; background: repeating-linear-gradient(0deg, rgba(255, 236, 214, .02) 0 1px, transparent 1px 5px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); }
.set--scan::after { inset-inline: 0; top: -20%; height: 18%; background: linear-gradient(180deg, transparent, rgba(90, 167, 178, .06) 80%, rgba(90, 167, 178, .14)); animation: setscan 9s linear infinite; }
@keyframes setscan { to { top: 110%; } }
.set--dots::before { inset: 0; background: radial-gradient(rgba(255, 236, 214, .09) 1px, transparent 1.6px) 0 0 / 24px 24px; -webkit-mask-image: radial-gradient(70% 60% at 30% 40%, #000, transparent); mask-image: radial-gradient(70% 60% at 30% 40%, #000, transparent); }
.set--paper::before { inset: 10% 15% 0; background: radial-gradient(closest-side, rgba(243, 194, 122, .1), transparent); filter: blur(30px); }
.set--aurora::before { inset: -10% 40% 30% -10%; background: radial-gradient(closest-side, rgba(90, 167, 178, .16), transparent); filter: blur(50px); animation: drift 16s ease-in-out infinite alternate; }
.set--aurora::after { inset: 40% -10% -10% 50%; background: radial-gradient(closest-side, rgba(224, 169, 95, .12), transparent); filter: blur(50px); animation: drift 20s ease-in-out infinite alternate-reverse; }
@keyframes drift { to { transform: translate(8%, 6%) scale(1.1); } }

/* ==========================================================================
   SEO — search radar / signal room
   ========================================================================== */
.cx-hero--radar .cx-hero__visual { width: min(100%, 540px, 62vh); }
.radar { position: relative; width: 100%; }
.js .radar { opacity: 0; transform: scale(.9); }
.is-ready .radar { opacity: 1; transform: none; transition: opacity 1.4s var(--ease-out) .2s, transform 1.8s var(--ease-out) .2s; }
.radar__scope { position: relative; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(90, 167, 178, .12), rgba(90, 167, 178, .03) 72%, transparent), #0c0a09; box-shadow: 0 0 0 1px rgba(255, 236, 214, .06), 0 70px 120px -50px rgba(90, 167, 178, .45), inset 0 0 90px rgba(0, 0, 0, .7); }
.radar__grid { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.radar__ring { fill: none; stroke: rgba(90, 167, 178, .2); stroke-width: 1; }
.radar__ring--outer { stroke: rgba(224, 169, 95, .4); stroke-width: 1.5; }
.radar__ring--in { stroke-dasharray: 3 6; }
.radar__ticks { fill: none; stroke: rgba(255, 236, 214, .22); stroke-width: 9; stroke-dasharray: .3 2.2; }
.radar__axis { stroke: rgba(90, 167, 178, .16); stroke-width: 1; }
.radar__axis--d { stroke-dasharray: 2 9; }
.radar__deg text { font: 600 11px var(--mono); fill: rgba(255, 236, 214, .32); text-anchor: middle; letter-spacing: .1em; }
.radar__sweep { position: absolute; inset: 4%; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0deg 270deg, rgba(90, 167, 178, .05) 285deg, rgba(120, 200, 210, .2) 340deg, rgba(243, 194, 122, .5) 359deg, transparent 360deg); animation: spin var(--period, 7s) linear infinite; }
.radar__sweep::after { content: ""; position: absolute; top: 0; left: 50%; width: 2px; height: 50%; margin-left: -1px; background: linear-gradient(rgba(255, 222, 170, .95), rgba(243, 194, 122, 0)); box-shadow: 0 0 14px rgba(243, 194, 122, .8); }
.radar__ping { position: absolute; top: 50%; left: 50%; width: 26%; aspect-ratio: 1; margin: -13% 0 0 -13%; border-radius: 50%; border: 1px solid rgba(224, 169, 95, .55); animation: ping 3.6s var(--ease-out) infinite; }
@keyframes ping { 0% { transform: scale(.3); opacity: .9; } 100% { transform: scale(3.2); opacity: 0; } }
.radar__blip { position: absolute; z-index: 2; width: 0; height: 0; }
.radar__blip > i { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--teal); opacity: .35; animation: blip var(--period, 7s) linear var(--t) infinite; }
.radar__blip > i::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 1px solid rgba(127, 211, 220, .8); opacity: 0; animation: blipRing var(--period, 7s) var(--ease-out) var(--t) infinite; }
.radar__label { position: absolute; top: -17px; display: grid; gap: 2px; padding: 6px 10px; border-radius: 10px; white-space: nowrap; background: rgba(10, 8, 7, .84); border: 1px solid rgba(90, 167, 178, .3); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: .55; animation: blipLabel var(--period, 7s) linear var(--t) infinite; }
.radar__blip--r .radar__label { left: 14px; }
.radar__blip--l .radar__label { right: 14px; }
.radar__label b { font: 700 11.5px/1.2 var(--mono); color: var(--text); letter-spacing: .04em; }
.radar__label small { font: 500 9.5px/1.2 var(--mono); color: var(--teal); letter-spacing: .14em; text-transform: uppercase; }
@keyframes blip { 0% { opacity: 1; transform: scale(1.6); background: #c9f1f5; box-shadow: 0 0 20px #7fd3dc; } 25% { opacity: .9; transform: scale(1); } 100% { opacity: .35; transform: scale(1); background: var(--teal); box-shadow: none; } }
@keyframes blipRing { 0% { opacity: .9; transform: scale(.4); } 30%, 100% { opacity: 0; transform: scale(1.7); } }
@keyframes blipLabel { 0% { opacity: 1; border-color: rgba(243, 194, 122, .7); } 35% { opacity: .9; } 100% { opacity: .55; border-color: rgba(90, 167, 178, .3); } }
.radar__hud { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 20px; direction: ltr; }
.radar__hud span { display: inline-flex; align-items: baseline; gap: 8px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 236, 214, .03); font-size: 10.5px; letter-spacing: .12em; }
.radar__hud small { font-size: 9.5px; color: var(--muted); }
.radar__hud b { font-weight: 700; color: var(--gold-l); }

/* Crawl console */
.crawl { position: relative; overflow: hidden; border-radius: 22px; border: 1px solid var(--line-2); background: linear-gradient(180deg, #100d0b, #0b0908); box-shadow: 0 60px 100px -60px rgba(0, 0, 0, .9); }
.crawl__bar { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: #120f0c; font-size: 11px; color: var(--muted); direction: ltr; }
.crawl__dots { display: flex; gap: 6px; }
.crawl__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--terra); }
.crawl__dots i:nth-child(2) { background: var(--gold); }
.crawl__dots i:nth-child(3) { background: var(--teal); }
.crawl__live { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; color: var(--text-2); }
.crawl__step { display: grid; grid-template-columns: 76px 1fr; border-bottom: 1px solid var(--line); }
.crawl__step:last-child { border-bottom: 0; }
.crawl__gutter { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 8px; border-inline-end: 1px solid var(--line); background: rgba(255, 236, 214, .015); }
.crawl__num { font-family: var(--font); font-size: 24px; font-weight: 900; line-height: 1; color: var(--text); }
.crawl__code { padding: 4px 6px; border-radius: 6px; font-size: 9px; font-weight: 700; letter-spacing: .08em; color: #0b1516; background: var(--teal); }
.crawl__step:nth-child(2) .crawl__code { background: var(--gold); color: #1a0d08; }
.crawl__step:nth-child(3) .crawl__code { background: var(--terra-l); color: #1a0d08; }
.crawl__step:nth-child(4) .crawl__code { background: #8fcf9a; color: #0b160d; }
.crawl__main { padding: 18px 22px 22px; }
.crawl__cmd { margin-bottom: 8px; font-size: 11.5px; color: var(--teal); text-align: left; opacity: .85; }
.crawl__cmd span { color: var(--gold); }
.crawl__main h3 { font-size: 17.5px; font-weight: 900; line-height: 1.6; }
.crawl__main > p:not(.crawl__cmd) { margin-top: 6px; color: var(--text-2); font-size: 14.5px; line-height: 1.95; }
.crawl__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.crawl__tags code { display: inline-block; padding: 4px 9px; border-radius: 7px; font: 500 11.5px/1.6 ui-monospace, "SF Mono", Menlo, Consolas, "Vazirmatn", monospace; color: var(--text-2); background: rgba(90, 167, 178, .07); border: 1px solid rgba(90, 167, 178, .22); }
.crawl__scan { position: absolute; inset-inline: 0; top: -90px; height: 90px; pointer-events: none; border-bottom: 1px solid rgba(90, 167, 178, .5); background: linear-gradient(180deg, transparent, rgba(90, 167, 178, .06) 70%, rgba(90, 167, 178, .2)); animation: crawlscan 7s linear infinite; }
@keyframes crawlscan { to { top: 100%; } }

/* Baseline readouts */
.readouts { overflow: hidden; border-radius: 22px; border: 1px solid var(--line-2); background: radial-gradient(80% 140% at 100% 0%, rgba(90, 167, 178, .08), transparent 60%), var(--panel); }
.readouts__bar { display: flex; justify-content: space-between; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--line); font-size: 10.5px; color: var(--muted); direction: ltr; }
.readouts__grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.readout { position: relative; padding: 22px 24px 24px; }
.readout + .readout { border-inline-start: 1px solid var(--line); }
.readout__label { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; color: var(--gold); }
.readout__label .mono { padding: 2px 6px; border-radius: 5px; border: 1px solid var(--line-2); font-size: 9.5px; color: var(--muted); }
.readout__value { margin-top: 10px; font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); font-weight: 900; line-height: 1.55; }
.readout__spark { display: block; width: 100%; height: 44px; margin-top: 14px; overflow: visible; }
.readout__spark path { fill: none; stroke: var(--teal); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px rgba(90, 167, 178, .6)); transition: stroke-dashoffset 1.8s var(--ease-out) calc(var(--d, 0) * 120ms + .3s); }
.readout:nth-child(2) .readout__spark path { stroke: var(--gold); filter: drop-shadow(0 0 6px rgba(224, 169, 95, .6)); }
.readout:nth-child(3) .readout__spark path { stroke: var(--terra-l); filter: drop-shadow(0 0 6px rgba(224, 122, 92, .6)); }
.readout.is-in .readout__spark path, .reveal-all .readout__spark path, html:not(.js) .readout__spark path { stroke-dashoffset: 0; }
.readout__note { margin-top: 10px; font-size: 13px; line-height: 1.85; color: var(--muted); }
.readouts__note { display: flex; align-items: flex-start; gap: 10px; padding: 14px 20px; border-top: 1px dashed var(--line-2); background: rgba(224, 169, 95, .04); color: var(--text-2); font-size: 13.5px; line-height: 1.95; }
.readouts__note .ico { margin-top: 4px; color: var(--gold); }

/* Catalog index cards */
.container > .catalog { margin-top: clamp(28px, 3.4vw, 44px); }
.catalog { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.catalog__item { display: flex; }
.catalog__card { position: relative; flex: 1; padding: 20px 20px 46px; padding-inline-start: 34px; border-radius: 6px; background: repeating-linear-gradient(180deg, transparent 0 27px, rgba(90, 167, 178, .1) 27px 28px) 0 64px / 100% calc(100% - 64px) no-repeat, #14110e; border: 1px solid rgba(255, 236, 214, .1); box-shadow: 0 30px 50px -30px rgba(0, 0, 0, .9); rotate: var(--r, 0deg); transition: rotate .6s var(--ease-out), translate .6s var(--ease-out), border-color .4s; }
.catalog__card::before { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: 20px; width: 1px; background: rgba(210, 106, 78, .4); }
.catalog__card:hover { rotate: 0deg; translate: 0 -6px; border-color: rgba(224, 169, 95, .4); }
.catalog__hole { position: absolute; bottom: 14px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: #090706; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 236, 214, .08); }
.catalog__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 2px solid rgba(210, 106, 78, .55); }
.catalog__head .mono { font-size: 10px; letter-spacing: .12em; color: var(--muted); direction: ltr; }
.catalog__stamp { font-size: 30px; font-weight: 900; line-height: 1; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.catalog__card h3 { font-size: 17px; font-weight: 900; line-height: 1.65; }
.catalog__card p { margin-top: 6px; color: var(--text-2); font-size: 14.5px; line-height: 28px; }

/* Deliverables dossier */
.container > .dossier { margin-top: clamp(44px, 5vw, 64px); }
.dossier { position: relative; padding: clamp(44px, 4.6vw, 58px) clamp(22px, 3.4vw, 42px) clamp(26px, 3.4vw, 40px); border-radius: 22px; border: 1px solid rgba(224, 169, 95, .25); background: radial-gradient(70% 100% at 0% 100%, rgba(210, 106, 78, .1), transparent 60%), linear-gradient(180deg, #1b1510, #120e0b); }
.dossier__clip { position: absolute; top: -15px; left: 50%; width: 128px; height: 32px; margin-left: -64px; border-radius: 10px 10px 6px 6px; background: linear-gradient(180deg, #3d332b, #211b16); border: 1px solid rgba(255, 236, 214, .14); box-shadow: 0 10px 20px rgba(0, 0, 0, .5); }
.dossier__clip::after { content: ""; position: absolute; top: 8px; left: 50%; width: 44px; height: 8px; margin-left: -22px; border-radius: 6px; background: #0b0908; }
.dossier__tab { position: absolute; top: 18px; inset-inline-start: clamp(22px, 3.4vw, 42px); font-size: 10.5px; letter-spacing: .14em; color: var(--gold-l); direction: ltr; }
.dossier__body { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: clamp(22px, 4vw, 56px); }
.dossier__eyebrow { font-size: 13px; font-weight: 700; color: var(--gold); }
.dossier h3 { margin-top: 6px; font-size: clamp(1.25rem, 1rem + .8vw, 1.7rem); font-weight: 900; line-height: 1.55; }
.dossier__copy > p:not(.dossier__eyebrow) { margin-top: 10px; color: var(--text-2); line-height: 2; }
.dossier__list { display: grid; gap: 10px; }
.dossier__list li { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 236, 214, .03); font-weight: 700; line-height: 1.7; }
.dossier__box { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; border: 1.5px solid rgba(224, 169, 95, .55); color: #1a0d08; transition: background .4s var(--ease-out) calc(var(--i) * .25s + .6s); }
.dossier__box .ico { width: 15px; height: 15px; stroke-width: 3; stroke-dasharray: 30; stroke-dashoffset: 30; transition: stroke-dashoffset .5s var(--ease-out) calc(var(--i) * .25s + .7s); }
.dossier.is-in .dossier__box, .reveal-all .dossier__box, html:not(.js) .dossier__box { background: var(--gold); }
.dossier.is-in .dossier__box .ico, .reveal-all .dossier__box .ico, html:not(.js) .dossier__box .ico { stroke-dashoffset: 0; }

/* SERP reading list */
.serp { overflow: hidden; border-radius: 24px; border: 1px solid var(--line-2); background: #0f0c0a; box-shadow: 0 60px 100px -60px rgba(0, 0, 0, .9); }
.serp__bar { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: #14100d; }
.serp__logo { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--grad-fire); color: #1a0d08; }
.serp__query { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; height: 46px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 236, 214, .04); font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; }
.serp__query .ico { color: var(--muted); }
.serp__caret { flex: none; width: 2px; height: 20px; background: var(--gold); animation: blink 1s steps(2, jump-none) infinite; }
.serp__stats { padding: 14px 24px 0; font-size: 11px; color: var(--muted); direction: ltr; text-align: right; }
.serp__results { padding: 4px 24px 18px; }
.serp__item { padding: 18px 0; border-bottom: 1px solid var(--line); }
.serp__item:last-child { border-bottom: 0; }
.serp__item a { display: block; }
.serp__site { display: flex; align-items: center; gap: 10px; }
.serp__fav { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-2); background: #1d1713; }
.serp__fav svg { width: 17px; height: 17px; }
.serp__name { display: grid; font-size: 13px; font-weight: 700; line-height: 1.35; color: var(--text-2); }
.serp__name small { font: 400 11.5px/1.4 var(--mono); color: var(--muted); }
.serp__item h3 { margin-top: 8px; font-size: clamp(1.08rem, 1rem + .4vw, 1.28rem); font-weight: 800; line-height: 1.6; color: #8fcad2; transition: color .3s; }
.serp__item a:hover h3, .serp__item a:focus-visible h3 { color: var(--gold-l); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 7px; }
.serp__item p { margin-top: 4px; color: var(--text-2); font-size: 14.5px; line-height: 1.95; }

/* Route index (big typographic links) */
.routes { display: grid; border-top: 1px solid var(--line-2); }
.route { position: relative; isolation: isolate; display: grid; grid-template-columns: 54px 1fr auto; grid-template-areas: "num title go" "num sub go"; align-items: center; column-gap: 16px; padding: 22px 16px; overflow: hidden; border-bottom: 1px solid var(--line-2); }
.route::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grad-fire); transform: scaleX(0); transform-origin: right; transition: transform .6s var(--ease-cine); }
.route:hover::before, .route:focus-visible::before { transform: scaleX(1); }
.route__num { grid-area: num; font-size: 13px; color: var(--gold); transition: color .4s; }
.route__title { grid-area: title; font-size: clamp(1.25rem, 1rem + 1vw, 1.85rem); font-weight: 900; line-height: 1.4; transition: color .4s; }
.route__sub { grid-area: sub; margin-top: 4px; font-size: 14px; color: var(--muted); transition: color .4s; }
.route__go { grid-area: go; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-2); color: var(--gold-l); transition: background .4s, color .4s, border-color .4s, transform .5s var(--ease-out); }
.route:hover .route__num, .route:hover .route__title, .route:hover .route__sub, .route:focus-visible .route__num, .route:focus-visible .route__title, .route:focus-visible .route__sub { color: #1a0d08; }
.route:hover .route__go, .route:focus-visible .route__go { background: #1a0d08; border-color: #1a0d08; transform: translateX(-6px); }

/* Printed report sheet */
.paper { position: relative; }
.paper__sheet { position: relative; padding: clamp(24px, 4vw, 48px); padding-inline-start: clamp(48px, 5.4vw, 76px); border-radius: 6px; color: #2a1f17; background: linear-gradient(180deg, #f7efe4, #efe4d5); box-shadow: 0 2px 0 #d9ccb9, 0 5px 0 #e9dfd1, 0 7px 0 #d3c5b1, 0 70px 100px -40px rgba(0, 0, 0, .85); rotate: -.5deg; transition: rotate .8s var(--ease-out); }
.paper:hover .paper__sheet { rotate: 0deg; }
.paper__sheet::before { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: clamp(34px, 3.8vw, 54px); width: 2px; background: rgba(194, 58, 53, .32); }
.paper__sheet::after { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: 10px; width: 16px; background: radial-gradient(circle, #0b0908 0 6px, transparent 6.5px) 50% 16% / 16px 16px no-repeat, radial-gradient(circle, #0b0908 0 6px, transparent 6.5px) 50% 50% / 16px 16px no-repeat, radial-gradient(circle, #0b0908 0 6px, transparent 6.5px) 50% 84% / 16px 16px no-repeat; }
.paper__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 18px; border-bottom: 2px solid #2a1f17; }
.paper__kicker { font-size: 10.5px; letter-spacing: .14em; color: #8a6f58; direction: ltr; text-align: right; }
.paper__title { margin-top: 6px; font-size: clamp(1.3rem, 1rem + 1vw, 1.8rem); font-weight: 900; color: #1d150f; }
.paper__stamp { flex: none; padding: 6px 14px; border: 2.5px solid rgba(194, 58, 53, .75); border-radius: 8px; color: rgba(194, 58, 53, .88); font-size: 15px; font-weight: 900; rotate: -8deg; mix-blend-mode: multiply; }
.paper__table { margin-top: 6px; overflow-x: auto; }
.paper table { width: 100%; min-width: 640px; border-collapse: collapse; }
.paper th, .paper td { padding: 16px 14px; text-align: start; vertical-align: top; font-size: 14.5px; line-height: 1.95; border-bottom: 1px solid rgba(42, 31, 23, .14); }
.paper thead th { font-size: 12.5px; font-weight: 800; color: #8a6f58; border-bottom: 1px solid rgba(42, 31, 23, .35); }
.paper tbody th { font-size: 15px; font-weight: 900; color: #9f4d3e; white-space: nowrap; }
.paper td { color: #3b2e24; }
.paper td:last-child { color: #1d150f; font-weight: 600; }
.paper tbody tr:last-child > * { border-bottom: 0; }
.paper__foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 12px; border-top: 1px dashed rgba(42, 31, 23, .25); font-size: 10px; letter-spacing: .14em; color: #8a6f58; direction: ltr; }
.container > .paper + .cx-notes { margin-top: clamp(30px, 4vw, 48px); }

/* AI answer observation log */
.aiw { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: clamp(20px, 3vw, 40px); }
.aiw__panel { position: sticky; top: calc(var(--header-h) + 30px); padding: 20px; border-radius: 24px; border: 1px solid transparent; background: linear-gradient(#100d0c, #100d0c) padding-box, linear-gradient(140deg, rgba(90, 167, 178, .65), rgba(255, 236, 214, .06) 45%, rgba(224, 169, 95, .55)) border-box; box-shadow: 0 60px 110px -50px rgba(90, 167, 178, .4); }
.aiw__prompt { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line-2); background: rgba(255, 236, 214, .04); font-size: 15px; font-weight: 700; }
.aiw__prompt .ico { color: var(--teal); }
.aiw__typed { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: clip; }
.js .aiw__typed { clip-path: inset(0 0 0 100%); }
.js .aiw.is-in .aiw__typed { animation: typeIn 2.2s steps(26) .5s forwards; }
.reveal-all .aiw__typed { clip-path: none !important; }
@keyframes typeIn { to { clip-path: inset(0 0 0 0); } }
.aiw__caret { flex: none; width: 2px; height: 18px; background: var(--teal); animation: blink 1s steps(2, jump-none) infinite; }
.aiw__answer { margin-top: 14px; padding: 18px; border-radius: 16px; border: 1px solid rgba(90, 167, 178, .2); background: linear-gradient(180deg, rgba(90, 167, 178, .09), rgba(90, 167, 178, .02)); }
.aiw__badge { display: inline-flex; align-items: center; gap: 8px; font: 700 10.5px/1 var(--mono); letter-spacing: .12em; color: var(--teal); direction: ltr; }
.aiw__lines { display: grid; gap: 10px; margin-top: 16px; }
.aiw__lines i { display: block; width: var(--w); height: 9px; border-radius: 6px; background: linear-gradient(90deg, rgba(255, 236, 214, .06), rgba(255, 236, 214, .17), rgba(255, 236, 214, .06)) 0 0 / 200% 100%; animation: shimmer 2.6s linear calc(var(--i) * .15s) infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.aiw__cites { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; direction: ltr; }
.aiw__cite { padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line-2); font: 600 11px/1.3 var(--mono); color: var(--muted); }
.aiw__cite--hit { color: #1a0d08; background: var(--gold); border-color: var(--gold); box-shadow: 0 0 22px rgba(224, 169, 95, .45); }
.aiw__stamp { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; font-size: 10px; letter-spacing: .12em; color: var(--muted); direction: ltr; }
.aiw__rec { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); }
.aiw__log { display: grid; gap: 12px; }
.aiw__field { position: relative; padding: 18px 20px; border-radius: 18px; border: 1px solid var(--line-2); background: var(--panel); }
.aiw__field::before { content: ""; position: absolute; inset-block: 18px; inset-inline-start: -1px; width: 3px; border-radius: 3px; background: var(--teal); }
.aiw__field dt { display: flex; align-items: center; gap: 10px; font-size: 16.5px; font-weight: 900; }
.aiw__field dt .mono { padding: 2px 6px; border-radius: 5px; border: 1px solid rgba(90, 167, 178, .3); font-size: 10px; color: var(--teal); }
.aiw__field dd { margin: 8px 0 0; color: var(--text-2); font-size: 14.5px; line-height: 1.95; }
.aiw__note { display: flex; align-items: flex-start; gap: 12px; margin-top: 22px; padding: 16px 20px; border-radius: 16px; border: 1px dashed rgba(90, 167, 178, .35); background: rgba(90, 167, 178, .04); color: var(--text-2); font-size: 14.5px; line-height: 2; }
.aiw__note .ico { margin-top: 5px; color: var(--teal); }
.aiw__note a { color: var(--gold-l); border-bottom: 1px solid rgba(224, 169, 95, .35); }

/* Error → fix tickets */
.issues { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.issue { position: relative; display: flex; flex-direction: column; padding: 22px 20px 20px; overflow: hidden; border-radius: 18px; border: 1px solid var(--line-2); background: var(--panel); }
.issue::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--teal), var(--gold) 50%, var(--crimson)); }
.issue__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.issue__id { padding: 3px 7px; border-radius: 6px; border: 1px solid rgba(194, 58, 53, .4); background: rgba(194, 58, 53, .14); font-size: 10.5px; color: #ff9484; }
.issue__label { font-size: 13px; font-weight: 800; color: var(--text-2); }
.issue__state { margin-inline-start: auto; font-size: 9.5px; letter-spacing: .1em; color: var(--muted); }
.issue h3 { margin-top: 14px; font-size: 17px; font-weight: 900; line-height: 1.6; }
.issue > p { flex: 1; margin-top: 8px; color: var(--text-2); font-size: 14px; line-height: 1.95; }
.issue__fix { margin-top: 16px; padding: 14px; border-radius: 14px; border: 1px solid rgba(90, 167, 178, .26); background: linear-gradient(180deg, rgba(90, 167, 178, .11), rgba(90, 167, 178, .03)); }
.issue__fix-label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 800; color: var(--teal); }
.issue__fix p:not(.issue__fix-label) { margin-top: 6px; font-size: 14px; line-height: 1.9; color: var(--text); }

/* CTA visual: search box */
.cta__visual--search { justify-items: center; }
.qbox { position: relative; width: min(100%, 470px); padding: 22px; border-radius: 28px; border: 1px solid var(--line-2); background: rgba(15, 12, 10, .88); box-shadow: 0 60px 100px -50px rgba(0, 0, 0, .9), 0 0 0 8px rgba(255, 236, 214, .02); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); rotate: -2deg; }
.qbox__brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 16px; }
.qbox__brand svg { width: 34px; height: 34px; }
.qbox__brand .mono { font-size: 11px; letter-spacing: .2em; color: var(--muted); }
.qbox__field { display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 18px; border-radius: 999px; background: #f6eee5; color: #1d150f; font-size: 15.5px; font-weight: 800; box-shadow: 0 0 0 4px rgba(224, 169, 95, .25); }
.qbox__field .ico { color: #9f4d3e; }
.qbox__text { min-width: 0; overflow: hidden; white-space: nowrap; }
.js .qbox__text { clip-path: inset(0 0 0 100%); }
.js .qbox.is-in .qbox__text { animation: typeIn 1.8s steps(22) .4s forwards; }
.reveal-all .qbox__text { clip-path: none !important; }
.qbox__caret { flex: none; width: 2px; height: 22px; background: #9f4d3e; animation: blink 1s steps(2, jump-none) infinite; }
.qbox__suggest { margin-top: 10px; padding: 8px; border-radius: 20px; border: 1px solid var(--line); background: rgba(255, 236, 214, .03); }
.qbox__suggest li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; color: var(--text-2); font-size: 14px; font-weight: 600; }
.js .qbox__suggest li { opacity: 0; transform: translateY(6px); transition: opacity .5s, transform .5s var(--ease-out); transition-delay: calc(var(--i) * .15s + 2s); }
.js .qbox.is-in .qbox__suggest li, .reveal-all .qbox__suggest li { opacity: 1; transform: none; }
.qbox__suggest li:first-child { background: rgba(224, 169, 95, .1); color: var(--text); }
.qbox__suggest .ico { width: 1em; height: 1em; color: var(--muted); }

/* ==========================================================================
   Marketing — broadcast studio / campaign mixing desk
   ========================================================================== */
.set--spots::before { inset: -10% 0 25%; background: conic-gradient(from 163deg at 18% -6%, transparent 0deg, rgba(90, 167, 178, .13) 9deg, transparent 19deg), conic-gradient(from 172deg at 50% -10%, transparent 0deg, rgba(243, 194, 122, .12) 8deg, transparent 16deg), conic-gradient(from 181deg at 82% -6%, transparent 0deg, rgba(224, 122, 92, .13) 9deg, transparent 19deg); filter: blur(5px); -webkit-mask-image: linear-gradient(#000 35%, transparent); mask-image: linear-gradient(#000 35%, transparent); }
.set--waves::before { inset: 18% -5% auto; height: 300px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='300'%3E%3Cg fill='none' stroke-width='1.2'%3E%3Cpath d='M0 150C75 90 225 210 300 150S525 90 600 150' stroke='%23e0a95f' stroke-opacity='.2'/%3E%3Cpath d='M0 150C75 40 225 260 300 150S525 40 600 150' stroke='%235aa7b2' stroke-opacity='.15'/%3E%3Cpath d='M0 150C75 125 225 175 300 150S525 125 600 150' stroke='%23e07a5c' stroke-opacity='.18'/%3E%3C/g%3E%3C/svg%3E") repeat-x 0 50% / 600px 300px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); animation: waves 16s linear infinite; }
@keyframes waves { to { background-position: 600px 50%; } }

/* Hashtag chips */
.hashtags { display: flex; flex-wrap: wrap; gap: 10px; }
.hashtags li { display: inline-flex; align-items: baseline; padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(224, 169, 95, .28); background: linear-gradient(120deg, rgba(224, 169, 95, .12), rgba(210, 106, 78, .07)); font-size: 15px; font-weight: 800; transition: transform .4s var(--ease-out), border-color .3s; }
.hashtags li span { margin-inline-end: 3px; font-family: var(--mono); font-weight: 700; color: var(--gold); }
.hashtags li:hover { transform: translateY(-3px) rotate(-1.5deg); border-color: rgba(224, 169, 95, .55); }

/* Broadcast monitor frame */
.cx-figure--monitor .cx-art { padding: 14px 14px 18px; border-radius: 26px; background: linear-gradient(180deg, #1f1a16, #110e0c) padding-box, linear-gradient(160deg, rgba(255, 236, 214, .24), rgba(255, 236, 214, .04) 40%, rgba(210, 106, 78, .45)) border-box; }
.cx-figure--monitor .cx-art img { border-radius: 14px; }
.cx-figure--monitor .frame-corners { inset: 30px; top: 30px; }
.cx-figure__onair { position: absolute; top: 28px; left: 28px; right: 28px; z-index: 3; display: flex; justify-content: space-between; gap: 10px; font-size: 10.5px; letter-spacing: .14em; direction: ltr; }
.cx-figure__onair span { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 8px; color: var(--text-2); background: rgba(10, 8, 7, .7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cx-figure__onair span:first-child { color: #fff; background: rgba(194, 58, 53, .88); box-shadow: 0 0 24px rgba(255, 77, 79, .45); }
.cx-figure__onair .rec-dot { background: #fff; box-shadow: 0 0 8px #fff; }
.cx-figure__stand { display: block; width: 26%; height: 30px; margin: -1px auto 0; background: linear-gradient(180deg, #1c1713, #0c0a08); clip-path: polygon(32% 0, 68% 0, 100% 100%, 0 100%); }

/* Mixing console (hero) */
.cx-hero--mixer .cx-hero__visual { width: min(100%, 560px); }
.mixer { position: relative; padding: 18px 18px 20px; border-radius: 22px; border: 1px solid rgba(255, 236, 214, .12); background: linear-gradient(180deg, #1d1814, #0f0c0a); box-shadow: 0 70px 120px -50px rgba(210, 106, 78, .5), inset 0 1px 0 rgba(255, 236, 214, .08); transform: perspective(1400px) rotateX(10deg); transform-origin: 50% 100%; }
.js .mixer { opacity: 0; transform: perspective(1400px) rotateX(26deg) translateY(30px); }
.is-ready .mixer { opacity: 1; transform: perspective(1400px) rotateX(10deg); transition: opacity 1.2s var(--ease-out) .2s, transform 1.8s var(--ease-out) .2s; }
.mixer__screw { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #5a4c40, #1a1511); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5); }
.mixer__screw:nth-child(1) { top: 8px; left: 8px; }
.mixer__screw:nth-child(2) { top: 8px; right: 8px; }
.mixer__screw:nth-child(3) { bottom: 8px; left: 8px; }
.mixer__screw:nth-child(4) { bottom: 8px; right: 8px; }
.mixer__top { display: flex; align-items: center; gap: 12px; margin: 0 6px 14px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: #0a0807; font-size: 10px; letter-spacing: .14em; color: var(--muted); direction: ltr; }
.mixer__top span:first-child { display: inline-flex; align-items: center; gap: 6px; color: #ff7a6e; }
.mixer__wave { display: flex; align-items: center; gap: 2px; height: 18px; margin-left: auto; }
.mixer__wave i { width: 3px; height: 100%; border-radius: 2px; background: var(--teal); animation: wave 1.1s ease-in-out infinite; }
.mixer__wave i:nth-child(2n) { animation-duration: .8s; animation-delay: -.3s; }
.mixer__wave i:nth-child(3n) { animation-duration: 1.4s; animation-delay: -.7s; background: var(--gold); }
.mixer__wave i:nth-child(5n) { animation-delay: -.5s; }
@keyframes wave { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
.mixer__strips { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; direction: ltr; }
.mixer__ch { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 4px; border-radius: 12px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255, 236, 214, .045), rgba(255, 236, 214, .01)); }
.mixer__ch--master { border-color: rgba(224, 169, 95, .38); background: linear-gradient(180deg, rgba(224, 169, 95, .15), rgba(210, 106, 78, .05)); }
.mixer__knob { position: relative; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #3d332b, #15110e 70%); box-shadow: 0 0 0 2px #0b0908, 0 0 0 3px rgba(255, 236, 214, .08); }
.mixer__knob::after { content: ""; position: absolute; top: 3px; left: 50%; width: 2px; height: 8px; margin-left: -1px; border-radius: 2px; background: var(--gold-l); transform-origin: 50% 10px; transform: rotate(var(--k)); }
.mixer__body { display: flex; gap: 6px; height: 150px; }
.mixer__meter { position: relative; width: 6px; overflow: hidden; border-radius: 3px; background: #0a0807; }
.mixer__meter i { position: absolute; inset: auto 0 0; height: calc(var(--lvl) * 100%); background: linear-gradient(0deg, #3f9a4e 0 55%, #e0a95f 55% 80%, #ff5a4f 80% 100%); -webkit-mask-image: repeating-linear-gradient(0deg, #000 0 3px, transparent 3px 5px); mask-image: repeating-linear-gradient(0deg, #000 0 3px, transparent 3px 5px); transform-origin: bottom; animation: vu .9s steps(6) calc(var(--i) * -.23s) infinite alternate; }
@keyframes vu { 0% { transform: scaleY(.5); } 40% { transform: scaleY(.9); } 70% { transform: scaleY(.66); } 100% { transform: scaleY(1); } }
.mixer__fader { position: relative; width: 22px; background: linear-gradient(90deg, transparent 9px, #050403 9px 13px, transparent 13px); }
.mixer__fader::before { content: ""; position: absolute; inset: 6px 0; background: repeating-linear-gradient(0deg, rgba(255, 236, 214, .16) 0 1px, transparent 1px 12px); -webkit-mask-image: linear-gradient(90deg, #000 0 5px, transparent 5px 17px, #000 17px); mask-image: linear-gradient(90deg, #000 0 5px, transparent 5px 17px, #000 17px); }
.mixer__cap { position: absolute; left: 1px; bottom: calc(var(--lvl) * (100% - 26px)); width: 20px; height: 26px; border-radius: 4px; background: linear-gradient(180deg, #4d4238, #221c17 45%, #0f0c0a 50%, #2a231d); box-shadow: 0 6px 10px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 236, 214, .2); animation: fader 7s ease-in-out calc(var(--i) * -1.7s) infinite alternate; }
.mixer__cap::after { content: ""; position: absolute; top: 50%; left: 3px; right: 3px; height: 2px; margin-top: -1px; border-radius: 2px; background: var(--gold-l); }
.mixer__ch--master .mixer__cap::after { background: var(--terra-l); }
@keyframes fader { 0% { translate: 0 0; } 50% { translate: 0 16px; } 100% { translate: 0 -14px; } }
.mixer__name { font-size: 9px; letter-spacing: .1em; color: var(--muted); }
.mixer__ch--master .mixer__name { color: var(--gold-l); }

/* Conversion funnel */
.funnel { position: relative; padding: 26px 0 10px; }
.funnel__layers { display: grid; justify-items: center; gap: 10px; }
.funnel__layer { width: calc(100% - var(--i) * 19%); }
.funnel__band { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 24px 12% 22px; text-align: center; clip-path: polygon(0 0, 100% 0, 91% 100%, 9% 100%); border-top: 1px solid rgba(243, 194, 122, .5); }
.funnel__layer:nth-child(1) .funnel__band { background: linear-gradient(180deg, rgba(90, 167, 178, .3), rgba(90, 167, 178, .08)); border-top-color: rgba(127, 211, 220, .55); }
.funnel__layer:nth-child(2) .funnel__band { background: linear-gradient(180deg, rgba(224, 169, 95, .3), rgba(224, 169, 95, .08)); }
.funnel__layer:nth-child(3) .funnel__band { background: linear-gradient(180deg, rgba(224, 122, 92, .34), rgba(194, 58, 53, .1)); border-top-color: rgba(224, 122, 92, .6); }
.funnel__band strong { font-size: clamp(16px, 1.4vw, 19px); font-weight: 900; }
.funnel__band small { font-size: 10px; letter-spacing: .18em; color: var(--text-2); opacity: .7; }
.funnel__drops { position: absolute; inset: 0 0 50px; z-index: 2; pointer-events: none; }
.funnel__drops i { position: absolute; top: 0; left: var(--x); width: 6px; height: 6px; border-radius: 50%; background: var(--gold-l); box-shadow: 0 0 12px var(--gold); opacity: 0; animation: drop 3.4s cubic-bezier(.5, 0, .8, .6) var(--t) infinite; }
@keyframes drop { 0% { transform: translate(0, 0); opacity: 0; } 12%, 80% { opacity: 1; } 100% { transform: translate(calc((50% - var(--x)) * 0), 300px); opacity: 0; } }
.funnel__out { display: flex; justify-content: center; margin-top: 16px; }
.funnel__out span { padding: 8px 20px; border-radius: 999px; background: var(--grad-fire); color: #1a0d08; font-size: 11px; font-weight: 700; letter-spacing: .2em; box-shadow: 0 0 34px rgba(224, 169, 95, .55); animation: pulse 2.4s ease-in-out infinite; }

/* Channel strips */
.strips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.strips__item { display: flex; }
.strip { position: relative; flex: 1; display: flex; flex-direction: column; padding: 20px 18px 18px; border-radius: 18px; border: 1px solid var(--line-2); background: linear-gradient(180deg, #18130f, #0e0b09); box-shadow: inset 0 1px 0 rgba(255, 236, 214, .05); transition: border-color .4s, transform .5s var(--ease-out); }
.strip:hover { transform: translateY(-4px); border-color: rgba(224, 169, 95, .4); }
.strip__head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.strip__num { font-size: 28px; font-weight: 900; line-height: 1; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.strip__ch { font-size: 10px; letter-spacing: .14em; color: var(--muted); }
.strip__led { width: 9px; height: 9px; margin-inline-start: auto; border-radius: 50%; background: #3f9a4e; box-shadow: 0 0 10px #3f9a4e; animation: blink 2.6s steps(2, jump-none) infinite; }
.strips__item:nth-child(2) .strip__led { animation-delay: -.7s; background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.strips__item:nth-child(3) .strip__led { animation-delay: -1.3s; }
.strips__item:nth-child(4) .strip__led { animation-delay: -1.9s; background: var(--terra-l); box-shadow: 0 0 10px var(--terra-l); }
.strip h3 { margin-top: 14px; font-size: 17.5px; font-weight: 900; line-height: 1.6; }
.strip > p { margin-top: 6px; color: var(--text-2); font-size: 14px; line-height: 1.95; }
.strip__rack { flex: 1; display: grid; align-content: start; gap: 6px; margin-top: 14px; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: #0a0807; }
.strip__rack li { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 7px; background: rgba(255, 236, 214, .025); font-size: 12.5px; font-weight: 700; color: var(--text-2); }
.strip__rack i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 6px var(--gold); }
.strip__rack li:nth-child(even) i { background: var(--teal); box-shadow: 0 0 6px var(--teal); }
.strip__gain { position: relative; height: 6px; margin-top: 16px; border-radius: 3px; background: #0a0807; }
.strip__gain::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--g); border-radius: 3px; background: var(--grad-fire); opacity: .75; }
.strip__gain span { position: absolute; top: 50%; inset-inline-start: calc(var(--g) - 9px); width: 18px; height: 14px; margin-top: -7px; border-radius: 4px; background: linear-gradient(180deg, #4d4238, #1a1511); box-shadow: 0 3px 6px rgba(0, 0, 0, .6); }

/* Orbit cycle */
.cycle { display: grid; grid-template-columns: 1fr minmax(240px, 330px) 1fr; align-items: center; gap: 18px 30px; }
.cycle__steps { display: contents; }
.cycle__ring { position: relative; grid-column: 2; grid-row: 2; aspect-ratio: 1; }
.cycle__step { position: relative; padding: 18px 20px; border-radius: 18px; border: 1px solid var(--line-2); background: var(--panel); }
.cycle__step--1 { grid-column: 2; grid-row: 1; }
.cycle__step--2 { grid-column: 1; grid-row: 2; }
.cycle__step--3 { grid-column: 2; grid-row: 3; }
.cycle__step--4 { grid-column: 3; grid-row: 2; }
.cycle__num { display: inline-block; padding: 3px 7px; border-radius: 6px; border: 1px solid rgba(224, 169, 95, .35); font-size: 11px; color: var(--gold-l); }
.cycle__step h3 { margin-top: 10px; font-size: 18px; font-weight: 900; }
.cycle__step p { margin-top: 6px; color: var(--text-2); font-size: 14.5px; line-height: 1.9; }
.cycle__step small { display: block; margin-top: 10px; font-size: 12px; color: var(--muted); }
.cycle__ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.cycle__track { fill: none; stroke: rgba(255, 236, 214, .08); stroke-width: 2; }
.cycle__arc { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 21 4; stroke-dashoffset: -2; opacity: .75; filter: drop-shadow(0 0 6px rgba(224, 169, 95, .5)); }
.cycle__inner { fill: rgba(255, 236, 214, .02); stroke: rgba(255, 236, 214, .08); stroke-dasharray: 2 6; }
.cycle__comet { position: absolute; inset: 0; animation: spin 8s linear infinite; }
.cycle__comet::before { content: ""; position: absolute; top: calc(6.25% - 7px); left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #ffd49a; box-shadow: 0 0 18px #f3c27a, 0 0 44px rgba(224, 169, 95, .65); }
.cycle__core { position: absolute; inset: 30%; display: grid; place-items: center; align-content: center; gap: 8px; border-radius: 50%; background: radial-gradient(closest-side, rgba(224, 169, 95, .18), transparent); }
.cycle__core svg { position: static; width: 54px; height: 54px; transform: none; }
.cycle__core .mono { font-size: 9.5px; letter-spacing: .2em; color: var(--gold-l); white-space: nowrap; }

/* Level meters + VU */
.levels { overflow: hidden; border-radius: 22px; border: 1px solid var(--line-2); background: linear-gradient(180deg, #15110e, #0d0a08); }
.levels__bar { display: flex; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); font-size: 10.5px; color: var(--muted); direction: ltr; }
.levels__bar span:first-child { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); }
.levels__vu { position: relative; width: min(100% - 40px, 320px); aspect-ratio: 240 / 130; margin: 22px auto 6px; border-radius: 14px; background: linear-gradient(180deg, #f5ead8, #e2d1b6); box-shadow: inset 0 0 0 6px #1a1511, inset 0 14px 30px rgba(0, 0, 0, .25), 0 20px 40px -20px rgba(0, 0, 0, .8); overflow: hidden; }
.levels__vu svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.levels__arc { fill: none; stroke: #2a1f17; stroke-width: 2; }
.levels__arc--hot { stroke: #c23a35; stroke-width: 5; }
.levels__ticks line { stroke: #2a1f17; stroke-width: 2; }
.levels__needle { position: absolute; left: 50%; bottom: 10.8%; width: 2px; height: 70%; margin-left: -1px; border-radius: 2px; background: #1a120d; transform-origin: 50% 100%; animation: needle 2.8s cubic-bezier(.4, 0, .2, 1) infinite alternate; }
.levels__needle::after { content: ""; position: absolute; bottom: -7px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #1a120d; }
@keyframes needle { 0% { transform: rotate(-50deg); } 30% { transform: rotate(14deg); } 55% { transform: rotate(-6deg); } 80% { transform: rotate(40deg); } 100% { transform: rotate(24deg); } }
.levels__vu-label { position: absolute; left: 50%; bottom: 30%; transform: translateX(-50%); font-size: 12px; font-weight: 700; letter-spacing: .24em; color: #2a1f17; }
.levels__rows { display: grid; gap: 14px; padding: 18px 20px 22px; }
.level { display: grid; grid-template-columns: 108px 1fr 58px; align-items: center; gap: 14px; }
.level__label { font-size: 14.5px; font-weight: 800; }
.level__track { position: relative; height: 14px; overflow: hidden; border-radius: 4px; border: 1px solid var(--line); background: #0a0807; }
.level__track i { position: absolute; inset-block: 2px; inset-inline-start: 2px; width: calc(var(--v) * 100% - 4px); background: linear-gradient(270deg, #3f9a4e 0 58%, #e0a95f 58% 82%, #ff5a4f 82%); -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 8px); mask-image: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 8px); transform-origin: right; animation: lvl 1.2s steps(5) calc(var(--i) * -.4s) infinite alternate; }
@keyframes lvl { from { transform: scaleX(.72); } to { transform: scaleX(1); } }
.level__ch { font-size: 10.5px; color: var(--muted); text-align: left; }

/* Rotary-knob KPIs */
@property --kv { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
.kpis-wrap { overflow: hidden; border-radius: 22px; border: 1px solid var(--line-2); background: radial-gradient(80% 140% at 0% 0%, rgba(224, 169, 95, .07), transparent 60%), var(--panel); }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); }
.kpi { --kv: var(--k); display: flex; align-items: center; gap: 18px; padding: 24px; }
.js .kpi[data-reveal] { --kv: 0deg; transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out), filter 1.1s var(--ease-out), --kv 1.8s var(--ease-out) calc(var(--d, 0) * 120ms + .3s); }
.js .kpi[data-reveal].is-in, .reveal-all .kpi { --kv: var(--k); }
.kpi + .kpi { border-inline-start: 1px solid var(--line); }
.kpi__knob { position: relative; flex: none; width: 86px; height: 86px; }
.kpi__knob::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 225deg, var(--gold) 0deg var(--kv), rgba(255, 236, 214, .1) 0 270deg, transparent 0); -webkit-mask-image: radial-gradient(closest-side, transparent 82%, #000 84%); mask-image: radial-gradient(closest-side, transparent 82%, #000 84%); filter: drop-shadow(0 0 6px rgba(224, 169, 95, .5)); }
.kpi:nth-child(2) .kpi__knob::before { background: conic-gradient(from 225deg, var(--teal) 0deg var(--kv), rgba(255, 236, 214, .1) 0 270deg, transparent 0); }
.kpi:nth-child(3) .kpi__knob::before { background: conic-gradient(from 225deg, var(--terra-l) 0deg var(--kv), rgba(255, 236, 214, .1) 0 270deg, transparent 0); }
.kpi__dial { position: absolute; inset: 13px; border-radius: 50%; background: radial-gradient(circle at 40% 32%, #3f352d, #15110e 72%); box-shadow: 0 8px 18px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 236, 214, .15); transform: rotate(calc(var(--kv) - 135deg)); }
.kpi__dial i { position: absolute; top: 6px; left: 50%; width: 3px; height: 14px; margin-left: -1.5px; border-radius: 2px; background: var(--gold-l); box-shadow: 0 0 8px var(--gold); }
.kpi__label { font-size: 13px; font-weight: 700; color: var(--gold); }
.kpi__value { margin-top: 6px; font-size: clamp(1.05rem, .95rem + .5vw, 1.3rem); font-weight: 900; line-height: 1.5; }
.kpi__note { margin-top: 6px; font-size: 13px; line-height: 1.8; color: var(--muted); }
.kpis__note { display: flex; align-items: flex-start; gap: 10px; padding: 14px 20px; border-top: 1px dashed var(--line-2); background: rgba(224, 169, 95, .04); color: var(--text-2); font-size: 13.5px; line-height: 1.95; }
.kpis__note .ico { margin-top: 4px; color: var(--gold); }

/* Social ad cards */
.container > .adcards { margin-top: clamp(28px, 3.4vw, 44px); }
.adcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.adcards > li { display: flex; }
.adcard { flex: 1; display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; border: 1px solid var(--line-2); background: #13100d; transition: transform .5s var(--ease-out), box-shadow .5s, border-color .4s; }
.adcard:hover { transform: translateY(-6px); border-color: rgba(224, 169, 95, .35); box-shadow: 0 40px 70px -40px rgba(210, 106, 78, .55); }
.adcard__top { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.adcard__avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--gold); background: #1f1915; }
.adcard__avatar svg { width: 20px; height: 20px; }
.adcard__who { display: grid; line-height: 1.35; }
.adcard__who b { font-size: 13px; font-weight: 800; }
.adcard__who small { font-size: 9.5px; letter-spacing: .1em; color: var(--muted); }
.adcard__more { display: flex; gap: 3px; margin-inline-start: auto; }
.adcard__more i { width: 4px; height: 4px; border-radius: 50%; background: var(--muted); }
.adcard__media { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; }
.adcard--1 .adcard__media { background: radial-gradient(120% 90% at 80% 0%, rgba(243, 194, 122, .55), transparent 60%), linear-gradient(160deg, #3a2a1d, #1a120d); }
.adcard--2 .adcard__media { background: radial-gradient(120% 90% at 80% 0%, rgba(90, 167, 178, .55), transparent 60%), linear-gradient(160deg, #16292c, #0d1516); }
.adcard--3 .adcard__media { background: radial-gradient(120% 90% at 80% 0%, rgba(224, 122, 92, .55), transparent 60%), linear-gradient(160deg, #3a1d16, #170d0a); }
.adcard--4 .adcard__media { background: radial-gradient(120% 90% at 80% 0%, rgba(194, 58, 53, .5), transparent 60%), linear-gradient(160deg, #2e1418, #140a0c); }
.adcard__media .ico { width: 64px; height: 64px; stroke-width: 1.2; color: rgba(255, 250, 243, .92); filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .5)); transition: transform .8s var(--ease-out); }
.adcard:hover .adcard__media .ico { transform: scale(1.12) rotate(-6deg); }
.adcard__num { position: absolute; bottom: 6px; inset-inline-start: 14px; font-size: 56px; font-weight: 900; line-height: 1; color: rgba(255, 250, 243, .14); }
.adcard__body { flex: 1; padding: 14px 16px 6px; }
.adcard__body h3 { font-size: 17px; font-weight: 900; line-height: 1.6; }
.adcard__body p { margin-top: 6px; color: var(--text-2); font-size: 14px; line-height: 1.9; }
.adcard__actions { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 10px 16px 14px; border-top: 1px solid var(--line); color: var(--muted); }
.adcard__actions .ico { width: 18px; height: 18px; }
.adcard__cta { margin-inline-start: auto; padding: 5px 12px; border-radius: 8px; background: rgba(224, 169, 95, .12); color: var(--gold-l); font-size: 12px; font-weight: 800; }

/* Campaign asset tiles */
.container > .deliver { margin-top: clamp(36px, 4.4vw, 56px); }
.deliver { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: clamp(22px, 4vw, 56px); padding: clamp(24px, 3.4vw, 40px); border-radius: 24px; border: 1px solid var(--line-2); background: radial-gradient(70% 100% at 100% 0%, rgba(90, 167, 178, .08), transparent 60%), linear-gradient(180deg, #15110e, #0f0c0a); }
.deliver__eyebrow { font-size: 13px; font-weight: 700; color: var(--gold); }
.deliver h3 { margin-top: 6px; font-size: clamp(1.25rem, 1rem + .8vw, 1.7rem); font-weight: 900; line-height: 1.55; }
.deliver__copy > p:not(.deliver__eyebrow) { margin-top: 10px; color: var(--text-2); line-height: 2; }
.deliver__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.deliver__grid li { display: flex; flex-direction: column; gap: 12px; min-height: 150px; padding: 18px; border-radius: 18px; border: 1px solid var(--line); background: rgba(255, 236, 214, .03); transition: border-color .4s, background .4s; }
.deliver__grid li:hover { border-color: rgba(224, 169, 95, .35); background: rgba(224, 169, 95, .05); }
.deliver__ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--grad-fire); color: #1a0d08; box-shadow: 0 10px 24px -10px rgba(210, 106, 78, .8); }
.deliver__ico .ico { width: 22px; height: 22px; }
.deliver__txt { font-size: 15px; font-weight: 800; line-height: 1.75; }
.deliver__tag { margin-top: auto; font-size: 9.5px; letter-spacing: .16em; color: var(--muted); }

/* A/B test wireframe (CRO) */
.abtest { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(22px, 4vw, 56px); }
.abtest__screen { padding: 14px; border-radius: 22px; border: 1px solid var(--line-2); background: #100d0b; box-shadow: 0 60px 100px -60px rgba(0, 0, 0, .9); }
.abtest__tabs { display: flex; gap: 6px; margin-bottom: 12px; direction: ltr; }
.abtest__tab { padding: 6px 12px; border-radius: 8px; border: 1px solid var(--line); font-size: 10.5px; letter-spacing: .12em; color: var(--muted); animation: tabA 8s steps(1) infinite; }
.abtest__tab--b { animation-name: tabB; }
@keyframes tabA { 0% { background: var(--gold); color: #1a0d08; border-color: var(--gold); } 50% { background: transparent; color: var(--muted); border-color: var(--line); } }
@keyframes tabB { 0% { background: transparent; color: var(--muted); border-color: var(--line); } 50% { background: var(--teal); color: #0b1516; border-color: var(--teal); } }
.abtest__page { position: relative; aspect-ratio: 4 / 3.1; padding: 6% 7%; overflow: hidden; border-radius: 14px; background: #f3ebdf; }
.abtest__nav { display: flex; gap: 6%; }
.abtest__nav i { width: 14%; height: 6px; border-radius: 3px; background: #cdbfae; }
.abtest__nav i:first-child { width: 22%; background: #2a1f17; }
.abtest__hero { display: grid; justify-items: start; gap: 10px; margin-top: 9%; }
.abtest__h1, .abtest__h2 { height: 18px; border-radius: 4px; background: #2a1f17; }
.abtest__h1 { width: 76%; }
.abtest__h2 { width: 54%; }
.abtest__line { width: 68%; height: 7px; border-radius: 4px; background: #cdbfae; }
.abtest__line--s { width: 46%; }
.abtest__cta { width: 30%; height: 26px; margin-top: 6px; border-radius: 8px; background: #9f4d3e; animation: ctaSwap 8s steps(1) infinite; }
@keyframes ctaSwap { 0% { width: 30%; background: #9f4d3e; box-shadow: none; } 50% { width: 46%; background: #e07a5c; box-shadow: 0 8px 18px rgba(224, 122, 92, .5); } }
.abtest__form { position: absolute; bottom: 8%; inset-inline-end: 7%; display: grid; gap: 7px; width: 42%; padding: 10px; border-radius: 10px; background: #fffaf3; box-shadow: 0 8px 20px rgba(42, 31, 23, .14); }
.abtest__form i { height: 12px; border-radius: 4px; border: 1px solid #d9ccb9; background: #fff; }
.abtest__form .abtest__opt { border-style: dashed; animation: optFade 8s steps(1) infinite; }
@keyframes optFade { 0% { opacity: 1; } 50% { opacity: .12; } }
.abtest__form span { height: 16px; border-radius: 5px; background: #2a1f17; }
.abtest__heat { position: absolute; aspect-ratio: 1; border-radius: 50%; mix-blend-mode: multiply; filter: blur(6px); animation: heat 3s ease-in-out infinite alternate; }
.abtest__heat--1 { top: 16%; right: 4%; width: 34%; background: radial-gradient(closest-side, rgba(194, 58, 53, .5), rgba(224, 169, 95, .32) 55%, transparent); }
.abtest__heat--2 { top: 48%; right: 14%; width: 22%; background: radial-gradient(closest-side, rgba(194, 58, 53, .6), rgba(224, 169, 95, .35) 55%, transparent); animation-delay: -1s; }
.abtest__heat--3 { bottom: 2%; left: 6%; width: 30%; background: radial-gradient(closest-side, rgba(224, 169, 95, .5), rgba(90, 167, 178, .25) 60%, transparent); animation-delay: -2s; }
@keyframes heat { to { transform: scale(1.14); opacity: .75; } }
.abtest__pin { position: absolute; z-index: 2; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #1a120d; color: var(--gold-l); font-size: 12px; font-weight: 800; box-shadow: 0 0 0 3px rgba(255, 250, 243, .92), 0 6px 12px rgba(0, 0, 0, .35); }
.abtest__pin::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(210, 106, 78, .6); animation: ping 2.4s var(--ease-out) infinite; }
.abtest__pin--1 { top: 24%; right: 3%; }
.abtest__pin--2 { top: 57%; right: 36%; }
.abtest__pin--3 { bottom: 34%; left: 4%; }
.abtest__pin--4 { top: 5%; left: 5%; }
.abtest__list { display: grid; gap: 12px; }
.abtest__list li { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--panel); }
.abtest__no { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--grad-fire); color: #1a0d08; font-size: 14px; font-weight: 900; }
.abtest__list h3 { font-size: 16.5px; font-weight: 900; line-height: 1.6; }
.abtest__list p { margin-top: 4px; color: var(--text-2); font-size: 14.5px; line-height: 1.9; }
.container > .abtest + .cx-notes { margin-top: clamp(26px, 3.4vw, 40px); }

/* CTA visual: ON AIR */
.cta__visual--onair { justify-items: center; }
.onair { display: grid; gap: 14px; width: min(100%, 420px); rotate: -2deg; }
.onair__sign { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 24px; border-radius: 18px; border: 2px solid #3a1514; background: linear-gradient(180deg, #2a0f0e, #160807); box-shadow: inset 0 0 30px rgba(0, 0, 0, .6), 0 40px 80px -40px rgba(255, 77, 79, .45); }
.onair__lamp { width: 14px; height: 14px; border-radius: 50%; background: #ff4d4f; box-shadow: 0 0 18px #ff4d4f, 0 0 40px rgba(255, 77, 79, .6); animation: blink 1.6s steps(2, jump-none) infinite; }
.onair__txt { font: 800 clamp(34px, 4.6vw, 52px)/1 var(--mono); letter-spacing: .12em; color: #ff6b5e; text-shadow: 0 0 12px rgba(255, 77, 79, .9), 0 0 40px rgba(255, 77, 79, .55); direction: ltr; animation: neon 5s ease-in-out infinite; }
@keyframes neon { 0%, 91%, 100% { opacity: 1; } 92% { opacity: .35; } 93% { opacity: 1; } 95% { opacity: .6; } 96% { opacity: 1; } }
.onair__timer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-radius: 14px; border: 1px solid var(--line-2); background: #0f0c0a; }
.onair__timer small { font-size: 14px; font-weight: 800; color: var(--gold-l); }
.onair__timer b { font-size: 28px; font-weight: 700; letter-spacing: .06em; color: var(--text); direction: ltr; }
.onair__pairs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.onair__pairs li { display: grid; gap: 4px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 236, 214, .03); }
.onair__pairs small { font-size: 11.5px; color: var(--muted); }
.onair__pairs b { font-size: 13px; font-weight: 800; line-height: 1.5; }

/* ==========================================================================
   Google Ads — every click has a price
   ========================================================================== */
/* Target lock over a sponsored result (hero) */
.cx-hero--scope .cx-hero__visual { width: min(100%, 540px); }
.scope { position: relative; }
.js .scope { opacity: 0; transform: translateY(26px) scale(.96); }
.is-ready .scope { opacity: 1; transform: none; transition: opacity 1.2s var(--ease-out) .2s, transform 1.6s var(--ease-out) .2s; }
.scope__ad { padding: 18px; border-radius: 22px; border: 1px solid var(--line-2); background: linear-gradient(180deg, #17120f, #0e0b09); box-shadow: 0 70px 120px -50px rgba(210, 106, 78, .5); }
.scope__q { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 236, 214, .05); font-size: 15px; font-weight: 700; }
.scope__q .ico { color: var(--muted); }
.scope__caret { width: 2px; height: 18px; background: var(--gold); animation: blink 1s steps(2, jump-none) infinite; }
.scope__result { position: relative; display: grid; gap: 8px; margin-top: 16px; padding: 16px; border-radius: 16px; border: 1px solid rgba(224, 169, 95, .3); background: rgba(224, 169, 95, .06); }
.scope__result--ghost { border-color: var(--line); background: transparent; opacity: .5; }
.scope__meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.scope__meta b { padding: 2px 7px; border-radius: 5px; background: var(--gold); color: #1a0d08; font: 800 11px/1.4 var(--mono); }
.scope__meta span { font-family: var(--mono); }
.scope__h { font-size: 19px; font-weight: 900; line-height: 1.5; color: #8fcad2; }
.scope__result > i { display: block; width: 92%; height: 8px; border-radius: 5px; background: rgba(255, 236, 214, .1); }
.scope__result > i.scope__s { width: 62%; }
.scope__links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.scope__links span { padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(143, 202, 210, .35); color: #8fcad2; font-size: 12px; font-weight: 700; }
.scope__reticle { position: absolute; top: -4%; left: 38%; width: 38%; aspect-ratio: 1; pointer-events: none; animation: aim 7s var(--ease-cine) infinite; }
.scope__reticle svg { width: 100%; height: 100%; overflow: visible; color: var(--gold-l); filter: drop-shadow(0 0 6px currentColor); animation: lockColor 7s infinite; }
.scope__r1 { fill: none; stroke: currentColor; stroke-width: 1.5; opacity: .55; }
.scope__r2 { fill: none; stroke: currentColor; stroke-width: 2; stroke-dasharray: 10 12; transform-box: fill-box; transform-origin: 50% 50%; animation: spin 8s linear infinite; }
.scope__dot { fill: currentColor; }
.scope__x { stroke: currentColor; stroke-width: 2; }
.scope__lock { position: absolute; bottom: -6px; left: 50%; padding: 3px 8px; border-radius: 6px; background: #ff4d4f; color: #fff; font-size: 10px; letter-spacing: .16em; opacity: 0; transform: translateX(-50%); animation: lockOn 7s infinite; }
@keyframes aim { 0% { transform: translate(-70%, 70%) scale(1.1); } 28% { transform: translate(30%, 30%) scale(1.05); } 50%, 88% { transform: translate(0, 0) scale(.88); } 100% { transform: translate(-70%, 70%) scale(1.1); } }
@keyframes lockColor { 0%, 48% { color: var(--gold-l); } 52%, 88% { color: #ff6b5e; } 100% { color: var(--gold-l); } }
@keyframes lockOn { 0%, 50% { opacity: 0; } 54%, 86% { opacity: 1; } 90%, 100% { opacity: 0; } }
.scope__hud { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 18px; direction: ltr; }
.scope__hud span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 10px; letter-spacing: .12em; color: var(--muted); }
.scope__hud i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 236, 214, .15); animation: hudStep 7s steps(1) calc(var(--i) * 1.1s) infinite; }
@keyframes hudStep { 0% { background: var(--gold); box-shadow: 0 0 8px var(--gold); } 30% { background: rgba(255, 236, 214, .15); box-shadow: none; } }

/* Cinema marquee figure (bulb frame) */
.cx-figure--marquee .cx-art { padding: 18px; border-radius: 22px; background: linear-gradient(180deg, #2a1b10, #140d08) padding-box, linear-gradient(160deg, rgba(243, 194, 122, .75), rgba(210, 106, 78, .5)) border-box; }
.cx-figure--marquee .cx-art img { border-radius: 10px; }
.cx-figure__bulbs { position: absolute; inset: 3px; z-index: 2; padding: 10px; border-radius: 19px; pointer-events: none; background: radial-gradient(circle, #ffe7b8 0 2.4px, rgba(255, 190, 110, .5) 3px, transparent 5px) 0 0 / 22px 22px; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: bulbs 1.4s steps(2) infinite; }
@keyframes bulbs { to { background-position: 11px 11px; } }
.cx-figure__plate { position: absolute; bottom: 30px; left: 50%; z-index: 3; padding: 6px 14px; border-radius: 6px; border: 1px solid rgba(243, 194, 122, .5); background: rgba(10, 8, 7, .85); color: var(--gold-l); font-size: 10.5px; letter-spacing: .2em; white-space: nowrap; transform: translateX(-50%); }

/* Keyword chips (match types) */
.kwchips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 580px; }
.kwchips li { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(255, 236, 214, .03); }
.kwchips__type { align-self: flex-start; padding: 2px 7px; border-radius: 5px; background: var(--teal); color: #0b1516; font-size: 9.5px; letter-spacing: .14em; }
.kwchips li:nth-child(even) .kwchips__type { background: var(--gold); color: #1a0d08; }
.kwchips b { font-size: 15.5px; font-weight: 800; }
.kwchips b i { margin-inline: 2px; font-family: var(--mono); font-style: normal; color: var(--gold); }

/* Live bid board */
.bids { overflow: hidden; border-radius: 22px; border: 1px solid var(--line-2); background: #0f0c0a; }
.bids__tape { display: flex; overflow: hidden; white-space: nowrap; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, rgba(224, 169, 95, .12), rgba(210, 106, 78, .06)); font-size: 10.5px; letter-spacing: .16em; color: var(--gold-l); direction: ltr; }
.bids__tape span { flex: none; padding: 9px 0; animation: tape 30s linear infinite; }
@keyframes tape { to { transform: translateX(-100%); } }
.bid { display: grid; grid-template-columns: 64px 1fr 1.25fr 1.25fr 60px; align-items: center; gap: 18px; padding: 18px 22px; border-bottom: 1px solid var(--line); transition: background .3s; }
.bid:last-child { border-bottom: 0; }
.bid:hover { background: rgba(224, 169, 95, .04); }
.bid__lot { font-size: 10.5px; color: var(--muted); }
.bid__label { font-size: 13px; font-weight: 700; color: var(--gold); }
.bid__value { font-size: clamp(1.05rem, .95rem + .5vw, 1.3rem); font-weight: 900; line-height: 1.5; }
.bid__note { font-size: 13.5px; line-height: 1.8; color: var(--muted); }
.bid__live { display: inline-flex; align-items: center; gap: 6px; justify-self: end; font-size: 9.5px; letter-spacing: .14em; color: #ff8a7a; }
.bids__note { display: flex; align-items: flex-start; gap: 10px; padding: 14px 20px; border-top: 1px dashed var(--line-2); background: rgba(224, 169, 95, .04); color: var(--text-2); font-size: 13.5px; line-height: 1.95; }
.bids__note .ico { margin-top: 4px; color: var(--gold); }

/* Hanging price tags */
.container > .ptags { margin-top: clamp(48px, 6vw, 76px); }
.ptags { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.ptags > li { position: relative; display: flex; justify-content: center; padding-top: 30px; }
.ptags > li::before { content: ""; position: absolute; top: -6px; left: 50%; width: 1px; height: 62px; background: linear-gradient(rgba(243, 194, 122, .1), rgba(243, 194, 122, .7)); }
.ptags > li::after { content: ""; position: absolute; top: -10px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.ptag { position: relative; width: 100%; max-width: 300px; padding: 54px 22px 24px; text-align: center; color: #2a1f17; background: linear-gradient(180deg, #f5e6cb, #e6cfa8); clip-path: polygon(24% 0, 76% 0, 100% 15%, 100% 100%, 0 100%, 0 15%); rotate: var(--r); transform-origin: 50% 0; transition: rotate .6s var(--ease-out); }
.ptags > li:nth-child(2) .ptag { background: linear-gradient(180deg, #dcebe7, #bdd6d1); }
.ptags > li:nth-child(3) .ptag { background: linear-gradient(180deg, #f3d9cd, #e5bba9); }
.ptags > li:nth-child(4) .ptag { background: linear-gradient(180deg, #f4e1b9, #e4c487); }
.ptag:hover { animation: swing 1.6s ease-in-out; }
@keyframes swing { 0% { rotate: var(--r); } 20% { rotate: 7deg; } 40% { rotate: -5deg; } 60% { rotate: 3deg; } 80% { rotate: -1deg; } 100% { rotate: 0deg; } }
.ptag__string { display: none; }
.ptag__hole { position: absolute; top: 18px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #0a0807; box-shadow: inset 0 0 0 2px rgba(42, 31, 23, .45); }
.ptag__num { display: block; font-size: 32px; font-weight: 900; line-height: 1; color: #9f4d3e; }
.ptag h3 { margin-top: 10px; font-size: 17px; font-weight: 900; line-height: 1.6; color: #1d150f; }
.ptag p { margin-top: 8px; font-size: 14px; line-height: 1.9; color: #4a3a2e; }
.ptag__code { display: block; margin-top: 14px; padding-top: 10px; border-top: 1px dashed rgba(42, 31, 23, .3); font-size: 10px; letter-spacing: .16em; color: #7d6450; }

/* Printed receipt */
.container > .rcpt { margin-top: clamp(44px, 5.4vw, 68px); }
.rcpt { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: clamp(24px, 4vw, 56px); }
.rcpt__eyebrow { font-size: 13px; font-weight: 700; color: var(--gold); }
.rcpt h3 { margin-top: 6px; font-size: clamp(1.25rem, 1rem + .8vw, 1.7rem); font-weight: 900; line-height: 1.55; }
.rcpt__copy > p:not(.rcpt__eyebrow) { margin-top: 10px; color: var(--text-2); line-height: 2; }
.rcpt__paper { position: relative; justify-self: center; width: min(100%, 390px); padding: 28px 24px 30px; background: #f7f1e6; color: #2a1f17; font-size: 14px; rotate: 1.5deg; filter: drop-shadow(0 40px 50px rgba(0, 0, 0, .7)); }
.rcpt__paper::before, .rcpt__paper::after { content: ""; position: absolute; left: 0; right: 0; height: 12px; }
.rcpt__paper::before { top: -12px; background: linear-gradient(45deg, #f7f1e6 33.33%, transparent 33.33%) 0 0 / 12px 12px, linear-gradient(-45deg, #f7f1e6 33.33%, transparent 33.33%) 0 0 / 12px 12px; transform: scaleY(-1); }
.rcpt__paper::after { bottom: -12px; background: linear-gradient(45deg, #f7f1e6 33.33%, transparent 33.33%) 0 0 / 12px 12px, linear-gradient(-45deg, #f7f1e6 33.33%, transparent 33.33%) 0 0 / 12px 12px; transform: scaleY(-1) rotate(180deg); }
.rcpt__head { display: grid; gap: 4px; padding-bottom: 14px; border-bottom: 1px dashed rgba(42, 31, 23, .35); text-align: center; font-size: 10.5px; letter-spacing: .14em; color: #6b5444; }
.rcpt__head b { font-size: 13px; color: #1d150f; }
.rcpt__items li { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px dotted rgba(42, 31, 23, .28); font-weight: 600; line-height: 1.8; }
.rcpt__items b { flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 3px; border-radius: 50%; background: #2a1f17; color: #f7f1e6; }
.rcpt__items .ico { width: 13px; height: 13px; stroke-width: 3; }
.js .rcpt__items li { opacity: 0; transform: translateY(-5px); transition: opacity .4s, transform .4s var(--ease-out); transition-delay: calc(var(--i) * .2s + .5s); }
.js .rcpt.is-in .rcpt__items li, .reveal-all .rcpt__items li { opacity: 1; transform: none; }
.rcpt__total { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 2px solid #2a1f17; font-weight: 900; }
.rcpt__bars { display: flex; justify-content: center; gap: 2px; height: 40px; margin-top: 18px; }
.rcpt__bars i { width: var(--w); background: #2a1f17; }

/* Conversion event log */
.evlog { overflow: hidden; border-radius: 22px; border: 1px solid var(--line-2); background: #0d0b09; }
.evlog__bar { display: flex; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); font-size: 10.5px; color: var(--muted); direction: ltr; }
.evlog__bar span:first-child { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); }
.evlog__rows { padding: 6px 0; }
.evlog__rows li { display: grid; grid-template-columns: 52px auto 1fr 24px; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px dashed var(--line); }
.evlog__rows li:last-child { border-bottom: 0; }
.evlog__t { font-size: 11px; color: var(--muted); }
.evlog__ev { padding: 3px 8px; border-radius: 6px; border: 1px solid rgba(90, 167, 178, .22); background: rgba(90, 167, 178, .1); font: 600 12px/1.4 var(--mono); color: var(--teal); direction: ltr; }
.evlog__rows li:last-child .evlog__ev { border-color: var(--gold); background: var(--gold); color: #1a0d08; }
.evlog__d { font-size: 14px; font-weight: 600; color: var(--text-2); }
.evlog__ok { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(143, 207, 154, .4); color: #8fcf9a; }
.evlog__ok .ico { width: 12px; height: 12px; stroke-width: 3; }
.js .evlog__rows li { opacity: 0; transform: translateX(12px); transition: opacity .5s, transform .5s var(--ease-out); transition-delay: calc(var(--i) * .28s + .4s); }
.js .evlog.is-in .evlog__rows li, .reveal-all .evlog__rows li { opacity: 1; transform: none; }
.evlog__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--line); background: rgba(255, 236, 214, .02); }
.evlog__chips li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 13.5px; font-weight: 800; }
.evlog__chips .ico { color: var(--gold); }

/* Campaign format screens */
.fmts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.fmts > li { display: flex; }
.fmt { flex: 1; display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; border: 1px solid var(--line-2); background: var(--panel); transition: transform .5s var(--ease-out), border-color .4s; }
.fmt:hover { transform: translateY(-6px); border-color: rgba(224, 169, 95, .35); }
.fmt__screen { position: relative; display: grid; align-content: start; gap: 8px; aspect-ratio: 16 / 9; padding: 18px; overflow: hidden; border-bottom: 1px solid var(--line); background: #0b0908; }
.fmt__q { display: flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line-2); }
.fmt__q i { width: 50%; height: 6px; border-radius: 3px; background: rgba(255, 236, 214, .2); }
.fmt__ad { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.fmt__ad b { padding: 1px 6px; border-radius: 4px; background: var(--gold); color: #1a0d08; font: 800 9px/1.4 var(--mono); }
.fmt__ad i { width: 60%; height: 9px; border-radius: 4px; background: #8fcad2; opacity: .85; }
.fmt__l { display: block; width: 90%; height: 6px; border-radius: 3px; background: rgba(255, 236, 214, .1); }
.fmt__l--s { width: 60%; }
.fmt__player { position: absolute; inset: 14px; border-radius: 12px; background: radial-gradient(80% 80% at 70% 30%, rgba(210, 106, 78, .45), transparent 60%), linear-gradient(160deg, #2a1a12, #120c09); direction: ltr; }
.fmt__play { position: absolute; top: 50%; left: 50%; width: 52px; height: 52px; margin: -26px; border-radius: 50%; background: rgba(255, 250, 243, .92); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); transition: transform .5s var(--ease-out); }
.fmt__play::after { content: ""; position: absolute; top: 50%; left: 56%; border-left: 16px solid #1a0d08; border-block: 10px solid transparent; transform: translate(-50%, -50%); }
.fmt:hover .fmt__play { transform: scale(1.1); }
.fmt__skip { position: absolute; right: 12px; bottom: 22px; padding: 4px 8px; border-radius: 4px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 9px; }
.fmt__bar { position: absolute; left: 12px; right: 12px; bottom: 10px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .2); }
.fmt__bar i { display: block; width: 0; height: 100%; background: var(--gold); animation: vidbar 7s linear infinite; }
@keyframes vidbar { to { width: 100%; } }
.fmt__chart { position: absolute; inset: 18px 18px 14px; display: flex; align-items: flex-end; gap: 8%; border-bottom: 1px solid var(--line-2); }
.fmt__chart i { flex: 1; height: var(--h); border-radius: 6px 6px 0 0; background: linear-gradient(180deg, var(--teal), rgba(90, 167, 178, .2)); transform-origin: bottom; transition: transform 1s var(--ease-out); }
.fmt__chart i:last-child { background: var(--grad-fire); }
.js .fmts > li[data-reveal] .fmt__chart i { transform: scaleY(.08); }
.js .fmts > li.is-in .fmt__chart i, .reveal-all .fmt__chart i { transform: none; }
.fmt__chart i:nth-child(2) { transition-delay: .1s; } .fmt__chart i:nth-child(3) { transition-delay: .2s; } .fmt__chart i:nth-child(4) { transition-delay: .3s; } .fmt__chart i:nth-child(5) { transition-delay: .4s; } .fmt__chart i:nth-child(6) { transition-delay: .5s; }
.fmt__body { padding: 18px 20px 22px; }
.fmt__tag { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 800; color: var(--gold); }
.fmt__tag .mono { font-family: var(--font); font-size: 22px; font-weight: 900; color: var(--text); }
.fmt__body h3 { margin-top: 8px; font-size: 18px; font-weight: 900; line-height: 1.6; }
.fmt__body p { margin-top: 6px; color: var(--text-2); font-size: 14.5px; line-height: 1.95; }

/* Certificate seals (expertise) */
.certs { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(22px, 4vw, 56px); padding: clamp(24px, 3.4vw, 40px); border-radius: 24px; border: 1px solid rgba(224, 169, 95, .3); background: radial-gradient(60% 120% at 100% 50%, rgba(224, 169, 95, .1), transparent 60%), linear-gradient(180deg, #17120e, #0f0c0a); }
.certs__eyebrow { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 800; color: var(--gold); }
.certs__text { margin-top: 10px; font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem); font-weight: 700; line-height: 2; }
.certs__text a { color: var(--gold-l); border-bottom: 1px solid rgba(224, 169, 95, .35); }
.certs__list { display: grid; gap: 12px; }
.cert { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 18px; border: 1px solid var(--line-2); background: rgba(255, 236, 214, .03); transition: border-color .4s, background .4s; }
.cert:hover, .cert:focus-visible { border-color: rgba(224, 169, 95, .5); background: rgba(224, 169, 95, .06); }
.cert__seal { position: relative; flex: none; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: conic-gradient(from 0deg, #f3c27a, #d26a4e, #c23a35, #5aa7b2, #f3c27a); box-shadow: 0 10px 24px -8px rgba(210, 106, 78, .7); }
.cert__seal::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 1px dashed rgba(243, 194, 122, .5); background: #120e0b; }
.cert__seal svg { position: relative; width: 28px; height: 28px; }
.cert:hover .cert__seal { animation: spin 6s linear infinite; }
.cert__txt { display: grid; gap: 2px; }
.cert__txt strong { font-size: 15.5px; font-weight: 800; }
.cert__txt small { font-size: 12.5px; color: var(--muted); }
.cert__go { margin-inline-start: auto; color: var(--gold-l); }

/* Query → conversion journey */
.journey { position: relative; }
.journey__track { position: absolute; top: 34px; left: 12.5%; right: 12.5%; height: 2px; background: repeating-linear-gradient(90deg, rgba(255, 236, 214, .28) 0 6px, transparent 6px 12px); }
.journey__cursor { position: absolute; top: -12px; right: 0; width: 26px; height: 26px; margin-right: -6px; color: var(--gold-l); filter: drop-shadow(0 4px 10px rgba(224, 169, 95, .6)); animation: travel 9s var(--ease-cine) infinite; }
.journey__cursor svg { width: 100%; height: 100%; }
.journey__cursor path { fill: currentColor; stroke: #1a0d08; stroke-width: 1.2; }
@keyframes travel { 0%, 10% { right: 0; opacity: 1; } 25%, 35% { right: 33.33%; } 50%, 60% { right: 66.66%; } 75%, 92% { right: 100%; opacity: 1; } 97% { opacity: 0; } 100% { right: 0; opacity: 0; } }
.journey__stops { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.journey__stops li { position: relative; padding-top: 62px; }
.journey__dot { position: absolute; top: 26px; right: 50%; width: 18px; height: 18px; margin-right: -9px; border-radius: 50%; border: 2px solid var(--gold); background: #0a0807; box-shadow: 0 0 0 6px rgba(224, 169, 95, .08); animation: dotOn 9s infinite; }
.journey__stops li:nth-child(2) .journey__dot { animation-delay: 2.25s; }
.journey__stops li:nth-child(3) .journey__dot { animation-delay: 4.5s; }
.journey__stops li:nth-child(4) .journey__dot { animation-delay: 6.75s; }
@keyframes dotOn { 0%, 12% { background: var(--gold); box-shadow: 0 0 18px var(--gold), 0 0 0 6px rgba(224, 169, 95, .2); } 22%, 100% { background: #0a0807; box-shadow: 0 0 0 6px rgba(224, 169, 95, .08); } }
.journey__card { height: 100%; padding: 18px 20px; border-radius: 18px; border: 1px solid var(--line-2); background: var(--panel); }
.journey__num { font-size: 11px; color: var(--gold); }
.journey__q { margin-top: 6px; font-size: 13.5px; font-weight: 700; color: var(--teal); }
.journey__card h3 { margin-top: 8px; font-size: 18px; font-weight: 900; line-height: 1.6; }
.journey__card p:not(.journey__q) { margin-top: 6px; color: var(--text-2); font-size: 14.5px; line-height: 1.9; }
.journey__card small { display: block; margin-top: 10px; font-size: 12px; color: var(--muted); }
.journey__tip { display: flex; align-items: flex-start; gap: 12px; margin-top: 28px; padding: 16px 20px; border-radius: 16px; border: 1px solid rgba(224, 169, 95, .35); background: linear-gradient(110deg, rgba(243, 194, 122, .13), rgba(210, 106, 78, .05)); font-weight: 600; line-height: 2; }
.journey__tip .ico { margin-top: 5px; color: var(--gold); }

/* CTA visual: ad click */
.cta__visual--adclick { justify-items: center; }
.adclick { position: relative; width: min(100%, 440px); rotate: -2deg; }
.adclick__card { position: relative; display: grid; gap: 10px; overflow: hidden; padding: 22px; border-radius: 22px; border: 1px solid rgba(224, 169, 95, .4); background: linear-gradient(180deg, #19140f, #100c0a); box-shadow: 0 60px 100px -50px rgba(0, 0, 0, .9); }
.adclick__meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.adclick__meta b { padding: 2px 7px; border-radius: 5px; background: var(--gold); color: #1a0d08; font: 800 11px/1.4 var(--mono); }
.adclick__meta span { font-family: var(--mono); }
.adclick__h { font-size: 21px; font-weight: 900; line-height: 1.5; color: #8fcad2; }
.adclick__card > i { display: block; height: 8px; border-radius: 4px; background: rgba(255, 236, 214, .1); }
.adclick__card > i.adclick__s { width: 70%; }
.adclick__links { display: flex; flex-wrap: wrap; gap: 6px; }
.adclick__links span { padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(143, 202, 210, .35); color: #8fcad2; font-size: 12px; font-weight: 700; }
.adclick__ripple { position: absolute; top: 34%; left: 40%; width: 80px; height: 80px; margin: -40px; border-radius: 50%; border: 2px solid rgba(243, 194, 122, .85); opacity: 0; animation: ripple 5s ease-out infinite; }
@keyframes ripple { 0%, 46% { opacity: 0; transform: scale(.2); } 50% { opacity: 1; } 80%, 100% { opacity: 0; transform: scale(2.2); } }
.adclick__cursor { position: absolute; top: 34%; left: 40%; width: 34px; height: 34px; color: #fffaf3; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .6)); animation: clickMove 5s var(--ease-cine) infinite; }
.adclick__cursor svg { width: 100%; height: 100%; }
.adclick__cursor path { fill: currentColor; stroke: #1a0d08; stroke-width: 1.2; }
@keyframes clickMove { 0% { transform: translate(90px, 110px); } 40% { transform: translate(0, 0); } 47% { transform: translate(0, 0) scale(.82); } 54%, 100% { transform: translate(0, 0) scale(1); } }

/* ==========================================================================
   AI automation — workflow control room with a human checkpoint
   ========================================================================== */
/* Node graph (hero) */
.cx-hero--flow .cx-hero__visual { width: min(100%, 540px); }
.flow { position: relative; aspect-ratio: 520 / 440; margin-bottom: 52px; }
.js .flow { opacity: 0; transform: scale(.94); }
.is-ready .flow { opacity: 1; transform: none; transition: opacity 1.2s var(--ease-out) .2s, transform 1.6s var(--ease-out) .2s; }
.flow__wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.flow__wire { fill: none; stroke: rgba(255, 236, 214, .16); stroke-width: 2; stroke-dasharray: 3 6; vector-effect: non-scaling-stroke; }
.flow__pulse { fill: none; stroke: var(--gold-l); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 9 220; stroke-dashoffset: 9; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px var(--gold)); animation: flowPulse var(--dur) linear var(--del) infinite; }
.flow__pulse--h { stroke: #9ad7de; filter: drop-shadow(0 0 6px var(--teal)); }
@keyframes flowPulse { to { stroke-dashoffset: -100; } }
.flow__node { position: absolute; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 10px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(16, 13, 11, .94); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .8); white-space: nowrap; transform: translate(-50%, -50%); }
.flow__ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: rgba(224, 169, 95, .1); color: var(--gold-l); }
.flow__txt { display: grid; line-height: 1.35; }
.flow__txt b { font-size: 11px; letter-spacing: .12em; color: var(--text); }
.flow__txt small { font-size: 11.5px; color: var(--muted); }
.flow__node--ai { flex-direction: column; gap: 10px; padding: 0; border: 0; background: none; box-shadow: none; }
.flow__node--ai .flow__txt { text-align: center; }
.flow__chip { position: relative; display: grid; place-items: center; width: 96px; height: 96px; border-radius: 22px; border: 1px solid rgba(224, 169, 95, .55); background: linear-gradient(160deg, #2a1c12, #120c09); box-shadow: 0 0 0 6px rgba(224, 169, 95, .06), 0 0 50px rgba(224, 169, 95, .35); animation: chipPulse 2.4s ease-in-out infinite; }
.flow__chip::before, .flow__chip::after { content: ""; position: absolute; pointer-events: none; }
.flow__chip::before { inset: -9px 16px; background: repeating-linear-gradient(90deg, rgba(224, 169, 95, .65) 0 3px, transparent 3px 11px) top / 100% 7px no-repeat, repeating-linear-gradient(90deg, rgba(224, 169, 95, .65) 0 3px, transparent 3px 11px) bottom / 100% 7px no-repeat; }
.flow__chip::after { inset: 16px -9px; background: repeating-linear-gradient(0deg, rgba(224, 169, 95, .65) 0 3px, transparent 3px 11px) left / 7px 100% no-repeat, repeating-linear-gradient(0deg, rgba(224, 169, 95, .65) 0 3px, transparent 3px 11px) right / 7px 100% no-repeat; }
.flow__chip svg { width: 46px; height: 46px; }
@keyframes chipPulse { 50% { box-shadow: 0 0 0 10px rgba(224, 169, 95, .03), 0 0 70px rgba(224, 169, 95, .5); } }
.flow__node--human { border-color: rgba(90, 167, 178, .5); }
.flow__node--human .flow__ico, .flow__node--rules .flow__ico { background: rgba(90, 167, 178, .14); color: var(--teal); }
.flow__gate { position: absolute; top: -12px; left: 50%; padding: 2px 8px; border-radius: 6px; font-size: 9px; letter-spacing: .14em; transform: translateX(-50%); animation: gate 3.2s steps(1) infinite; }
@keyframes gate { 0% { background: rgba(90, 167, 178, .22); color: var(--text-2); } 55% { background: var(--teal); color: #0b1516; } }
.flow__hud { position: absolute; left: 0; right: 0; bottom: -50px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; direction: ltr; }
.flow__hud span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 10px; letter-spacing: .12em; color: var(--muted); }

/* Integrated-circuit feature chips */
.icchips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.icchips > li { display: flex; }
.icchip { position: relative; flex: 1; padding: 15px 0; }
.icchip__pins { position: absolute; top: 0; left: 26px; right: 26px; display: flex; justify-content: space-between; height: 16px; }
.icchip__pins i { width: 8px; height: 100%; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, #e0a95f, #7d5a30); transition: background .4s, box-shadow .4s; }
.icchip__pins--b { top: auto; bottom: 0; }
.icchip__pins--b i { border-radius: 0 0 2px 2px; background: linear-gradient(0deg, #e0a95f, #7d5a30); }
.icchip__die { position: relative; height: 100%; padding: 28px 24px 26px; border-radius: 10px; border: 1px solid rgba(224, 169, 95, .3); background: linear-gradient(160deg, #1d1712, #0e0b09); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); transition: border-color .4s, box-shadow .4s; }
.icchip__die::before { content: ""; position: absolute; inset: 8px; border-radius: 6px; border: 1px dashed rgba(224, 169, 95, .16); pointer-events: none; }
.icchip__notch { position: absolute; top: 15px; left: 50%; width: 30px; height: 14px; margin-left: -15px; border: 1px solid rgba(224, 169, 95, .3); border-top: 0; border-radius: 0 0 15px 15px; background: #0a0807; }
.icchip__code { font-size: 10px; letter-spacing: .14em; color: var(--gold); direction: ltr; text-align: right; }
.icchip h3 { margin-top: 10px; font-size: 18px; font-weight: 900; line-height: 1.6; }
.icchip__die > p:not(.icchip__code) { margin-top: 8px; color: var(--text-2); font-size: 14.5px; line-height: 1.95; }
.icchip:hover .icchip__die { border-color: rgba(224, 169, 95, .6); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9), 0 0 40px rgba(224, 169, 95, .14); }
.icchip:hover .icchip__pins i { background: linear-gradient(180deg, #ffd49a, #e0a95f); box-shadow: 0 0 8px rgba(243, 194, 122, .6); }

/* Automation toggle panel */
.tgl { overflow: hidden; border-radius: 22px; border: 1px solid var(--line-2); background: #0f0c0a; }
.tgl__bar { display: flex; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); font-size: 10.5px; color: var(--muted); direction: ltr; }
.tgl__list li { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.tgl__list li:last-child { border-bottom: 0; }
.tgl__ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(224, 169, 95, .08); color: var(--gold-l); }
.tgl__txt { flex: 1; font-size: 14.5px; font-weight: 700; line-height: 1.7; }
.tgl__sw { position: relative; flex: none; width: 42px; height: 24px; border-radius: 999px; background: var(--teal); box-shadow: 0 0 12px rgba(90, 167, 178, .45); }
.tgl__sw i { position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fffaf3; transform: translateX(-18px); }
.js .tgl__sw { background: rgba(255, 236, 214, .1); box-shadow: none; transition: background .4s calc(var(--i) * .15s + .4s), box-shadow .4s calc(var(--i) * .15s + .4s); }
.js .tgl__sw i { transform: none; transition: transform .45s var(--ease-out) calc(var(--i) * .15s + .4s); }
.js .tgl.is-in .tgl__sw, .reveal-all .tgl__sw { background: var(--teal); box-shadow: 0 0 12px rgba(90, 167, 178, .45); }
.js .tgl.is-in .tgl__sw i, .reveal-all .tgl__sw i { transform: translateX(-18px); }

/* Isometric layer stack */
.stk { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: clamp(28px, 5vw, 72px); }
.stk__iso { position: relative; height: 400px; }
.stk__plate { position: absolute; top: calc(30px + var(--i) * 74px); left: 50%; z-index: calc(10 - var(--i)); width: 250px; height: 250px; margin-left: -125px; border-radius: 22px; border: 1px solid rgba(224, 169, 95, .5); background: linear-gradient(135deg, rgba(224, 169, 95, .22), rgba(26, 20, 15, .92) 60%); box-shadow: 0 0 40px rgba(224, 169, 95, .12); transform: rotateX(60deg) rotateZ(-45deg); animation: stkFloat 5s ease-in-out calc(var(--i) * -.7s) infinite; }
.stk__plate:nth-child(2) { border-color: rgba(90, 167, 178, .55); background: linear-gradient(135deg, rgba(90, 167, 178, .24), rgba(18, 22, 22, .92) 60%); }
.stk__plate:nth-child(3) { border-color: rgba(224, 122, 92, .55); background: linear-gradient(135deg, rgba(224, 122, 92, .24), rgba(26, 16, 13, .92) 60%); }
.stk__plate:nth-child(4) { border-color: rgba(143, 207, 154, .5); background: linear-gradient(135deg, rgba(143, 207, 154, .2), rgba(14, 20, 15, .92) 60%); }
.stk__plate b { position: absolute; bottom: 16px; left: 18px; font-size: 13px; letter-spacing: .14em; color: var(--gold-l); }
@keyframes stkFloat { 50% { translate: 0 -8px; } }
.stk__list { display: grid; gap: 12px; }
.stk__list li { display: flex; align-items: flex-start; gap: 16px; padding: 18px 20px; border-radius: 18px; border: 1px solid var(--line-2); background: var(--panel); }
.stk__num { flex: none; font-size: 30px; font-weight: 900; line-height: 1; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stk__list h3 { font-size: 17.5px; font-weight: 900; line-height: 1.6; }
.stk__list p { margin-top: 4px; color: var(--text-2); font-size: 14.5px; line-height: 1.9; }

/* Readiness test runner */
.tst { overflow: hidden; border-radius: 22px; border: 1px solid var(--line-2); background: #0d0b09; }
.tst__bar { display: flex; justify-content: space-between; gap: 12px; padding: 12px 18px; font-size: 10.5px; color: var(--muted); direction: ltr; }
.tst__sum { color: #8fcf9a; }
.tst__progress { height: 3px; background: rgba(255, 236, 214, .06); }
.tst__progress i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #3f9a4e, #8fcf9a); }
.js .tst__progress i { width: 0; transition: width 2.4s var(--ease-out) .3s; }
.js .tst.is-in .tst__progress i, .reveal-all .tst__progress i { width: 100%; }
.tst__list { display: grid; grid-template-columns: 1fr 1fr; }
.tst__list li { display: flex; align-items: flex-start; gap: 14px; padding: 20px 22px; border-top: 1px solid var(--line); }
.tst__list li:nth-child(odd) { border-inline-end: 1px solid var(--line); }
.tst__state { flex: none; padding: 3px 8px; border-radius: 6px; background: #8fcf9a; color: #0b160d; font-size: 10px; letter-spacing: .1em; }
.js .tst__state { background: rgba(255, 236, 214, .08); color: var(--muted); transition: background .3s calc(var(--i) * .5s + .6s), color .3s calc(var(--i) * .5s + .6s); }
.js .tst.is-in .tst__state, .reveal-all .tst__state { background: #8fcf9a; color: #0b160d; }
.tst__id { font: 500 11px/1.4 var(--mono); color: var(--teal); text-align: right; }
.tst__list h3 { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; font-size: 17px; font-weight: 900; line-height: 1.6; }
.tst__num { font-size: 14px; color: var(--gold); }
.tst__list p:not(.tst__id) { margin-top: 6px; color: var(--text-2); font-size: 14.5px; line-height: 1.9; }

/* Scenario: call → draft → CRM */
.scn { display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: clamp(28px, 5vw, 64px); }
.scn__eyebrow { font-size: 14px; font-weight: 700; color: var(--gold); }
.scn__title { margin-top: 8px; font-size: clamp(1.6rem, 1rem + 1.8vw, 2.6rem); font-weight: 900; line-height: 1.4; text-wrap: balance; }
.scn__copy > p:not(.scn__eyebrow) { margin-top: 14px; color: var(--text-2); line-height: 2.05; }
.scn__flow { position: relative; display: grid; gap: 12px; }
.scn__flow::before { content: ""; position: absolute; top: 22px; bottom: 22px; inset-inline-start: 18px; width: 2px; background: linear-gradient(var(--teal), var(--gold), #8fcf9a); opacity: .55; }
.scn__panel { position: relative; margin-inline-start: 42px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--panel); }
.scn__panel::before { content: ""; position: absolute; top: 20px; inset-inline-start: -30px; width: 12px; height: 12px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.scn__panel--chat::before { background: var(--teal); box-shadow: 0 0 10px var(--teal); }
.scn__panel--crm::before { background: #8fcf9a; box-shadow: 0 0 10px #8fcf9a; }
.scn__label { display: block; margin-bottom: 10px; font-size: 10px; letter-spacing: .14em; color: var(--muted); }
.scn__msg { width: fit-content; max-width: 84%; margin-top: 6px; padding: 8px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.8; background: rgba(255, 236, 214, .06); }
.scn__msg--out { margin-inline-start: auto; background: rgba(90, 167, 178, .14); }
.scn__panel--draft b { display: block; padding: 10px 12px; border-radius: 10px; border: 1px dashed rgba(224, 169, 95, .45); background: rgba(224, 169, 95, .06); font-size: 14px; font-weight: 700; line-height: 1.9; }
.scn__panel--draft > i { display: block; width: 90%; height: 7px; margin-top: 8px; border-radius: 4px; background: rgba(255, 236, 214, .08); }
.scn__panel--draft > i.scn__s { width: 60%; }
.scn__approve { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(90, 167, 178, .5); color: var(--teal); font-size: 12.5px; font-weight: 800; animation: pulse 2.4s ease-in-out infinite; }
.scn__saved { display: inline-flex; align-items: center; gap: 8px; color: #8fcf9a; font-size: 13.5px; font-weight: 800; }
.container > .scn + .scn__aside { margin-top: clamp(24px, 3vw, 36px); }
.scn__aside { display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px; border-radius: 16px; border: 1px dashed rgba(194, 58, 53, .5); background: rgba(194, 58, 53, .06); }
.scn__aside .ico { margin-top: 5px; color: #ff8a7a; }
.scn__aside p { color: var(--text-2); line-height: 2; }

/* Handover file tree */
.ft { overflow: hidden; border-radius: 22px; border: 1px solid var(--line-2); background: #0d0b09; }
.ft__bar { display: flex; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); font-size: 10.5px; color: var(--muted); direction: ltr; }
.ft__root { display: flex; align-items: center; gap: 8px; padding: 14px 20px 6px; font-size: 13px; color: var(--gold-l); }
.ft__list { padding: 0 20px 16px; }
.ft__list li { position: relative; display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px; padding: 10px 0; padding-inline-start: 22px; }
.ft__branch { position: absolute; top: 0; bottom: 50%; inset-inline-start: 6px; width: 12px; border-inline-start: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); border-end-start-radius: 5px; }
.ft__list li:not(:last-child)::before { content: ""; position: absolute; top: 50%; bottom: 0; inset-inline-start: 6px; border-inline-start: 1px solid var(--line-2); }
.ft__list .ico { color: var(--teal); }
.ft__name { font-size: 14.5px; font-weight: 700; line-height: 1.7; }
.ft__file { padding: 3px 8px; border-radius: 6px; background: rgba(255, 236, 214, .04); font: 500 11.5px/1.4 var(--mono); color: var(--muted); }
.js .ft__list li { opacity: 0; transform: translateX(10px); transition: opacity .5s, transform .5s var(--ease-out); transition-delay: calc(var(--i) * .15s + .3s); }
.js .ft.is-in .ft__list li, .reveal-all .ft__list li { opacity: 1; transform: none; }

/* Hub and spokes */
.hub { position: relative; display: grid; grid-template-columns: 1fr minmax(150px, .55fr) 1fr; grid-template-areas: "s1 . s2" ". core ." "s3 . s4"; align-items: center; gap: 26px 0; }
.hub__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.hub__lines path { fill: none; stroke: rgba(224, 169, 95, .35); stroke-width: 1.5; stroke-dasharray: 4 6; vector-effect: non-scaling-stroke; animation: hubDash 1.6s linear infinite; }
@keyframes hubDash { to { stroke-dashoffset: -20; } }
.hub__core { position: relative; z-index: 1; grid-area: core; justify-self: center; display: grid; place-items: center; align-content: center; gap: 8px; width: 140px; height: 140px; border-radius: 50%; border: 1px solid rgba(224, 169, 95, .45); background: radial-gradient(closest-side, rgba(224, 169, 95, .25), rgba(18, 13, 10, .96) 72%); box-shadow: 0 0 60px rgba(224, 169, 95, .2); }
.hub__core::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 1px solid rgba(224, 169, 95, .35); animation: ping 3s var(--ease-out) infinite; }
.hub__core svg { width: 54px; height: 54px; }
.hub__core .mono { font-size: 10px; letter-spacing: .2em; color: var(--gold-l); }
.hub__sats { display: contents; }
.hub__sat { position: relative; z-index: 1; }
.hub__sat--1 { grid-area: s1; } .hub__sat--2 { grid-area: s2; } .hub__sat--3 { grid-area: s3; } .hub__sat--4 { grid-area: s4; }
.hub__sat a { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 18px; border: 1px solid var(--line-2); background: rgba(15, 12, 10, .96); transition: border-color .4s, transform .5s var(--ease-out); }
.hub__sat a:hover, .hub__sat a:focus-visible { transform: translateY(-4px); border-color: rgba(224, 169, 95, .5); }
.hub__ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: rgba(90, 167, 178, .12); color: var(--teal); }
.hub__txt { display: grid; gap: 4px; }
.hub__txt strong { font-size: 16.5px; font-weight: 900; }
.hub__txt small { font-size: 13px; line-height: 1.8; color: var(--muted); }
.hub__go { margin-inline-start: auto; color: var(--gold-l); transition: transform .4s var(--ease-out); }
.hub__sat a:hover .hub__go { transform: translateX(-5px); }

/* CTA visual: RUN switch */
.cta__visual--run { justify-items: center; }
.runsw { display: grid; gap: 16px; width: min(100%, 380px); }
.runsw__plate { display: grid; justify-items: center; gap: 14px; padding: 26px 24px; border-radius: 22px; border: 1px solid rgba(255, 236, 214, .12); background: linear-gradient(180deg, #221b15, #110d0b); box-shadow: inset 0 1px 0 rgba(255, 236, 214, .08), 0 50px 90px -40px rgba(0, 0, 0, .9); }
.runsw__lbl { font-size: 11px; letter-spacing: .24em; color: var(--muted); }
.runsw__slot { position: relative; width: 120px; height: 56px; border-radius: 999px; background: #0a0807; box-shadow: inset 0 3px 8px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 236, 214, .08); direction: ltr; }
.runsw__slot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, transparent, rgba(143, 207, 154, .45)); opacity: 0; animation: slotOn 6s .6s infinite; }
@keyframes slotOn { 0%, 14% { opacity: 0; } 24%, 85% { opacity: 1; } 100% { opacity: 0; } }
.runsw__lever { position: absolute; z-index: 1; top: 6px; left: 6px; width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff2dc, #e0a95f 45%, #9f4d3e); box-shadow: 0 6px 14px rgba(0, 0, 0, .6), 0 0 20px rgba(224, 169, 95, .4); animation: lever 6s var(--ease-cine) .6s infinite; }
@keyframes lever { 0%, 10% { left: 6px; } 25%, 85% { left: 70px; } 100% { left: 6px; } }
.runsw__state { display: flex; gap: 52px; font-size: 11px; letter-spacing: .2em; direction: ltr; }
.runsw__state b:first-child { color: var(--muted); }
.runsw__state b:last-child { color: #8fcf9a; }
.runsw__leds { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; direction: ltr; }
.runsw__leds li { display: grid; justify-items: center; gap: 6px; padding: 10px 6px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 236, 214, .03); font: 600 9.5px/1.2 var(--mono); letter-spacing: .12em; color: var(--muted); }
.runsw__leds i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 236, 214, .12); animation: ledRun 6s steps(1) calc(2.1s + var(--i) * .45s) infinite; }
@keyframes ledRun { 0% { background: #8fcf9a; box-shadow: 0 0 10px #8fcf9a; } 55%, 100% { background: rgba(255, 236, 214, .12); box-shadow: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
	.cinema-sec--sticky .cinema-split__copy { position: static; }
	.cx-hero--radar .cx-hero__visual { position: relative; top: auto; left: auto; z-index: 1; width: min(100%, 440px); margin: 34px auto 0; opacity: 1; pointer-events: auto; }
	.catalog, .issues { grid-template-columns: 1fr 1fr; }
	.aiw { grid-template-columns: 1fr; }
	.aiw__panel { position: relative; top: auto; }
	.dossier__body { grid-template-columns: 1fr; }
	.cx-hero--mixer .cx-hero__visual { position: relative; top: auto; left: auto; z-index: 1; width: min(100%, 520px); margin: 34px auto 0; opacity: 1; pointer-events: auto; }
	.strips, .adcards { grid-template-columns: 1fr 1fr; }
	.kpis { grid-template-columns: 1fr; }
	.kpi + .kpi { border-inline-start: 0; border-top: 1px solid var(--line); }
	.deliver, .abtest { grid-template-columns: 1fr; }
	.cycle { grid-template-columns: 1fr 1fr; }
	.cycle__ring { grid-column: 1 / -1; grid-row: 1; width: min(70%, 280px); justify-self: center; }
	.cycle__step--1, .cycle__step--2, .cycle__step--3, .cycle__step--4 { grid-column: auto; grid-row: auto; }
	.cx-hero--scope .cx-hero__visual { position: relative; top: auto; left: auto; z-index: 1; width: min(100%, 520px); margin: 34px auto 0; opacity: 1; pointer-events: auto; }
	.ptags { grid-template-columns: 1fr 1fr; row-gap: 44px; }
	.rcpt, .certs { grid-template-columns: 1fr; }
	.fmts { grid-template-columns: 1fr; }
	.fmt { flex-direction: row; }
	.fmt__screen { flex: none; width: 40%; aspect-ratio: auto; border-bottom: 0; border-inline-end: 1px solid var(--line); }
	.journey__stops { grid-template-columns: 1fr 1fr; }
	.journey__track { display: none; }
	.journey__stops li { padding-top: 0; }
	.journey__dot { display: none; }
	.bid { grid-template-columns: 56px 1fr 1.2fr 56px; }
	.bid__note { grid-column: 2 / 4; }
	.cx-hero--flow .cx-hero__visual { position: relative; top: auto; left: auto; z-index: 1; width: min(100%, 500px); margin: 34px auto 0; opacity: 1; pointer-events: auto; }
	.icchips { grid-template-columns: 1fr; max-width: 640px; }
	.stk, .scn, .tst__list { grid-template-columns: 1fr; }
	.tst__list li:nth-child(odd) { border-inline-end: 0; }
	.stk__iso { height: 340px; }
	.hub { grid-template-columns: 1fr; grid-template-areas: "core" "s1" "s2" "s3" "s4"; gap: 12px; }
	.hub__lines { display: none; }
}
@media (max-width: 640px) {
	.cx-hero--radar .cx-hero__visual { left: auto; top: auto; width: min(100%, 340px); opacity: 1; }
	.radar__label { padding: 4px 7px; }
	.radar__label small { display: none; }
	.radar__label b { font-size: 10px; }
	.radar__blip--r .radar__label { left: auto; right: 12px; }
	.radar__blip--l .radar__label { right: auto; left: 12px; }
	.radar__hud span:nth-child(2) { display: none; }
	.attach { display: flex; }
	.sigchips { grid-template-columns: 1fr; }
	.crawl__step { grid-template-columns: 56px 1fr; }
	.crawl__main { padding: 16px; }
	.crawl__num { font-size: 20px; }
	.readouts__grid { grid-template-columns: 1fr; }
	.readout + .readout { border-inline-start: 0; border-top: 1px solid var(--line); }
	.catalog, .issues { grid-template-columns: 1fr; }
	.catalog__card { rotate: 0deg; }
	.serp__results { padding-inline: 18px; }
	.serp__bar { padding: 12px; }
	.serp__logo { display: none; }
	.route { grid-template-columns: 38px 1fr auto; padding: 18px 6px; column-gap: 12px; }
	.route__go { width: 40px; height: 40px; }
	.paper__sheet { rotate: 0deg; padding-inline-start: 42px; }
	.paper__head { flex-direction: column; }
	.qbox { rotate: 0deg; padding: 16px; }
	.cx-hero--mixer .cx-hero__visual { left: auto; top: auto; width: 100%; opacity: 1; }
	.mixer { padding: 14px 12px 16px; transform: none; }
	.is-ready .mixer { transform: none; }
	.mixer__body { height: 112px; }
	.mixer__strips { gap: 5px; }
	.mixer__knob { width: 20px; height: 20px; }
	.mixer__knob::after { top: 2px; height: 6px; transform-origin: 50% 8px; }
	.mixer__name { font-size: 7.5px; }
	.strips, .adcards, .deliver__grid { grid-template-columns: 1fr; }
	.cycle { grid-template-columns: 1fr; }
	.level { grid-template-columns: 92px 1fr 46px; gap: 10px; }
	.onair { rotate: 0deg; }
	.onair__pairs { grid-template-columns: 1fr; }
	.cx-figure__onair { top: 22px; left: 22px; right: 22px; font-size: 9px; }
	.funnel__band { padding-inline: 6%; }
	.cx-hero--scope .cx-hero__visual { left: auto; top: auto; width: 100%; opacity: 1; }
	.scope__h { font-size: 16px; }
	.kwchips { grid-template-columns: 1fr; }
	.bid { grid-template-columns: 1fr auto; gap: 6px 12px; padding: 16px; }
	.bid__label, .bid__value, .bid__note { grid-column: 1 / -1; }
	.bid__lot { grid-row: 1; }
	.bid__live { grid-row: 1; grid-column: 2; }
	.ptags { grid-template-columns: 1fr; }
	.rcpt__paper { rotate: 0deg; }
	.evlog__rows li { grid-template-columns: 44px auto 1fr; }
	.evlog__ok { display: none; }
	.fmt { flex-direction: column; }
	.fmt__screen { width: auto; aspect-ratio: 16 / 9; border-inline-end: 0; border-bottom: 1px solid var(--line); }
	.journey__stops { grid-template-columns: 1fr; }
	.adclick { rotate: 0deg; }
	.cx-hero--flow .cx-hero__visual { left: auto; top: auto; width: 100%; opacity: 1; }
	.flow__txt small { display: none; }
	.flow__node { padding: 6px 10px 6px 6px; gap: 6px; }
	.flow__ico { width: 26px; height: 26px; }
	.flow__chip { width: 74px; height: 74px; }
	.flow__chip svg { width: 36px; height: 36px; }
	.stk__iso { height: 300px; }
	.stk__plate { top: calc(26px + var(--i) * 56px); width: 190px; height: 190px; margin-left: -95px; }
	.ft__list li { grid-template-columns: 22px 1fr; }
	.ft__file { display: none; }
	.runsw__leds { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
	.radar__sweep, .radar__ping, .radar__blip > i, .radar__blip > i::after, .radar__label, .crawl__scan, .mixer__wave i, .mixer__meter i, .mixer__cap, .funnel__drops i, .cycle__comet, .levels__needle, .level__track i, .abtest__tab, .abtest__cta, .abtest__opt, .abtest__heat, .set--waves::before, .onair__txt, .scope__reticle, .scope__reticle svg, .scope__r2, .scope__lock, .scope__hud i, .cx-figure__bulbs, .bids__tape span, .fmt__bar i, .journey__cursor, .journey__dot, .adclick__cursor, .adclick__ripple, .flow__pulse, .flow__chip, .flow__gate, .stk__plate, .scn__approve, .hub__lines path, .hub__core::before, .runsw__slot::after, .runsw__lever, .runsw__leds i, .set--scan::after, .set--sonar::after, .set--aurora::before, .set--aurora::after, .aiw__lines i, .sigchips__bar i { animation: none; }
	.js .aiw__typed, .js .qbox__text { clip-path: none; animation: none; }
}