@font-face {
  font-family: Geist;
  src: url("assets/geist-98bbbccb.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --bg: #05070b;
  --surface: #0b1018;
  --surface2: #101827;
  --line: #223049;
  --ink: #f5f8fc;
  --text: #b8c6d9;
  --muted: #9aabc0;
  --tint: #080d16;
  --blue: #168bff;
  --cyan: #56c8ff;
  --shadow: 0 20px 50px #0006;
  --shell: 1400px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 128px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1rem/1.6 Geist, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; overflow-x: clip; }
body, button { font-variant-numeric: tabular-nums; }
button, input { font: inherit; }
button { cursor: pointer; color: inherit; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; }
button:disabled { cursor: default; }
img { display: block; width: auto; max-width: 100%; height: auto; }
figure, h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { font-weight: 650; text-wrap: balance; }
h1, h2 { line-height: 1.12; letter-spacing: -.035em; }
h3, h4 { line-height: 1.25; letter-spacing: -.02em; }
p { color: var(--text); }
small { font-size: .8125rem; }
[hidden] { display: none !important; }
svg.i { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.shell { width: min(calc(100% - 64px), var(--shell)); margin-inline: auto; }
.shell > *, .scene > *, .section-heading > *, .product-visuals > *, .project-grid > *, .service-grid > * { min-width: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -80px; left: 16px; z-index: 100; padding: 12px; background: var(--surface); border: 2px solid var(--cyan); }
.skip-link:focus { top: 12px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 52px; border: 1px solid transparent; border-radius: 10px; padding: 12px 22px; font-size: 1rem; font-weight: 650; transition: transform .2s, box-shadow .2s, background .2s; }
.button.primary { background: linear-gradient(120deg,#0878eb,#187edc 58%,#0c6dd6); color: white; box-shadow: 0 10px 28px #087cf433; }
.button.primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px #168bff55; }
.button.small { min-height: 44px; padding: 9px 17px; font-size: .875rem; }
.text-button { min-height: 44px; display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: .9375rem; color: #dfefff; }
.text-button:hover { color: var(--cyan); }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--cyan); font-size: .75rem; letter-spacing: .1em; line-height: 1.5; font-weight: 700; }
.tiny-cross { font-size: 1.25rem; }
.section { position: relative; padding: 64px 0; border-top: 1px solid #17233a; }
.section::before { content: ""; position: absolute; left: 7%; top: -1px; width: 13%; height: 1px; background: linear-gradient(90deg,transparent,var(--blue),transparent); animation: edge-run 9s ease-in-out infinite alternate; pointer-events: none; }
.tint { background: radial-gradient(ellipse at 85% 20%,#12356029,transparent 50%),var(--tint); }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 28px; }
.section-heading h2 { font-size: clamp(2rem,3.3vw,3.1rem); margin-top: 12px; }
h2 span { color: var(--cyan); }
.section-heading > p, .heading-aside { max-width: 390px; font-size: 1rem; }
.heading-aside p { margin-bottom: 12px; }
.demo-label { display: inline-flex; gap: 8px; align-items: center; font-size: .8125rem; color: var(--muted); line-height: 1.5; }
.demo-label .i { width: 16px; height: 16px; }
.site-header { height: 78px; position: sticky; top: 0; z-index: 50; border-bottom: 1px solid #213453a6; background: #05070bec; backdrop-filter: blur(16px); }
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand-mark { display: grid; place-items: center; position: relative; width: 45px; height: 43px; background: linear-gradient(140deg,#174f87,#0b1729 60%); border: 1px solid #238aff; border-radius: 10px; box-shadow: 0 0 22px #168bff30; font-size: 22px; letter-spacing: -.08em; font-style: italic; font-weight: 850; color: white; padding-right: 3px; }
.brand-mark > span { position: absolute; right: -4px; top: -4px; width: 10px; height: 10px; border: 3px solid var(--bg); border-radius: 4px; background: var(--cyan); }
.brand-word { font-size: .875rem; font-weight: 800; letter-spacing: .04em; line-height: 1.4; }
.brand-word small { display: block; margin-top: 3px; font-size: .75rem; font-weight: 450; letter-spacing: .03em; color: var(--muted); }
.desktop-nav { display: flex; gap: 26px; margin-left: auto; }
.desktop-nav a { font-size: .875rem; color: #c0cde0; }
.desktop-nav a:hover { color: var(--cyan); }
.menu-toggle { display: none; width: 44px; height: 44px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface2); }
.menu-toggle span { display: block; height: 2px; background: white; margin: 5px 0; }
.mobile-nav { display: grid; gap: 3px; padding: 16px 24px; background: #0b111c; border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
.mobile-nav a { padding: 9px; }
.hero { position: relative; padding-top: 35px; overflow: hidden; background: radial-gradient(ellipse at 80% 42%,#0b65c530,transparent 55%),linear-gradient(#05070b,#080e18); }
.hero-gridlines { position: absolute; inset: -48px; background-image: linear-gradient(#339cff0a 1px,transparent 1px),linear-gradient(90deg,#339cff0a 1px,transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(90deg,transparent,black 60%); animation: grid-drift 18s linear infinite; pointer-events: none; }
.hero-layout { display: grid; grid-template-columns: minmax(0,.98fr) minmax(0,1.05fr); align-items: center; gap: 30px; position: relative; }
.hero-copy { padding: 15px 0 20px; position: relative; z-index: 5; }
.hero h1 { font-size: clamp(2.9rem,4.25vw,4.1rem); line-height: 1.12; margin: 18px 0 20px; max-width: 720px; }
.hero h1 span { color: var(--cyan); }
.hero-copy > p { font-size: 1.0625rem; line-height: 1.65; max-width: 540px; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin-top: 24px; }
.hero-footnote { display: flex; flex-wrap: wrap; gap: 16px; font-size: .8125rem; color: var(--muted); margin-top: 21px; }
.hero-footnote > span { display: flex; align-items: center; gap: 6px; }
.hero-footnote .i { width: 16px; height: 16px; color: var(--cyan); }
.hero-stage { position: relative; width: 100%; min-width: 0; height: clamp(470px,38vw,530px); }
.hero-orbits { position: absolute; width: 490px; max-width: 95%; aspect-ratio: 1; top: -15px; right: -20px; border: 1px solid #2489f526; border-radius: 50%; box-shadow: 0 0 0 42px #0d7bff08,0 0 0 84px #0d7bff04; animation: orbit-glow 7s ease-in-out infinite; }
.hero-connections { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hero-connections path { stroke-width: 1.7; }
.track { stroke: #19558b; }
.packet { stroke: var(--cyan); stroke-dasharray: 8 180; animation: packet 3.5s linear infinite; }
.packet.second { animation-delay: -1.7s; }
.browser-window { border: 1px solid #29517b; border-radius: 13px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow); }
.hero-browser { position: absolute; width: 86%; right: 0; top: 29px; --tilt: -2deg; --dy: -7px; z-index: 1; }
.window-bar { min-height: 35px; padding: 7px 12px; display: flex; align-items: center; gap: 10px; font-size: .75rem; line-height: 1.4; color: #b6cee6; background: #0c1625; border-bottom: 1px solid #253750; }
.window-bar > .i { margin-left: auto; width: 15px; height: 15px; }
.window-dots { display: flex; gap: 4px; flex-shrink: 0; }
.window-dots i { width: 5px; height: 5px; border-radius: 50%; background: #386083; }
.window-dots i:first-child { background: var(--cyan); }
.window-footer { display: flex; align-items: center; justify-content: space-between; gap: 7px; padding: 8px 10px; color: var(--muted); font-size: .75rem; background: #0b1421; }
.window-footer > span:first-child { display: flex; align-items: center; gap: 5px; color: var(--cyan); }
.window-footer .i { width: 14px; height: 14px; }
.hero-browser img { width: 100%; }
.hero-creative { position: absolute; width: 34%; top: 164px; left: 1%; z-index: 3; padding: 8px; border: 1px solid #2f73af; border-radius: 13px; background: #101c2d; box-shadow: 0 18px 48px #0008; --tilt: 4deg; --dy: -9px; animation-delay: -1.5s; }
.hero-creative img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 7px; }
.mini-heading { display: flex; align-items: center; gap: 5px; margin-bottom: 7px; font-size: .75rem; font-weight: 600; }
.mini-heading .i { width: 14px; height: 14px; color: var(--cyan); }
.mini-heading > span { margin-left: auto; color: var(--cyan); font-size: .75rem; }
.creative-ready { display: flex; gap: 5px; align-items: center; padding-top: 7px; font-size: .75rem; color: var(--cyan); }
.creative-ready .i { width: 14px; height: 14px; }
.hero-lead { position: absolute; right: 0; bottom: 31px; z-index: 4; display: flex; align-items: center; gap: 12px; max-width: 65%; padding: 15px; border: 1px solid #286caa; border-radius: 13px; background: #0d1a2cf5; box-shadow: var(--shadow); --tilt: -1deg; --dy: -5px; animation-delay: -2.5s; }
.round-icon { display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; background: #102d49; color: var(--cyan); border-radius: 11px; }
.hero-lead small { display: block; font-size: .75rem; line-height: 1.4; color: var(--cyan); }
.hero-lead strong { display: block; font-size: 1rem; margin: 4px 0; }
.hero-lead div > span { display: block; font-size: .8125rem; color: var(--text); }
.code-toast { position: absolute; top: 0; left: 16%; z-index: 4; padding: 8px 12px; border: 1px solid #265b85; border-radius: 8px; background: #0a1728; font: .75rem/1.5 ui-monospace,monospace; color: #b0d8f8; animation: code-toast-glow 4s ease-in-out infinite; }
.code-toast > span { color: var(--cyan); margin-right: 5px; }
.stage-note { position: absolute; bottom: 2px; right: 4px; font-size: .75rem; line-height: 1.5; color: var(--muted); text-align: right; }
.float-slow { animation: float 5.5s ease-in-out infinite; }
.motion-toolbar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 55px; margin-top: 18px; border-top: 1px solid #23426677; }
.hero-index { font-size: .75rem; letter-spacing: .05em; color: var(--muted); }
.motion-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; background: transparent; border: 0; font-size: .8125rem; color: #c0d4eb; }
.motion-button .i { width: 15px; height: 15px; }
.capabilities { border-block: 1px solid #223957; background: #0b1626; }
.marquee { overflow: hidden; }
.marquee-track { display: flex; width: max-content; animation: marquee 30s linear infinite; }
.marquee-track > span { white-space: nowrap; padding: 15px 18px; font-size: .8125rem; font-weight: 550; color: #c4d7ed; letter-spacing: .065em; }
.marquee-track b { color: var(--cyan); margin-inline: 24px; font-size: 1rem; }
/* Fast, full-color scenes. No grayscale or hover/focus pause. */
.journey-controls { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-bottom: 15px; }
.journey-step { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; padding: 14px 16px; text-align: left; border: 1px solid #293c56; border-radius: 11px; background: #0c1522; transition: border-color .18s, background .18s, box-shadow .18s; }
.journey-step:hover { border-color: #378ada; background: #102540; }
.journey-step.active, .journey-step.active:focus { background: linear-gradient(120deg,#123b62,#0b233f); border-color: #349bff; box-shadow: 0 0 24px #168bff1c,inset 0 0 24px #168bff0a; }
.step-icon { width: 39px; height: 39px; flex-shrink: 0; display: grid; place-items: center; background: #11263f; border-radius: 10px; color: #7cacd9; }
.journey-step.active .step-icon { background: #175086; color: #80d8ff; }
.journey-step small { font-size: .75rem; margin-right: 7px; color: #8fb5d9; }
.journey-step strong { font-size: 1.0625rem; }
.journey-step em { display: block; margin-top: 2px; color: #b0c6dd; font-size: .75rem; line-height: 1.4; font-style: normal; }
.step-progress { position: absolute; bottom: 0; left: 0; width: var(--progress,0%); height: 2px; background: var(--cyan); }
.experience-stage { position: relative; border: 1px solid #274568; border-radius: 17px; overflow: hidden; background: #09111e; box-shadow: 0 15px 46px #0005; }
.scene { min-height: 450px; animation: scene-in .2s ease-out; }
.scene:not([hidden]) { display: grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); }
.scene-text { padding: 30px; align-self: center; }
.mini-kicker { display: flex; align-items: center; gap: 8px; color: var(--cyan); font-size: .75rem; line-height: 1.5; letter-spacing: .07em; font-weight: 650; }
.mini-kicker .i { width: 18px; height: 18px; }
.scene h3 { font-size: clamp(1.7rem,2.5vw,2.3rem); margin: 13px 0 18px; }
.scene-text > p { font-size: 1rem; max-width: 460px; }
.prompt-card { margin-top: 20px; padding: 15px 17px; border: 1px solid #263d5c; background: #0d1b2d; border-radius: 11px; }
.prompt-top { display: flex; justify-content: space-between; gap: 10px; font-size: .875rem; color: #a9c9e8; }
.prompt-top span { color: var(--cyan); font-size: .8125rem; }
.prompt-card p { font-size: .9375rem; line-height: 1.6; margin: 10px 0 13px; }
.prompt-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.prompt-tags span { padding: 3px 8px; border: 1px solid #274968; border-radius: 5px; font-size: .75rem; background: #102b44; color: #b7e2ff; }
.render-state { display: flex; align-items: center; gap: 7px; min-height: 27px; margin-top: 15px; color: var(--cyan); font-size: .875rem; }
.render-state .i { width: 17px; height: 17px; }
.scene-disclaimer { display: block; margin-top: 12px; color: var(--muted); font-size: .75rem; line-height: 1.5; }
.creative-workspace { position: relative; display: flex; justify-content: center; align-items: center; gap: 24px; padding: 22px 26px; overflow: hidden; background: radial-gradient(ellipse at center,#12518a50,transparent 72%),#09182b; }
.render-grid { position: absolute; inset: -20px; background-image: radial-gradient(#3c94d94a 1px,transparent 1px); background-size: 20px 20px; mask-image: radial-gradient(ellipse,black,transparent); animation: grid-drift 14s linear infinite; }
.main-art { position: relative; width: 255px; max-width: 60%; flex-shrink: 0; border: 4px solid #234366; border-radius: 12px; overflow: hidden; background: #0c192a; box-shadow: 0 16px 38px #0006; transform: rotate(-2deg); }
.main-art img { width: 100%; aspect-ratio: 3/4; object-fit: cover; opacity: 1; filter: none; animation: image-arrive .85s ease-out both; }
.main-art figcaption { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 4px; color: var(--cyan); font-size: .75rem; }
.main-art figcaption .i { width: 15px; height: 15px; }
.scanline { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: #77d6ff; box-shadow: 0 0 20px 5px #26a3f84d; pointer-events: none; animation: scan-fast 1s ease-out both; }
.art-options { position: relative; width: 155px; display: grid; gap: 10px; }
.render-spec { padding: 12px; border: 1px solid #28527a; border-radius: 9px; background: #0b213bf0; animation: spec-glow 3.6s ease-in-out infinite; animation-delay: calc(var(--i,0)*.4s); }
.render-spec strong { display: block; font-size: .875rem; color: #e9f6ff; line-height: 1.4; }
.render-spec span { display: block; margin-top: 4px; font-size: .75rem; color: #a0c7e9; }
.render-spec i { display: block; height: 3px; margin-top: 10px; background: #173d61; border-radius: 3px; overflow: hidden; }
.render-spec i::after { content: ""; display: block; width: 75%; height: 100%; background: var(--cyan); animation: spec-progress 2.5s ease-in-out infinite; }
.check-list { display: grid; gap: 12px; list-style: none; margin: 20px 0; padding: 0; }
.check-list li { display: flex; align-items: center; gap: 8px; font-size: .9375rem; color: var(--text); }
.check-list .i { width: 18px; height: 18px; color: var(--cyan); }
.ads-studio, .prospect-window { align-self: center; margin: 22px 25px 22px 0; border: 1px solid #2b4667; border-radius: 12px; overflow: hidden; background: #0d1a2b; box-shadow: 0 12px 30px #0004; }
.studio-title { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 15px 17px; border-bottom: 1px solid var(--line); font-size: .875rem; background: #102138; }
.studio-title > span:first-child { display: flex; align-items: center; gap: 8px; }
.studio-title .i { width: 17px; height: 17px; color: var(--cyan); }
.soft-chip { display: inline-flex; align-items: center; padding: 3px 6px; border: 1px solid #275278; border-radius: 5px; font-size: .75rem; line-height: 1.4; color: #91d4ff; background: #102b44; }
.ads-body { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1fr); gap: 17px; padding: 17px; }
.ads-body img { width: 100%; aspect-ratio: 3/4; object-fit: cover; align-self: center; border-radius: 7px; }
.ad-settings { align-self: center; }
.ad-settings small { font-size: .75rem; color: var(--muted); }
.ad-settings h4 { font-size: 1.3rem; margin: 5px 0 15px; }
.ad-settings > div { display: flex; align-items: start; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: .8125rem; }
.ad-settings > div > span { color: var(--muted); }
.ad-settings b { font-weight: 550; }
.text-blue { color: var(--cyan); }
.publish-footer { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 12px; padding: 14px 17px; border-top: 1px solid var(--line); background: #0c2037; color: #9fddff; font-size: .8125rem; }
.publish-footer strong { font-weight: 650; font-size: .875rem; min-width: 3ch; text-align: right; }
.publish-track { grid-column: 1/-1; height: 4px; background: #203b58; border-radius: 4px; overflow: hidden; }
.publish-track i { display: block; height: 100%; background: var(--cyan); transition: width .08s linear; }
.lead-search { display: flex; align-items: center; gap: 10px; padding: 14px; margin-top: 20px; border: 1px solid #2b557d; border-radius: 10px; background: #0d233c; font-size: .875rem; color: #badbfa; }
.lead-search > .i { width: 18px; height: 18px; color: var(--cyan); }
.search-pulse { width: 6px; height: 6px; flex-shrink: 0; margin-left: auto; background: var(--cyan); border-radius: 50%; animation: pulse 2s infinite; }
.prospect-head { display: flex; justify-content: space-between; padding: 11px 17px; background: #0b1727; border-bottom: 1px solid var(--line); font-size: .75rem; color: var(--muted); }
.prospect-row { display: grid; grid-template-columns: 33px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 16px; border-bottom: 1px solid var(--line); }
.company-icon { width: 33px; height: 33px; display: grid; place-items: center; background: #123355; color: var(--cyan); border-radius: 8px; }
.company-icon .i { width: 17px; height: 17px; }
.prospect-row b { display: block; font-size: .875rem; line-height: 1.5; font-weight: 550; }
.prospect-row small { display: block; margin-top: 3px; font-size: .75rem; line-height: 1.5; color: var(--muted); }
.lead-state { padding: 4px 7px; background: #15283d; border-radius: 5px; color: #b1c2d6; font-size: .75rem; line-height: 1.5; }
.lead-state.qualified { color: #84d6ff; background: #123b60; }
.transfer-status { display: flex; align-items: center; gap: 8px; padding: 14px 17px; background: #0b223b; color: #a0deff; font-size: .8125rem; }
.scene.scene-crm:not([hidden]) { display: flex; flex-direction: column; padding: 24px; gap: 16px; }
.crm-scene-heading { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.crm-scene-heading h3 { font-size: 1.65rem; margin: 10px 0 0; }
.crm-scene-heading p { font-size: .875rem; max-width: 360px; }
.reference-viewport { position: relative; width: 100%; min-height: 280px; overflow: hidden; background: #0b1727; border: 1px solid #294764; border-radius: 10px; --frame-scale: .64; }
.reference-viewport iframe { width: 1440px; height: 980px; position: absolute; top: 0; left: 0; transform: scale(var(--frame-scale)); transform-origin: top left; border: 0; pointer-events: none; }
.crm-live-scene { display: grid; grid-template-columns: 1.08fr .92fr; gap: 16px; flex: 1; align-items: stretch; }
.crm-login-preview { display: flex; align-items: center; overflow: hidden; border: 1px solid #335275; border-radius: 10px; background: #eff5f9; }
.crm-login-preview img { width: 100%; height: auto; }
.crm-conversation { border: 1px solid #2b4a6c; border-radius: 10px; padding: 15px; background: #0d1e33; display: flex; flex-direction: column; justify-content: center; gap: 11px; }
.conversation-top { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid #254360; }
.conversation-top strong { display: block; font-size: .9375rem; }
.conversation-top small { display: block; color: #9bc8ed; font-size: .75rem; }
.message-bubble { max-width: 93%; border: 1px solid #2a4764; border-radius: 11px 11px 11px 3px; padding: 10px 13px; font-size: .875rem; line-height: 1.5; background: #132a43; animation: message-in .6s ease-out both; }
.message-bubble.reply { align-self: flex-end; background: #0e4675; border-color: #22639a; border-radius: 11px 11px 3px 11px; animation-delay: .4s; }
.crm-event { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid #245a89; border-radius: 8px; background: #0f2c49; color: #b2e2ff; font-size: .875rem; }
.crm-event small { margin-left: auto; color: #92bce0; font-size: .75rem; }
.experience-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; color: var(--muted); font-size: .8125rem; }
.experience-foot > span:first-child { display: flex; align-items: center; gap: 8px; }
.experience-foot .i { width: 17px; height: 17px; }
#scene-counter { font: .8125rem/1.5 ui-monospace,monospace; white-space: nowrap; }
/* Dense service cards and continuously moving connections. */
.service-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; }
.service-card { position: relative; padding: 25px; border: 1px solid #263a54; border-radius: 13px; background: linear-gradient(135deg,#101c2c,#0a111c); overflow: hidden; transition: border-color .2s,transform .2s; }
.service-card::after { content: ""; position: absolute; width: 100px; height: 1px; bottom: 0; left: -100px; background: linear-gradient(90deg,transparent,var(--cyan),transparent); animation: card-signal 5s linear infinite; }
.service-card:nth-child(2n)::after { animation-delay: -2s; }
.service-card:nth-child(3n)::after { animation-delay: -3.4s; }
.service-card:hover { border-color: #399ffb; transform: translateY(-3px); }
.service-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 17px; }
.service-icon { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid #275582; border-radius: 11px; background: #102b46; color: var(--cyan); }
.service-top small { color: #9bbedf; font-size: .8125rem; }
.service-card h3 { font-size: 1.3rem; margin-bottom: 10px; }
.service-card p { font-size: 1rem; line-height: 1.6; }
.service-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid #233550; padding-top: 15px; margin-top: 19px; }
.service-bottom > span { font-size: .875rem; color: #b7d8f6; }
.mini-flow { display: flex; align-items: center; gap: 13px; position: relative; }
.mini-flow::before { content: ""; position: absolute; height: 1px; left: 0; right: 0; top: 3px; background: #255887; }
.mini-flow i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: #356d9d; animation: node-pulse 2.1s ease-in-out infinite; }
.mini-flow i:nth-child(2) { animation-delay: .35s; }
.mini-flow i:nth-child(3) { animation-delay: .7s; }
.project-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.project-card, .product-visual { overflow: hidden; border: 1px solid #294364; border-radius: 13px; background: #0b1523; box-shadow: 0 16px 35px #0003; }
.project-media { position: relative; height: 310px; overflow: hidden; background: #0c2038; }
.project-site .project-media > img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .5s; }
.project-site:hover .project-media > img { transform: scale(1.02); }
.compile-note { position: absolute; right: 15px; bottom: 14px; min-width: 240px; padding: 13px 17px; border: 1px solid #348bc5; border-radius: 9px; background: #071b2ef5; box-shadow: var(--shadow); animation: float 5.5s ease-in-out infinite; --tilt: 1deg; --dy: -5px; }
.compile-label { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: .75rem; color: #b4d7f4; }
.compile-label i { width: 5px; height: 5px; background: var(--cyan); border-radius: 50%; animation: pulse 2s infinite; }
.compile-note code { font: .8125rem/1.7 ui-monospace,monospace; color: #a3d3f8; }
.compile-note code .code-line { display: block; white-space: pre; overflow: hidden; animation: code-type 4.8s steps(20,end) infinite; animation-delay: calc(var(--line)*.17s); }
.compile-done { display: block; margin-top: 8px; font-size: .75rem; color: var(--cyan); animation: compile-result 4.8s infinite; }
.website-scroll > img { width: 100%; animation: website-pan 14s ease-in-out infinite; }
.project-card figcaption { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 18px 20px; border-top: 1px solid var(--line); }
.project-card figcaption span:not(.project-type) { display: block; color: #a6bed9; font-size: .75rem; line-height: 1.5; letter-spacing: .035em; }
.project-card figcaption strong { display: block; font-size: 1.25rem; margin: 5px 0; font-weight: 600; }
.project-card figcaption p { font-size: .875rem; }
.circle-link, .project-type { display: grid; place-items: center; flex-shrink: 0; width: 41px; height: 41px; border: 1px solid #2b567c; border-radius: 50%; background: #102c48; color: var(--cyan); }
.circle-link:hover { background: #19436a; }
.creative-strip-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 34px 0 22px; }
.creative-strip-header h3 { font-size: 1.7rem; margin-top: 8px; }
.art-gallery { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.art-gallery-card { min-width: 0; }
.art-gallery-image { position: relative; border: 1px solid #2c4868; border-radius: 12px; padding: 10px; background: #0e213a; overflow: hidden; }
.art-gallery-image img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 6px; transition: transform .4s; animation: creative-breathe 6s ease-in-out infinite; }
.art-gallery-card:nth-child(2) img { animation-delay: -2s; }
.art-gallery-card:nth-child(3) img { animation-delay: -4s; }
.art-gallery-card:hover img { transform: scale(1.025); }
.gallery-index { position: absolute; top: 20px; right: 20px; padding: 3px 8px; background: #0a203bf0; border: 1px solid #4b93bf; border-radius: 5px; font: .75rem/1.5 ui-monospace,monospace; color: #c8e6ff; }
.art-gallery-card figcaption { display: flex; justify-content: space-between; gap: 10px; padding: 12px 2px; font-size: .875rem; }
.art-gallery-card figcaption b { font-weight: 550; }
.art-gallery-card figcaption span { color: var(--muted); font-size: .8125rem; }
.eco-network { position: relative; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 13px; padding: 15px 0 5px; }
.eco-spine { position: absolute; top: 43px; left: 7%; right: 7%; height: 1px; background: #264966; }
.eco-spine::after { content: ""; position: absolute; top: -1px; left: 0; width: 65px; height: 3px; background: linear-gradient(90deg,transparent,var(--cyan),transparent); animation: spine 4s linear infinite; }
.eco-node { position: relative; text-align: center; padding: 0 8px; }
.eco-icon { width: 58px; height: 58px; display: grid; place-items: center; margin: 0 auto 16px; border: 1px solid #2e6da4; border-radius: 15px; background: #102841; color: var(--cyan); animation: eco-glow 4s ease-in-out infinite; animation-delay: calc(var(--index)*.5s); }
.eco-icon .i { width: 25px; height: 25px; }
.eco-category { display: block; font-size: .8125rem; color: #99b2cd; margin-bottom: 4px; }
.eco-node h3 { font-size: 1rem; }
.eco-node p { font-size: .875rem; line-height: 1.6; margin-top: 8px; color: var(--text); }
.product-visuals { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 28px; }
.product-visual > img { width: 100%; aspect-ratio: 16/9; object-fit: contain; background: #061326; }
.product-visual.bmflow-product > img { aspect-ratio: 16/9; object-fit: contain; background: #f5f7fa; }
.product-visual .window-bar .soft-chip { margin-left: auto; font-size: .75rem; }
.product-visual figcaption { padding: 17px 20px; display: flex; gap: 15px; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); }
.product-visual figcaption strong { display: block; font-size: 1.125rem; }
.product-visual figcaption p { font-size: .8125rem; margin-top: 4px; color: var(--muted); }
.social-product { grid-column: 1 / -1; }
.social-product-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,382px); align-items: center; gap: 40px; padding: 30px clamp(24px,4vw,54px); background: radial-gradient(ellipse at 83% 45%,#103861 0%,transparent 56%),#0a1421; }
.social-product-copy { min-width: 0; max-width: 590px; }
.social-product-copy h3 { margin: 12px 0 16px; font-size: clamp(1.9rem,3.2vw,2.7rem); }
.social-product-copy h3 > span { color: var(--cyan); }
.social-product-copy > p { max-width: 48ch; font-size: 1rem; line-height: 1.7; color: var(--text); }
.social-features { list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 17px; }
.social-features li { display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 12px; align-items: start; }
.social-feature-icon { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #28577e; border-radius: 11px; background: #102b44; color: var(--cyan); }
.social-feature-icon .i { width: 20px; height: 20px; }
.social-features strong { display: block; font-size: .9375rem; font-weight: 600; }
.social-features p { margin-top: 3px; font-size: .875rem; line-height: 1.6; color: var(--text); }
.social-product-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 13px; font-size: .8125rem; color: var(--cyan); }
.social-product-flow > span:not(.mini-flow) { padding: 7px 10px; border: 1px solid #214263; border-radius: 7px; background: #0d2236; }
.social-product-flow .mini-flow { gap: 9px; }
.social-product-screen { min-width: 0; display: flex; justify-content: center; }
.social-product-screen img { display: block; width: 100%; max-width: 382px; height: auto; border-radius: 16px; box-shadow: 0 20px 50px #0005,0 0 45px #168bff16; }
.about-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 45px; align-items: center; }
.about h2 { font-size: clamp(2.1rem,3.6vw,3.15rem); margin: 13px 0 20px; }
.about p { font-size: 1rem; max-width: 570px; }
.about .text-button { margin-top: 20px; }
.connection-board { position: relative; padding: 27px; border: 1px solid #2b4b70; border-radius: 16px; background: radial-gradient(ellipse at center,#13447755,transparent 70%),#0b1728; overflow: hidden; }
.board-label { text-align: center; color: #abd4f7; font-size: .75rem; letter-spacing: .1em; margin-bottom: 20px; }
.board-row { display: flex; gap: 20px; align-items: center; }
.board-row > span { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; padding: 12px; border: 1px solid #2a4d73; border-radius: 10px; background: #10253e; font-size: .875rem; }
.board-row > span .i { color: var(--cyan); width: 18px; height: 18px; }
.board-row > i { height: 1px; width: 30px; flex-shrink: 0; background: #3477ad; position: relative; }
.board-row > i::after { content: ""; position: absolute; top: -1px; left: 0; width: 10px; height: 3px; background: var(--cyan); animation: board-packet 1.8s linear infinite; }
.board-center { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 28px 0; }
.board-center::before, .board-center::after { content: ""; height: 24px; width: 1px; position: absolute; left: 50%; background: linear-gradient(var(--blue),#0c213900); }
.board-center::before { top: 0; }
.board-center::after { bottom: 0; transform: rotate(180deg); }
.board-center .brand-mark { width: 57px; height: 54px; font-size: 29px; animation: eco-glow 4s infinite; }
.board-center strong { font-size: 1rem; color: #c5e6ff; }
.board-caption { display: flex; justify-content: center; align-items: center; gap: 7px; margin-top: 21px; color: #a6c4e2; font-size: .8125rem; }
.board-caption .i { width: 17px; height: 17px; color: var(--cyan); }
.method-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 19px; }
.method-card { position: relative; padding: 20px; border: 1px solid #28435f; border-radius: 12px; background: #0c1727; overflow: hidden; }
.method-card::after { content: ""; position: absolute; bottom: 0; left: 0; height: 2px; width: 100%; background: var(--blue); transform-origin: left; animation: method-progress 4s ease-in-out infinite; animation-delay: calc(var(--index)*.6s); }
.method-number { display: block; color: var(--cyan); font-size: 1.65rem; line-height: 1.3; font-weight: 600; margin-bottom: 16px; }
.method-card h3 { font-size: 1.2rem; margin-bottom: 10px; overflow-wrap: break-word; }
.method-card p { font-size: .9375rem; }
.contact-section { padding: 20px 0 55px; }
.contact-card { position: relative; overflow: hidden; padding: 48px 30px; border: 1px solid #2d608d; border-radius: 18px; background: radial-gradient(ellipse at 50% 110%,#0d5bad55,transparent 65%),linear-gradient(120deg,#0b1c30,#0c1829); text-align: center; }
.contact-circuit { position: absolute; inset: -30px; background-image: linear-gradient(#1986e51a 1px,transparent 1px),linear-gradient(90deg,#1986e51a 1px,transparent 1px); background-size: 38px 38px; mask-image: linear-gradient(90deg,black,transparent 32%,transparent 68%,black); animation: grid-drift 18s linear infinite; pointer-events: none; }
.contact-card > :not(.contact-circuit) { position: relative; z-index: 1; }
.contact-card h2 { font-size: clamp(2.1rem,4vw,3.6rem); margin: 16px 0; }
.contact-card p { max-width: 650px; margin: 0 auto 23px; font-size: 1rem; }
.contact-card .button { min-width: 260px; }
.contact-note { display: block; max-width: 580px; margin: 13px auto 0; font-size: .8125rem; line-height: 1.5; color: var(--muted); }
.footer { border-top: 1px solid #20334b; background: #070c13; padding: 28px 0 18px; }
.footer-main { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding-bottom: 24px; }
.footer-main p { font-size: .9375rem; }
.footer-main nav { display: flex; gap: 25px; font-size: .875rem; color: #bbcee3; }
.footer-bottom { display: flex; justify-content: space-between; gap: 15px; padding-top: 16px; border-top: 1px solid #1f3045; font-size: .8125rem; color: #94abc4; }
@keyframes float { 0%,100% { transform: translateY(0) rotate(var(--tilt,0deg)); } 50% { transform: translateY(var(--dy,-7px)) rotate(var(--tilt,0deg)); } }
@keyframes grid-drift { to { transform: translate(0,38px); } }
@keyframes orbit-glow { 50% { border-color: #309eff65; box-shadow: 0 0 0 38px #0d7bff0d,0 0 0 75px #0d7bff05; } }
@keyframes packet { to { stroke-dashoffset: -376; } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes image-arrive { from { transform: scale(1.035); } to { transform: scale(1); } }
@keyframes scan-fast { 0% { transform: translateY(0); opacity: 1; } 95% { transform: translateY(390px); opacity: .8; } 100% { transform: translateY(410px); opacity: 0; } }
@keyframes pulse { 50% { opacity: .45; } }
@keyframes node-pulse { 0%,80%,100% { background: #356d9d; box-shadow: none; } 35% { background: var(--cyan); box-shadow: 0 0 10px #42baff88; } }
@keyframes code-toast-glow { 50% { border-color: #429fe7; box-shadow: 0 0 20px #168bff25; } }
@keyframes edge-run { to { left: 78%; } }
@keyframes card-signal { to { left: 100%; } }
@keyframes spec-glow { 50% { border-color: #4eadeb; } }
@keyframes spec-progress { 0%,100% { transform: translateX(-110%); } 65% { transform: translateX(150%); } }
@keyframes message-in { from { transform: translateY(8px); opacity: .7; } to { transform: none; opacity: 1; } }
@keyframes scene-in { from { transform: translateY(3px); } to { transform: none; } }
@keyframes code-type { 0%,4% { clip-path: inset(0 100% 0 0); } 22%,94% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } }
@keyframes compile-result { 0%,28% { opacity: .4; } 45%,95% { opacity: 1; } 100% { opacity: .4; } }
@keyframes website-pan { 0%,12% { transform: translateY(0); } 65%,82% { transform: translateY(calc(-100% + 310px)); } 100% { transform: translateY(0); } }
@keyframes creative-breathe { 50% { transform: scale(1.016); } }
@keyframes spine { to { left: calc(100% - 65px); } }
@keyframes eco-glow { 50% { border-color: var(--cyan); box-shadow: 0 0 22px #168bff42; } }
@keyframes board-packet { to { left: 20px; } }
@keyframes method-progress { 0% { transform: scaleX(.05); } 75%,100% { transform: scaleX(1); } }
body.motion-paused *, body.motion-paused *::before, body.motion-paused *::after,
.motion-offscreen *, .motion-offscreen *::before, .motion-offscreen *::after { animation-play-state: paused !important; }
body.motion-paused .section::before, .section.motion-offscreen::before { animation-play-state: paused !important; }
@media (max-width: 1180px) {
  .shell { width: calc(100% - 48px); }
  .desktop-nav { gap: 17px; }
  .header-inner { gap: 16px; }
  .brand-word { font-size: .8125rem; }
  .brand-word small { font-size: .6875rem; }
  .hero h1 { font-size: 3.15rem; }
  .hero-stage { height: 480px; }
  .hero-creative { top: 170px; width: 37%; }
  .hero-lead { padding: 12px; gap: 8px; }
  .hero-lead .round-icon { width: 32px; height: 32px; }
  .hero-lead small { font-size: .6875rem; }
  .hero-lead strong { font-size: .9375rem; }
  .hero-lead div > span { font-size: .75rem; }
  .journey-step { padding: 13px 12px; gap: 9px; }
  .step-icon { width: 32px; height: 32px; }
  .journey-step em { font-size: .75rem; }
  .scene-text { padding: 25px; }
  .creative-workspace { gap: 16px; padding: 20px; }
  .main-art { max-width: 61%; }
  .art-options { width: 128px; }
  .render-spec { padding: 9px; }
  .prospect-row { grid-template-columns: minmax(0,1fr) auto; gap: 10px; }
  .prospect-row .company-icon { display: none; }
  .crm-live-scene { grid-template-columns: 1fr 1fr; }
  .service-card { padding: 21px; }
  .art-gallery-card figcaption { display: block; }
  .art-gallery-card figcaption span { display: block; margin-top: 3px; }
  .board-row { gap: 12px; }
  .board-row > i { width: 18px; }
  .board-row > span { padding: 10px; }
}
@media (max-width: 960px) {
  .desktop-nav, .nav-contact { display: none; }
  .menu-toggle { display: block; }
  .site-header { height: 72px; }
  .hero { padding-top: 25px; }
  .hero-layout { grid-template-columns: 1fr; gap: 4px; }
  .hero-copy { max-width: 750px; padding-bottom: 5px; }
  .hero h1 { font-size: clamp(2.8rem,6.5vw,3.9rem); max-width: 770px; }
  .hero-copy > p { max-width: 680px; }
  .hero-stage { width: min(100%,650px); height: 520px; margin: 10px auto 0; }
  .hero-creative { top: 168px; width: 32%; }
  .hero-lead { padding: 15px; bottom: 31px; }
  .hero-lead small { font-size: .75rem; }
  .hero-lead strong { font-size: 1rem; }
  .hero-lead div > span { font-size: .8125rem; }
  .hero-lead .round-icon { width: 40px; height: 40px; }
  .section { padding: 52px 0; }
  .section-heading { flex-direction: column; align-items: flex-start; gap: 17px; }
  .section-heading > p, .heading-aside { max-width: 670px; }
  .journey-step { display: block; }
  .step-icon { display: none; }
  .journey-step strong { font-size: 1rem; }
  .scene-text { padding: 24px; }
  .scene h3 { font-size: 1.7rem; }
  .creative-workspace { flex-direction: column; gap: 12px; padding: 20px; }
  .main-art { width: 205px; max-width: 85%; }
  .art-options { display: flex; width: 100%; gap: 8px; }
  .render-spec { flex: 1; min-width: 0; padding: 9px; }
  .render-spec strong { font-size: .8125rem; }
  .render-spec span { font-size: .75rem; }
  .render-spec i { margin-top: 7px; }
  .ads-studio, .prospect-window { margin-right: 20px; }
  .ads-body { gap: 13px; padding: 13px; grid-template-columns: minmax(0,.75fr) minmax(0,1fr); }
  .studio-title { padding: 13px; font-size: .8125rem; }
  .ad-settings h4 { font-size: 1.125rem; }
  .ad-settings > div { display: block; font-size: .8125rem; padding-block: 5px; }
  .ad-settings > div b { display: block; }
  .prospect-row { padding: 14px 12px; grid-template-columns: 1fr; gap: 6px; }
  .lead-state { justify-self: start; }
  .crm-scene-heading { display: block; }
  .crm-scene-heading p { max-width: none; margin-top: 10px; }
  .crm-live-scene { grid-template-columns: 1fr; }
  .crm-login-preview { display: none; }
  .crm-conversation { min-height: 270px; }
  .service-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .project-media { height: 270px; }
  .website-scroll > img { animation-name: website-pan-tablet; }
  .compile-note { min-width: 220px; right: 10px; bottom: 10px; padding: 10px 13px; }
  .compile-label { font-size: .6875rem; }
  .creative-strip-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .eco-network { grid-template-columns: repeat(3,minmax(0,1fr)); row-gap: 24px; }
  .eco-spine { display: none; }
  .eco-node:nth-last-child(-n+2) { transform: translateX(50%); }
  .about-layout { grid-template-columns: 1fr; gap: 30px; }
  .connection-board { width: 100%; max-width: 700px; justify-self: center; }
  .method-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
  .footer-main { flex-wrap: wrap; }
  .footer-main nav { width: 100%; }
  .product-visuals { grid-template-columns: 1fr; }
}
@keyframes website-pan-tablet { 0%,12% { transform: translateY(0); } 65%,82% { transform: translateY(calc(-100% + 270px)); } 100% { transform: translateY(0); } }
@media (max-width: 800px) {
  .social-product-layout { grid-template-columns: minmax(0,1fr); gap: 28px; }
}
@media (max-width: 650px) {
  .shell { width: calc(100% - 32px); }
  .brand-word { font-size: .8125rem; }
  .brand-word small { font-size: .625rem; }
  .hero h1 { font-size: clamp(2.4rem,8.8vw,3.25rem); line-height: 1.13; margin-block: 15px; }
  .hero .eyebrow { font-size: .75rem; letter-spacing: .04em; }
  .hero-copy > p { font-size: 1rem; }
  .hero-actions { gap: 9px; margin-top: 18px; }
  .hero-actions .button, .hero-actions .text-button { width: 100%; justify-content: center; }
  .hero-footnote { gap: 10px 14px; justify-content: center; font-size: .75rem; margin-top: 12px; }
  .hero-stage { margin-top: 17px; height: auto; aspect-ratio: 1/1.36; }
  .hero-browser { width: 96%; top: 29px; }
  .hero-creative { width: 42%; top: 35%; left: 0; padding: 6px; --tilt: 2deg; }
  .hero-lead { max-width: 68%; right: 0; bottom: 35px; padding: 11px; gap: 7px; --tilt: 0deg; }
  .hero-lead .round-icon { display: none; }
  .hero-lead small { font-size: .75rem; }
  .hero-lead strong { font-size: .9375rem; }
  .hero-lead div > span { font-size: .75rem; }
  .mini-heading { font-size: .75rem; gap: 4px; }
  .mini-heading .i { display: none; }
  .mini-heading > span { font-size: .75rem; }
  .creative-ready { font-size: .75rem; gap: 4px; }
  .creative-ready .i { display: none; }
  .window-bar { min-height: 31px; font-size: .75rem; padding: 6px 8px; gap: 7px; }
  .window-footer { font-size: .75rem; padding: 6px 8px; }
  .window-footer > span:last-child { display: none; }
  .code-toast { top: 0; left: 5%; max-width: 90%; font-size: .75rem; padding: 7px 9px; }
  .stage-note { bottom: 4px; font-size: .75rem; text-align: center; right: 0; left: 0; }
  .motion-toolbar { margin-top: 7px; gap: 10px; }
  .hero-index { max-width: 140px; font-size: .6875rem; }
  .motion-button { font-size: .75rem; }
  .marquee-track > span { padding: 13px 15px; font-size: .75rem; }
  .marquee-track b { margin-inline: 17px; }
  .section { padding: 42px 0; }
  .section-heading { margin-bottom: 23px; gap: 15px; }
  .section-heading h2 { font-size: clamp(1.9rem,7.2vw,2.45rem); }
  .journey-controls { grid-template-columns: 1fr 1fr; gap: 8px; }
  .journey-step { padding: 12px; }
  .journey-step strong { font-size: 1rem; }
  .journey-step em { font-size: .75rem; }
  .scene:not([hidden]) { grid-template-columns: 1fr; min-height: 0; }
  .scene-text { padding: 21px; align-self: stretch; }
  .scene h3 { font-size: 1.8rem; margin: 11px 0 14px; }
  .prompt-card { margin-top: 13px; padding: 13px; }
  .prompt-card p { font-size: .9375rem; }
  .creative-workspace { min-height: 315px; flex-direction: row; padding: 20px; gap: 14px; }
  .main-art { width: 55%; max-width: 230px; }
  .art-options { display: grid; width: 40%; gap: 9px; }
  .render-spec { padding: 9px; }
  .render-spec strong { font-size: .8125rem; }
  .render-spec span { font-size: .75rem; }
  .render-spec:last-child { display: none; }
  .ads-studio, .prospect-window { margin: 0 18px 20px; }
  .ads-body { padding: 15px; gap: 15px; grid-template-columns: minmax(0,.8fr) minmax(0,1fr); }
  .ad-settings h4 { font-size: 1.15rem; }
  .ad-settings > div { font-size: .8125rem; padding: 6px 0; }
  .studio-title { padding: 13px; gap: 8px; flex-wrap: wrap; }
  .soft-chip { font-size: .75rem; }
  .prospect-row { grid-template-columns: minmax(0,1fr) auto; padding: 13px; align-items: center; }
  .prospect-row b { font-size: .875rem; }
  .prospect-row small { font-size: .75rem; max-width: 21ch; }
  .lead-state { font-size: .75rem; white-space: normal; max-width: 95px; }
  .lead-search { font-size: .8125rem; padding: 12px; }
  .scene.scene-crm:not([hidden]) { padding: 21px; gap: 15px; }
  .crm-scene-heading h3 { font-size: 1.6rem; }
  .crm-scene-heading p { font-size: .875rem; }
  .crm-conversation { padding: 14px; min-height: 265px; }
  .crm-event { font-size: .8125rem; flex-wrap: wrap; padding: 10px; }
  .crm-event small { margin-left: 26px; }
  .experience-foot { font-size: .75rem; align-items: flex-start; gap: 10px; }
  .experience-foot > span:first-child { align-items: flex-start; }
  #scene-counter { font-size: .75rem; }
  .service-grid { grid-template-columns: 1fr; gap: 12px; }
  .service-card { padding: 22px; }
  .service-top { margin-bottom: 16px; }
  .service-card h3 { font-size: 1.3rem; }
  .service-card p { font-size: 1rem; }
  .service-bottom { margin-top: 16px; }
  .project-grid { grid-template-columns: 1fr; gap: 16px; }
  .project-media { height: 285px; }
  .website-scroll > img { animation-name: website-pan-small; }
  .project-card figcaption { padding: 16px 17px; }
  .project-card figcaption strong { font-size: 1.25rem; }
  .compile-note { min-width: 230px; }
  .creative-strip-header { margin-top: 29px; }
  .creative-strip-header h3 { font-size: 1.55rem; }
  .art-gallery { display: flex; gap: 13px; overflow-x: auto; padding: 0 2px 5px; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: #388ccb #112a44; }
  .art-gallery-card { flex: 0 0 85%; scroll-snap-align: start; }
  .art-gallery-card figcaption { font-size: .9375rem; }
  .art-gallery-card figcaption span { font-size: .875rem; }
  .eco-network { grid-template-columns: 1fr 1fr; gap: 21px 12px; padding-top: 8px; }
  .eco-node:nth-last-child(-n+2) { transform: none; }
  .eco-node:last-child { grid-column: 1/-1; width: 220px; max-width: 100%; justify-self: center; }
  .eco-node h3 { font-size: 1rem; }
  .eco-node p { font-size: .875rem; }
  .eco-category { font-size: .8125rem; }
  .product-visuals { margin-top: 23px; gap: 16px; }
  .social-product-layout { grid-template-columns: minmax(0,1fr); gap: 25px; padding: 23px 18px; }
  .social-product-copy h3 { font-size: 2rem; }
  .social-features { gap: 15px; margin: 21px 0; }
  .social-product-flow { gap: 8px; font-size: .75rem; }
  .social-product-flow > span:not(.mini-flow) { padding: 6px 8px; }
  .social-product-flow .mini-flow { gap: 5px; }
  .social-product-flow .mini-flow i { width: 5px; height: 5px; }
  .product-visual .window-bar { flex-wrap: wrap; }
  .product-visual .window-bar .soft-chip { font-size: .75rem; }
  .product-visual figcaption { padding: 15px 17px; }
  .product-visual figcaption p { font-size: .8125rem; }
  .about h2 { font-size: 2.2rem; }
  .connection-board { padding: 22px 16px; }
  .board-row { gap: 9px; }
  .board-row > i { display: none; }
  .board-row > span { padding: 12px 7px; font-size: .8125rem; gap: 6px; }
  .board-label { font-size: .75rem; }
  .board-caption { font-size: .75rem; line-height: 1.6; }
  .method-grid { gap: 12px; }
  .method-card { padding: 17px 14px; }
  .method-number { font-size: 1.5rem; margin-bottom: 13px; }
  .method-card h3 { font-size: 1.1rem; overflow-wrap: normal; hyphens: auto; }
  .method-card p { font-size: .9375rem; line-height: 1.6; }
  .contact-section { padding: 5px 0 35px; }
  .contact-card { padding: 34px 20px; }
  .contact-card h2 { font-size: 2.1rem; }
  .contact-card p { font-size: 1rem; }
  .contact-card .button { min-width: 0; width: 100%; }
  .footer-main { display: block; padding-bottom: 21px; }
  .footer-main p { margin-top: 21px; }
  .footer-main nav { margin-top: 19px; gap: 23px; font-size: .875rem; }
  .footer-bottom { display: block; font-size: .75rem; line-height: 1.8; }
  .footer-bottom span { display: block; }
}
@keyframes website-pan-small { 0%,12% { transform: translateY(0); } 65%,82% { transform: translateY(calc(-100% + 285px)); } 100% { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .float-slow, .main-art img { transform: none; }
  .scanline { display: none; }
  .website-scroll > img { transform: none; }
  .mini-flow i { background: var(--cyan); }
}

/* Original BM logo, framed without altering the source artwork. */
.brand-crop { display: block; position: relative; width: 201px; height: 94px; overflow: hidden; flex-shrink: 0; }
.brand-crop img { position: absolute; width: 220px; height: 220px; max-width: none; left: -9px; top: -62px; mix-blend-mode: screen; }
.site-header { height: 104px; }
.board-logo-crop { position: relative; display: block; width: 110px; height: 60px; overflow: hidden; }
.board-logo-crop img { position: absolute; width: 180px; height: 180px; max-width: none; left: -40px; top: -50px; mix-blend-mode: screen; }
.board-center { gap: 7px; padding-block: 25px; }
.footer-main .brand-crop { width: 201px; height: 94px; }
.projects-three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.project-card { display: flex; flex-direction: column; }
.projects-three .project-media { --media-h: 280px; height: var(--media-h); flex-shrink: 0; }
.projects-three .project-card figcaption { flex: 1; min-height: 135px; padding: 17px; }
.projects-three .project-card figcaption strong { font-size: 1.125rem; line-height: 1.4; }
.projects-three .website-scroll > img { animation: project-scroll 12s ease-in-out infinite; }
.projects-three .project-site .short-capture > img { width: 100%; height: auto; min-height: calc(var(--media-h) + 60px); object-fit: cover; object-position: top left; }
.projects-three .compile-note { min-width: 0; width: min(240px,90%); padding: 10px 12px; right: 9px; bottom: 10px; }
.projects-three .compile-label { font-size: .75rem; }
.project-granrio .website-scroll > img { animation-delay: -3s; }
@keyframes project-scroll { 0%,13% { transform: translateY(0); } 65%,83% { transform: translateY(calc(-100% + var(--media-h))); } 100% { transform: translateY(0); } }
/* All scenes share a grid row, so the page does not jump during transitions. */
.experience-stage { display: grid; }
.scene { grid-area: 1 / 1; }
.scene[hidden] { display: grid !important; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); visibility: hidden; pointer-events: none; }
.scene.scene-crm[hidden] { display: flex !important; flex-direction: column; padding: 24px; gap: 16px; }
.scene[hidden] *, .scene[hidden] *::before, .scene[hidden] *::after { animation: none !important; }
@media (max-width: 1180px) {
  .projects-three .project-media { --media-h: 250px; }
  .projects-three .project-card figcaption { padding: 14px; gap: 9px; min-height: 142px; }
  .projects-three .project-card figcaption strong { font-size: 1.0625rem; }
  .projects-three .circle-link, .projects-three .project-type { width: 34px; height: 34px; }
  .projects-three .compile-note { width: min(228px,92%); }
}
@media (max-width: 960px) {
  .projects-three { grid-template-columns: 1fr 1fr; }
  .projects-three .project-card:last-child { grid-column: 1 / -1; width: calc(50% - 9px); justify-self: center; }
  .projects-three .project-media { --media-h: 275px; }
  .scene.scene-crm[hidden] .crm-login-preview { display: none; }
}
@media (max-width: 650px) {
  .site-header { height: 92px; }
  .brand-crop { width: 184px; height: 85px; }
  .brand-crop img { width: 198px; height: 198px; left: -8px; top: -56px; }
  .footer-main .brand-crop { width: 184px; height: 85px; }
  .projects-three { grid-template-columns: 1fr; }
  .projects-three .project-card:last-child { grid-column: auto; width: 100%; }
  .projects-three .project-media { --media-h: 265px; }
  .projects-three .project-card figcaption { min-height: 0; padding: 17px; }
  .projects-three .project-card figcaption strong { font-size: 1.25rem; }
  .projects-three .compile-note { width: 238px; }
  .scene[hidden] { grid-template-columns: 1fr; min-height: 0; }
  .scene.scene-crm[hidden] { padding: 21px; gap: 15px; }
}
@media (max-width: 360px) {
  .method-grid { grid-template-columns: 1fr; }
  .hero-index { max-width: 106px; }
  .hero-stage { aspect-ratio: 1/1.48; }
  .hero-lead { bottom: 45px; }
}