/* Motion and geometry use the original Gheetah palette defined in index.html. */
body { overflow-x: clip; }
::selection { background: var(--accent-line); color: var(--ink); }
.navbar { transition: box-shadow .3s; }
.navbar.is-scrolled { box-shadow: 0 8px 35px #2a2b3d0c; }
.navbar-links a { position: relative; padding-block: 8px; }
.navbar-links a::after { content: ''; position: absolute; inset: auto 0 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.navbar-links a:hover::after, .navbar-links a[aria-current]::after { transform: scaleX(1); }
.btn { transition: transform .25s, background .25s, box-shadow .25s, border-color .25s; }
.btn:hover { transform: translateY(-3px); }
.hero { position: relative; isolation: isolate; overflow: hidden; padding-top: 82px; }
.hero::before { content: ''; position: absolute; z-index: -1; width: 800px; height: 800px; right: -260px; top: -310px; border: 1px solid #8b7aa925; border-radius: 50%; box-shadow: 0 0 0 80px #8b7aa906, 0 0 0 160px #8b7aa905; pointer-events: none; }
.hero-inner { gap: 44px; }
.hero h1 { font-size: clamp(42px, 4.5vw, 66px); line-height: 1.08; letter-spacing: -.055em; }
.hero .eyebrow { border-radius: 24px; padding: 8px 12px; }
.hero .eyebrow::before { border-radius: 50%; animation: beacon 3s ease-in-out infinite; }
.hero-product.abstract-product { position: relative; padding: 0; min-width: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; overflow: visible; }
.scene-toolbar { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 22px; }
.scene-index { color: var(--ink-muted); font: 10px/1.5 Consolas, monospace; letter-spacing: .12em; }
.motion-toggle { border: 1px solid var(--border-strong); background: #ffffff80; color: var(--ink-soft); border-radius: 20px; padding: 6px 10px; font-size: 10px; cursor: pointer; }
.motion-toggle:hover { border-color: var(--accent); color: var(--accent-dark); }
.automation-scene { position: relative; height: 410px; perspective: 1000px; isolation: isolate; }
.scene-grid { position: absolute; inset: 40% -10% -20%; background-image: linear-gradient(#8b7aa918 1px, transparent 1px), linear-gradient(90deg, #8b7aa918 1px, transparent 1px); background-size: 28px 28px; transform: rotateX(65deg); mask-image: radial-gradient(ellipse, black, transparent 65%); }
.scene-halo { position: absolute; inset: 12% 15%; border-radius: 50%; background: radial-gradient(ellipse, #c17f3a15, #8b7aa915 45%, transparent 70%); filter: blur(20px); animation: halo-breathe 6s ease-in-out infinite; }
.scene-connections { position: absolute; inset: 0; height: 100%; width: 100%; overflow: visible; }
.connection-base { stroke: #8b7aa940; stroke-width: 1; stroke-dasharray: 3 7; }
.connection-signal { stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 32 1100; animation: flow-signal 10s linear infinite; filter: drop-shadow(0 0 3px #c17f3a50); }
.orbital-model { position: absolute; top: 48%; left: 50%; width: 210px; height: 210px; transform: translate(-50%, -50%); perspective: 800px; }
.orbit { position: absolute; top: 0; left: 0; width: 210px; height: 210px; border: 1px solid #8b7aa970; border-radius: 50%; transform-style: preserve-3d; }
.orbit::before { content: ''; position: absolute; top: 22px; left: 26px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px #c17f3a12; }
.orbit-one { animation: orbit-a 18s linear infinite; }
.orbit-two { border-color: #c17f3a65; animation: orbit-b 22s linear infinite; }
.orbit-three { border-color: #8b7aa940; animation: orbit-c 26s linear infinite; }
.model-core { position: absolute; width: 132px; height: 125px; top: 42px; left: 39px; transform-style: preserve-3d; animation: logo-turn 10s ease-in-out infinite; }
.logo-depth, .logo-back { position: absolute; inset: 0; -webkit-mask: url('../img/gheetah-mark.svg') center / contain no-repeat; mask: url('../img/gheetah-mark.svg') center / contain no-repeat; background: linear-gradient(135deg, #e5c8a9, #c17f3a 35%, #925b22 80%); }
.logo-depth { transform: translateZ(calc(var(--layer) * 1.2px - 8px)); }
.logo-back { transform: translateZ(-9px); background: #925b22; }
.logo-face { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transform: translateZ(9px); backface-visibility: hidden; filter: drop-shadow(0 1px 1px #925b2250); }
.webgl-logo { position: absolute; width: 300px; height: 300px; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.has-webgl-logo .model-core, .has-webgl-logo .core-shadow { visibility: hidden; }
.core-shadow { position: absolute; width: 110px; height: 23px; left: 50px; bottom: -7px; border-radius: 50%; background: #4b456825; filter: blur(10px); animation: shadow-breathe 6s ease-in-out infinite; }
.scene-node { position: absolute; display: flex; align-items: center; gap: 10px; min-height: 69px; padding: 12px 15px; border: 1px solid #d3d6e6; border-radius: 15px; background: #ffffffeb; box-shadow: 0 14px 35px #4b456814, inset 0 1px #fff; transition: border-color .6s, box-shadow .6s; animation: node-float 6s ease-in-out infinite; }
.scene-node small { display: block; color: var(--ink-muted); font: 9px/1.5 Consolas, monospace; letter-spacing: .07em; }
.scene-node strong { display: flex; align-items: center; gap: 7px; color: var(--ink); font-size: 13px; margin-top: 3px; }
.node-ai { top: 31px; left: 22px; animation-delay: -1s; }
.node-bdd { top: 119px; right: 14px; animation-delay: -3s; }
.node-jira { bottom: 30px; left: 56px; animation-delay: -5s; }
.node-symbol { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; background: var(--accent-soft); color: var(--accent-dark); border-radius: 10px; font-size: 24px; }
.jira-symbol { background: #eeebf6; color: #4b4568; font-size: 32px; }
.node-spark { color: var(--accent); font-size: 22px; }
.node-check { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; color: #925b22; background: #fbf0e3; font-size: 11px; }
.typing-dots { display: flex; gap: 3px; }
.typing-dots i { width: 3px; height: 3px; background: var(--accent); border-radius: 50%; animation: dot-pulse 1.4s infinite; }
.typing-dots i:nth-child(2) { animation-delay: .2s; }.typing-dots i:nth-child(3) { animation-delay: .4s; }
.sync-arrow { color: var(--accent); animation: sync-rise 2s ease-in-out infinite; }
.scene-coordinate { position: absolute; font: 8px/1.5 Consolas, monospace; letter-spacing: .14em; color: #8b7aa9; }
.coordinate-a { left: 22px; bottom: 6px; }.coordinate-b { right: 22px; top: 10px; }
[data-stage=ai] .node-ai, [data-stage=bdd] .node-bdd, [data-stage=jira] .node-jira { border-color: var(--accent); box-shadow: 0 12px 35px #c17f3a22, 0 0 0 4px #c17f3a08; }
.workflow-tabs { position: relative; z-index: 2; display: flex; gap: 5px; margin: 0 18px; padding: 5px; border: 1px solid #d3d6e680; border-radius: 14px; background: #ffffff65; }
.workflow-tabs button { flex: 1; min-width: 0; border: 0; padding: 10px 4px; border-radius: 10px; background: transparent; color: var(--ink-soft); font-size: 11px; cursor: pointer; transition: background .3s, box-shadow .3s; }
.workflow-tabs button span { color: var(--accent-dark); font: 9px Consolas, monospace; margin-right: 4px; }
.workflow-tabs button[aria-pressed=true] { background: #fff; color: var(--ink); box-shadow: 0 3px 10px #4b456810; }
.workflow-caption { padding: 14px 22px 20px; min-height: 66px; text-align: center; font-size: 12px; line-height: 1.65; color: var(--ink-soft); }
.product-evidence { float: right; width: 34%; margin: 0 0 32px 40px; transform: perspective(900px) rotateY(-7deg); }
#codeless .section-head { display: block; max-width: 60%; margin-bottom: 54px; }
#codeless .section-head h2 { max-width: 23ch; margin-bottom: 20px; }
#codeless .split { clear: both; }
.hero-product .shot figcaption { background: var(--surface); color: var(--ink-muted); }
.shot, .clip { transition: transform .5s var(--ease), box-shadow .5s; }
.shot:hover, .clip:hover { transform: translateY(-5px); box-shadow: 0 25px 60px #2a2b3d18; }
#projects .card { transition: padding .3s; } #projects .card:hover { padding-inline: 14px; }
#results .card, .plan, #bdd-test-automation .card { transition: transform .35s, box-shadow .35s; }
#results .card:hover, .plan:hover, #bdd-test-automation .card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px #2a2b3d12; }
.billing-toggle { width: fit-content; padding: 6px; border: 1px solid var(--border); border-radius: 14px; }
.billing-tab { border-radius: 9px; }
.reading-progress { position: fixed; top: 0; left: 0; z-index: 10050; height: 3px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.motion-ready .reveal { opacity: 0; transform: translateY(28px); transition: opacity .75s var(--ease), transform .75s var(--ease); }
.motion-ready .reveal.shown { opacity: 1; transform: translateY(0); }
.motion-paused *, .motion-paused *::before, .motion-paused *::after, .scene-sleep * { animation-play-state: paused !important; }
@keyframes logo-turn { 0%, 100% { transform: rotateX(-10deg) rotateY(-28deg) rotateZ(-5deg) translateY(0); } 50% { transform: rotateX(12deg) rotateY(28deg) rotateZ(5deg) translateY(-9px); } }
@keyframes orbit-a { from { transform: rotateX(68deg) rotateY(-20deg) rotateZ(0); } to { transform: rotateX(68deg) rotateY(-20deg) rotateZ(360deg); } }
@keyframes orbit-b { from { transform: rotateX(28deg) rotateY(66deg) rotateZ(0); } to { transform: rotateX(28deg) rotateY(66deg) rotateZ(-360deg); } }
@keyframes orbit-c { from { transform: rotateX(-48deg) rotateY(32deg) rotateZ(0); } to { transform: rotateX(-48deg) rotateY(32deg) rotateZ(360deg); } }
@keyframes node-float { 50% { translate: 0 -9px; } }
@keyframes halo-breathe { 50% { scale: 1.15; opacity: .6; } }
@keyframes shadow-breathe { 50% { scale: .8; opacity: .6; } }
@keyframes flow-signal { to { stroke-dashoffset: -1132; } }
@keyframes dot-pulse { 50% { opacity: .3; } }
@keyframes sync-rise { 50% { translate: 2px -2px; } }
@keyframes packet { 0% { left: 0; opacity: 0; } 20%, 80% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes beacon { 50% { box-shadow: 0 0 0 7px #c17f3a10; } }
@media (max-width: 1100px) and (min-width: 901px) { .hero-inner { gap: 24px; } .scene-node { padding: 10px; gap: 7px; }.node-ai { left: 10px; }.node-bdd { right: 8px; top: 145px; }.node-jira { left: 24px; }.scene-node strong { font-size: 11px; } .node-symbol { width: 28px; height: 28px; } }
@media (max-width: 900px) { .hero { padding-top: 48px; }.hero h1 { font-size: 54px; }.abstract-product { width: 100%; max-width: 650px; margin-inline: auto; }.hero-inner { gap: 36px; }.product-evidence { float: none; width: 100%; max-width: 600px; margin: 0 auto 40px; transform: none; }#codeless .section-head { max-width: none; } }
@media (max-width: 600px) { .hero h1 { font-size: clamp(34px, 10vw, 43px); }.automation-scene { height: 365px; }.scene-toolbar { padding: 14px; }.scene-index { font-size: 9px; }.motion-toggle { font-size: 9px; }.scene-node { min-height: 58px; padding: 9px 10px; gap: 7px; }.scene-node small { font-size: 8px; }.scene-node strong { font-size: 11px; }.node-symbol { width: 28px; height: 28px; font-size: 21px; }.node-ai { left: 12px; top: 18px; }.node-bdd { top: 131px; right: 8px; }.node-jira { left: 25px; bottom: 25px; }.orbital-model { left: 45%; width: 180px; height: 180px; }.orbit { width: 180px; height: 180px; }.model-core { left: 24px; top: 29px; }.core-shadow { left: 35px; }.workflow-tabs { margin-inline: 10px; }.workflow-tabs button { font-size: 10px; }.workflow-tabs button span { display: none; }.workflow-caption { font-size: 11px; padding-inline: 14px; }.billing-toggle { width: 100%; }.billing-tab { flex: 1 1 40%; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } html { scroll-behavior: auto; }.motion-ready .reveal { opacity: 1; transform: none; }.model-core { transform: rotateX(-10deg) rotateY(-20deg) rotateZ(-4deg); }.orbit-one { transform: rotateX(68deg) rotateY(-20deg); }.orbit-two { transform: rotateX(28deg) rotateY(66deg); }.orbit-three { transform: rotateX(-48deg) rotateY(32deg); } }

/* Product screen and moving workflow share a single visual frame. */
#jira .split { align-items: center; }
.jira-visual { min-width: 0; border: 1px solid var(--border-strong); border-radius: 20px; background: var(--surface); box-shadow: 0 22px 55px #4b456812; overflow: hidden; }
.jira-visual .shot { width: 100%; border: 0; border-radius: 0; box-shadow: none; }
.jira-visual .shot:hover { transform: none; box-shadow: none; }
.jira-visual .shot img { width: 100%; height: auto; }
.live-conduit { padding: 13px 24px 11px; border-top: 1px solid var(--border); background: linear-gradient(115deg, #f8f9fc, #eeebf660 60%, #fbf0e340); }
.conduit-heading { display: flex; align-items: center; gap: 8px; margin-bottom: 13px; color: var(--ink-muted); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; }
.conduit-status { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); animation: conduit-beacon 2s ease-in-out infinite; }
.conduit-loop { margin-left: auto; color: var(--accent-dark); font-size: 17px; display: inline-block; animation: conduit-spin 9s linear infinite; }
.conduit-route { display: grid; grid-template-columns: auto minmax(20px,1fr) auto minmax(20px,1fr) auto; gap: 10px; align-items: center; padding-block: 5px 13px; }
.conduit-node { position: relative; display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: 12px; background: #ffffffeb; color: var(--ink); font-size: 12px; box-shadow: 0 7px 16px #4b45680a; animation: conduit-float 4s ease-in-out infinite; }
.conduit-node svg { width: 18px; height: 18px; stroke: var(--accent-dark); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.conduit-ai { animation-delay: -.6s; }
.conduit-ai svg { animation: conduit-turn 6s ease-in-out infinite; }
.conduit-bdd { gap: 7px; font: 11px/1.4 Consolas, monospace; animation-delay: -1.6s; overflow: hidden; }
.conduit-bdd b { font-weight: 400; color: var(--accent); }
.conduit-bdd > span:not(.conduit-scan) { position: relative; z-index: 1; animation: conduit-token 4s infinite; }
.conduit-bdd > span:nth-of-type(2) { animation-delay: .6s; }.conduit-bdd > span:nth-of-type(3) { animation-delay: 1.2s; }
.conduit-scan { position: absolute; top: 0; bottom: 0; width: 35px; left: -40px; background: linear-gradient(90deg, transparent, #e5c8a945, transparent); animation: conduit-scan 4s ease-in-out infinite; }
.conduit-jira { animation-delay: -2.6s; }
.conduit-check { color: var(--accent-dark); animation: conduit-confirm 4s ease-in-out infinite; }
.conduit-link { position: relative; height: 2px; background: var(--border-strong); border-radius: 2px; }
.conduit-link i { position: absolute; width: 6px; height: 6px; top: -2px; left: 0; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px #c17f3a12; animation: conduit-packet 2.7s ease-in-out infinite; }
.conduit-link i:nth-child(2) { animation-delay: .9s; }.conduit-link i:nth-child(3) { animation-delay: 1.8s; }
.conduit-link-result i { animation-delay: .5s; }.conduit-link-result i:nth-child(2) { animation-delay: 1.4s; }.conduit-link-result i:nth-child(3) { animation-delay: 2.3s; }
.conduit-footer { display: flex; align-items: center; gap: 12px; margin-top: 9px; font: 9px/1.5 Consolas, monospace; color: var(--ink-muted); }
.conduit-footer-line { flex: 1; height: 1px; background: var(--border); }
.workflow-sleep *, .workflow-sleep *::before, .workflow-sleep *::after { animation-play-state: paused !important; }
@keyframes conduit-packet { 0% { left: 0; opacity: 0; scale: .5; } 15%, 75% { opacity: 1; scale: 1; } 100% { left: 100%; opacity: 0; scale: .5; } }
@keyframes conduit-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes conduit-scan { 0%, 10% { left: -40px; } 80%, 100% { left: 110%; } }
@keyframes conduit-token { 0%, 100% { color: #4d4f66; } 25%, 45% { color: #925b22; } }
@keyframes conduit-confirm { 0%, 40% { opacity: .3; transform: scale(.8); } 65%, 90% { opacity: 1; transform: scale(1.15); } 100% { opacity: .3; transform: scale(.8); } }
@keyframes conduit-turn { 0%, 75%, 100% { transform: rotate(0); } 35% { transform: rotate(90deg); } }
@keyframes conduit-spin { to { transform: rotate(360deg); } }
@keyframes conduit-beacon { 50% { box-shadow: 0 0 0 4px #c17f3a15; } }
@media (max-width: 900px) { .jira-visual { width: 100%; max-width: 760px; margin-inline: auto; } }
@media (max-width: 600px) { .live-conduit { padding: 16px 12px 14px; }.conduit-route { gap: 6px; grid-template-columns: auto minmax(12px,1fr) auto minmax(12px,1fr) auto; }.conduit-node { padding: 10px 7px; min-height: 43px; gap: 4px; font-size: 10px; border-radius: 9px; }.conduit-node svg { width: 13px; height: 13px; }.conduit-bdd { font-size: 9px; gap: 3px; }.conduit-check { display: none; }.conduit-heading { margin-bottom: 18px; font-size: 9px; }.conduit-footer { font-size: 8px; } }
@media (prefers-reduced-motion: reduce) { .conduit-link i { opacity: .65; left: 50%; }.conduit-check { opacity: 1; } }

/* Results: a report-led feature library, with room for each capability. */
#results { position: relative; overflow: clip; }
#results .wrap { grid-template-columns: minmax(0,.72fr) minmax(0,1.28fr); gap: 64px; }
#results .section-head h2 { font-size: clamp(34px,3.6vw,48px); letter-spacing: -.045em; }
#results .cards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; border: 0; border-radius: 0; background: transparent; overflow: visible; }
#results .results-card { position: relative; padding: 24px; border: 1px solid #d3d6e6; border-radius: 18px; background: #f8f9fc; box-shadow: 0 5px 20px #4b456804; overflow: hidden; }
#results .results-card:hover { border-color: #c17f3a80; box-shadow: 0 15px 35px #4b456810; }
#results .results-card h3 { font-size: 16px; margin: 0 0 10px; }
#results .results-card p { font-size: 12px; line-height: 1.8; }
.result-card-top { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 18px; }
.result-icon { display: grid; place-items: center; width: 31px; height: 31px; color: var(--accent-dark); border: 1px solid #e5c8a9; background: #fbf0e3; border-radius: 9px; }
.result-icon svg { width: 19px; height: 19px; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.result-index { font: 10px/1.5 Consolas,monospace; color: #a9acc3; letter-spacing: .06em; }
#results .results-card.results-live { grid-column: 1/-1; display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: 0 24px; background: linear-gradient(125deg,#323348,#4b4568); border-color: #555872; box-shadow: 0 18px 35px #4b45681a; }
.results-live .result-card-top { grid-column: 1/-1; margin-bottom: 16px; }
#results .results-live h3 { color: #eceef8; grid-column: 1; }
#results .results-live p { color: #c2c5d8; grid-column: 1; }
.results-live .result-icon { background: #ffffff09; border-color: #ffffff25; color: #edbe89; }
.results-live .result-index { color: #c2c5d8; }
.result-console { grid-column: 2; grid-row: 2/span 2; align-self: center; min-width: 0; border: 1px solid #ffffff20; border-radius: 10px; background: #2a2b3d; box-shadow: 0 12px 22px #2a2b3d30; overflow: hidden; }
.result-console-head { display: flex; align-items: center; gap: 4px; padding: 9px 10px; border-bottom: 1px solid #ffffff12; }
.result-console-head > span { width: 4px; height: 4px; border-radius: 50%; background: #8b7aa9; }
.result-console-head > span:first-child { background: #c17f3a; }
.result-console-head i { margin-left: auto; color: #a9acc3; font: normal 8px/1.5 Consolas,monospace; }
.result-console-body { padding: 10px 12px 12px; }
.result-console-body > div { display: flex; align-items: center; gap: 7px; height: 25px; font: 9px/1.5 Consolas,monospace; }
.result-console-body em { font-style: normal; color: #737586; }
.result-console-body b { min-width: 32px; color: #edbe89; font-weight: 400; }
.console-trace { height: 3px; flex: 1; background: #73758660; border-radius: 2px; transform-origin: left; animation: result-stream 5s ease-in-out infinite; }
.trace-two { max-width: 55%; animation-delay: .6s; }.trace-three { max-width: 40%; animation-delay: 1.2s; }
.console-cursor { width: 4px; height: 10px; background: #edbe89; animation: result-cursor 1.2s steps(2,end) infinite; }
.result-step-track { display: flex; align-items: center; gap: 7px; margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--border); font: 9px/1.5 Consolas,monospace; color: var(--ink-muted); }
.result-step-track span { display: grid; gap: 6px; text-align: center; }
.result-step-track i { display: grid; place-items: center; width: 15px; height: 15px; margin: auto; font-style: normal; border: 1px solid #e5c8a9; border-radius: 50%; color: var(--accent-dark); font-size: 9px; animation: result-check 6s infinite; }
.result-step-track span:nth-of-type(2) i { animation-delay: .6s; }.result-step-track span:nth-of-type(3) i { animation-delay: 1.2s; }
.result-step-track b { flex: 1; height: 1px; background: var(--border-strong); }
.result-history-track { display: flex; gap: 4px; align-items: center; margin-top: 24px; height: 25px; }
.result-history-track i { flex: 1; min-width: 1px; height: 12px; border-radius: 2px; background: #d3d6e6; animation: result-history 5s ease-in-out infinite; animation-delay: calc(var(--tick) * .08s); }
.result-analysis-trace { display: block; width: 100%; height: 34px; margin-top: 21px; fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 320; animation: result-trace 7s ease-in-out infinite; }
.result-destinations { display: flex; align-items: center; justify-content: space-between; gap: 5px; margin-top: 22px; padding-top: 15px; border-top: 1px solid var(--border); font-size: 10px; color: var(--ink-soft); }
.result-destinations i { font-style: normal; color: var(--accent); animation: result-delivery 4s ease-in-out infinite; }.result-destinations i:nth-of-type(2) { animation-delay: .8s; }
#results .results-codeless { grid-column: 1/-1; display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: 0 28px; background: linear-gradient(115deg,#fbf0e3,#f8f9fc); border-color: #e5c8a9; }
.results-codeless .result-card-top { grid-column: 1/-1; }
.results-codeless h3, .results-codeless p { grid-column: 1; }
.result-codeless-mark { grid-column: 2; grid-row: 2/span 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; align-self: center; gap: 12px; min-height: 90px; }
.result-codeless-mark > span { display: grid; place-items: center; width: 34px; height: 34px; background: #ffffffb0; border: 1px solid #e5c8a9; border-radius: 10px; font-size: 11px; color: var(--accent-dark); animation: conduit-float 4s ease-in-out infinite; }
.result-codeless-mark > b { order: 4; width: 100%; text-align: center; font: 9px/1.5 Consolas,monospace; color: var(--ink-muted); }
.result-codeless-mark > i { color: var(--accent); font-style: normal; }.result-codeless-mark > i:nth-of-type(2) { display: none; }
.result-history-signature { display: flex; align-items: center; gap: 22px; margin-top: 34px; padding-top: 28px; border-top: 1px solid #d3d6e6; }
.result-history-number { display: flex; align-items: flex-start; gap: 9px; font-size: 60px; font-weight: 600; line-height: 1; letter-spacing: -.06em; color: #4b4568; }
.result-history-number > span { font-size: 22px; color: var(--accent); letter-spacing: 0; }
.result-history-signature strong { display: block; margin-bottom: 9px; font-size: 12px; font-weight: 600; color: var(--ink); }
.result-history-signature a { color: var(--accent-dark); font-size: 11px; border-bottom: 1px solid #e5c8a9; padding-bottom: 3px; }
.result-history-signature a::after { content: ' ↗'; }
@keyframes result-stream { 0%,100% { transform: scaleX(.45); opacity: .4; } 40%,70% { transform: scaleX(1); opacity: 1; } }
@keyframes result-cursor { 50% { opacity: 0; } }
@keyframes result-check { 0%,100% { background: transparent; } 35%,70% { background: #fbf0e3; border-color: #c17f3a; } }
@keyframes result-history { 0%,100% { background: #d3d6e6; transform: scaleY(.8); } 40% { background: #c17f3a90; transform: scaleY(1.3); } }
@keyframes result-trace { 0%,5% { stroke-dashoffset: 320; opacity: .35; } 50%,85% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: .35; } }
@keyframes result-delivery { 50% { transform: translate(2px,-2px); } }
@media (max-width: 1150px) { #results .wrap { gap: 36px; }.result-console-body { padding-inline: 9px; } }
@media (max-width: 900px) { #results .wrap { grid-template-columns: 1fr; gap: 32px; }#results .section-head { max-width: 720px; }.result-history-signature { margin-top: 24px; padding-top: 22px; }.result-history-number { font-size: 48px; } }
@media (max-width: 600px) { .live-conduit { padding-block: 10px; }.conduit-heading { margin-bottom: 10px; }.conduit-node { min-height: 38px; padding-block: 8px; }.conduit-route { padding-bottom: 7px; }.conduit-footer { margin-top: 5px; }#results .cards { grid-template-columns: 1fr; gap: 14px; }#results .results-card { padding: 22px; }#results .results-live,#results .results-codeless { grid-template-columns: 1fr; }.result-console { grid-column: 1; grid-row: auto; margin-top: 18px; }.result-console-body > div { height: 24px; }.result-console { max-width: none; }.result-codeless-mark { grid-column: 1; grid-row: auto; margin-top: 18px; padding-top: 16px; border-top: 1px solid #e5c8a9; min-height: 70px; }.result-card-top { margin-bottom: 14px; } }