/* /services/development/: product-style landing. Hero with a 3D scene (tilt from dev.js), stack marquee, sticky direction switch
 * with a sliding pill (scroll-spy in dev.js), price panels by direction, AI bot/agent demo, steps with a scroll-driven line.
 * Every effect is decorative: without JS or with reduced motion the page reads the same. Depends on core.css, site.css, marketing.css. */

.dev-page { --dev-sticky: calc(var(--header-h) + 60px); overflow-x: clip; }

/* Hero */
.dev-hero { position: relative; isolation: isolate; padding-block: clamp(20px, 3vw, 40px) clamp(40px, 5vw, 72px); }
.dev-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 75% 35%, #000 10%, transparent 70%); mask-image: radial-gradient(ellipse 70% 80% at 75% 35%, #000 10%, transparent 70%);
}
.dev-hero::after {
  content: ''; position: absolute; z-index: -1; top: -180px; right: -160px; width: 900px; height: 700px; pointer-events: none; filter: blur(28px);
  background: radial-gradient(closest-side at 50% 45%, color-mix(in srgb, var(--violet) 24%, transparent), transparent), radial-gradient(closest-side at 25% 80%, color-mix(in srgb, var(--lime) 18%, transparent), transparent 80%);
}
.dev-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4.5vw, 72px); align-items: center; }
.dev-kicker {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 99px;
  background: color-mix(in srgb, var(--surface) 82%, transparent); box-shadow: var(--shadow-sm); color: var(--ink-2); font-size: .875rem; font-weight: 600;
}
.dev-kicker-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 0 3px color-mix(in srgb, var(--violet) 25%, transparent); }
.dev-title { max-width: 15ch; font-size: clamp(2.375rem, 1.3rem + 3.4vw, 4.375rem); font-weight: 800; letter-spacing: -.05em; line-height: 1; }
.dev-title-grad {
  color: var(--violet); background: linear-gradient(100deg, var(--violet) 0%, #9C90FF 40%, var(--violet) 80%); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.dev-lead { max-width: 54ch; margin-top: 22px; color: var(--ink-2); font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); line-height: 1.6; }
.dev-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.dev-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 600px; margin-top: 32px; border-top: 1px solid var(--line); }
.dev-stats > div { min-width: 0; padding: 14px 14px 0 0; }
.dev-stats > div + div { padding-left: 14px; border-left: 1px solid var(--line); }
.dev-stats dt { color: var(--muted); font-size: .875rem; }
.dev-stats dd { margin: 4px 0 0; color: var(--ink); font: 700 1.0625rem/1.25 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.dev-stats dd[data-count] { font-size: 1.75rem; letter-spacing: -.04em; }

/* 3D scene: a browser, a code window and a phone at different depths; dev.js sets --rx/--ry from the pointer. */
.dev-scene { position: relative; aspect-ratio: 1.08 / 1; max-width: 600px; width: 100%; justify-self: end; perspective: 1400px; }
.dev-scene-inner { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx, 6deg)) rotateY(var(--ry, -10deg)); transition: transform .5s var(--ease); }
.dev-window, .dev-phone, .dev-chip { position: absolute; }
.dev-window { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-lg); }
.dev-window-bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-bottom: 1px solid var(--line-soft); background: var(--surface-2); }
.dev-window-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.dev-window-bar i:first-child { background: #FF6159; } .dev-window-bar i:nth-child(2) { background: #FFBD2E; } .dev-window-bar i:nth-child(3) { background: #28C941; }
.dev-window-bar span { flex: 1; margin-left: 10px; padding: 3px 10px; border-radius: 6px; background: var(--surface-sunken); color: var(--muted); font-size: .875rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dev-browser { top: 4%; left: 0; width: 80%; height: 62%; transform: translateZ(0); }
.dev-browser-body { display: grid; gap: 10px; padding: 16px; }
.sk { display: block; border-radius: 8px; background: linear-gradient(90deg, var(--surface-sunken) 25%, color-mix(in srgb, var(--violet-soft) 70%, var(--surface-sunken)) 50%, var(--surface-sunken) 75%); background-size: 300% 100%; }
.sk-nav { height: 12px; width: 45%; }
.sk-hero { height: 64px; background: linear-gradient(120deg, color-mix(in srgb, var(--violet) 70%, transparent), color-mix(in srgb, var(--violet) 25%, transparent)); }
.sk-line { height: 10px; } .sk-short { width: 60%; }
.sk-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sk-card { height: 46px; }
.dev-code { left: 6%; bottom: 4%; width: 64%; transform: translateZ(60px); border-color: #262636; background: #0E0E16; }
.dev-code .dev-window-bar { border-bottom-color: #1E1E2A; background: #15151F; }
.dev-code .dev-window-bar span { background: #1E1E2A; color: #9EA0B4; }
.dev-code-body { margin: 0; padding: 14px 16px 16px; color: #E6E6F0; font: 500 .875rem/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; overflow: hidden; }
.tk-k { color: #ABA5FF; } .tk-s { color: #C8FF3D; } .tk-c { color: #7D7F95; }
.dev-caret { display: inline-block; width: 8px; height: 1.1em; margin-left: 2px; vertical-align: -.2em; background: #C8FF3D; }
.dev-phone {
  top: 12%; right: 0; width: 34%; height: 80%; display: flex; flex-direction: column; gap: 8px; padding: 26px 10px 12px;
  border: 1px solid var(--line-2); border-radius: 26px; background: var(--surface); box-shadow: var(--shadow-lg), 0 0 0 5px color-mix(in srgb, var(--ink) 8%, transparent); transform: translateZ(110px);
}
.dev-phone-notch { position: absolute; top: 8px; left: 50%; width: 34%; height: 8px; border-radius: 8px; background: var(--line); transform: translateX(-50%); }
.dev-phone-head { display: flex; align-items: center; gap: 6px; color: var(--ink); font-size: .875rem; font-weight: 700; }
.dev-phone-head .icon { width: 16px; height: 16px; color: #2AABEE; }
.sk-tile { height: 70px; background: linear-gradient(140deg, color-mix(in srgb, var(--lime) 70%, transparent), color-mix(in srgb, var(--violet) 40%, transparent)); }
.sk-item { height: 26px; }
.dev-phone-pay { display: grid; place-items: center; height: 32px; margin-top: auto; border-radius: 10px; background: var(--lime); color: var(--lime-ink); font-size: .875rem; font-weight: 700; }
.dev-chip { padding: 6px 12px; border: 1px solid var(--line); border-radius: 99px; background: color-mix(in srgb, var(--surface) 88%, transparent); box-shadow: var(--shadow); color: var(--ink); font-size: .875rem; font-weight: 650; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.dev-chip { transform: translateZ(var(--z)); }
.dev-chip-a { --z: 140px; top: 0; right: 30%; }
.dev-chip-b { --z: 150px; top: 46%; left: -4%; }
.dev-chip-c { --z: 130px; bottom: 0; right: 26%; }
.dev-chip-d { --z: 170px; top: 62%; right: -4%; }

/* Stack marquee */
.dev-marquee { border-block: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 60%, transparent); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.dev-marquee-track { display: flex; width: max-content; }
.dev-marquee ul { display: flex; flex: none; gap: 40px; padding: 18px 20px; }
.dev-marquee li { display: inline-flex; align-items: center; gap: 40px; color: var(--muted); font: 650 1.125rem/1.2 var(--font-display); letter-spacing: -.02em; white-space: nowrap; }
.dev-marquee li::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); }

/* Sticky direction switch with a sliding pill; it sticks only while the price panels (.dev-catalog) are on screen. */
.dev-nav { position: sticky; top: var(--header-h); z-index: 40; padding-block: 10px; background: color-mix(in srgb, var(--bg) 80%, transparent); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px); border-bottom: 1px solid var(--line-soft); }
.dev-nav-track { position: relative; display: flex; width: fit-content; max-width: 100%; margin-inline: auto; padding: 4px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface-sunken); overflow-x: auto; scrollbar-width: none; }
.dev-nav-track::-webkit-scrollbar { display: none; }
.dev-nav-pill { position: absolute; top: 4px; bottom: 4px; left: 0; width: var(--pill-w, 0); border-radius: 99px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-sm); transform: translateX(var(--pill-x, 0)); opacity: 0; transition: transform .35s var(--ease), width .35s var(--ease), opacity .2s; pointer-events: none; }
.dev-nav-track.has-pill .dev-nav-pill { opacity: 1; }
.dev-nav a { position: relative; z-index: 1; display: inline-flex; flex: none; align-items: center; gap: 8px; min-height: 38px; padding: 0 16px; border-radius: 99px; color: var(--muted); font-size: .9375rem; font-weight: 600; white-space: nowrap; transition: color .2s; }
.dev-nav a .icon { width: 1.05rem; height: 1.05rem; }
.dev-nav a:hover, .dev-nav a[aria-current="true"] { color: var(--ink); }
.dev-nav a[aria-current="true"] .icon { color: var(--violet); }
.dev-nav a:focus-visible { outline: 2px solid var(--violet); outline-offset: -2px; }

/* Directions and prices */
.dev-prices, .dev-process { padding-block: clamp(40px, 5vw, 72px) clamp(16px, 2vw, 24px); }
.dev-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px; margin-bottom: clamp(20px, 2.5vw, 32px); }
.dev-section-head h2 { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem); letter-spacing: -.04em; }
.dev-section-head > p { max-width: 58ch; color: var(--muted); }
.dev-section-head > .currency-note { flex-basis: 100%; margin-top: 0; }
.dev-panel {
  --tone-bg: var(--violet-soft); --tone-ink: var(--violet-text);
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: clamp(20px, 3vw, 40px); align-items: start;
  padding: clamp(22px, 3vw, 36px); border: 1px solid var(--line); border-radius: 28px; background: var(--surface); box-shadow: var(--highlight), var(--shadow);
  scroll-margin-top: calc(var(--dev-sticky) + 12px);
}
.dev-panel + .dev-panel { margin-top: 16px; }
.dev-panel[data-dev-stage="frontend"] { --tone-bg: var(--blue-bg); --tone-ink: var(--blue-ink); }
.dev-panel[data-dev-stage="backend"] { --tone-bg: var(--green-bg); --tone-ink: var(--green-ink); }
.dev-panel[data-dev-stage="design"] { --tone-bg: var(--amber-bg); --tone-ink: var(--amber-ink); }
.dev-panel[data-dev-stage="bots"] { --tone-bg: var(--lime-soft); --tone-ink: var(--lime-text); }
.dev-panel-intro { position: sticky; top: calc(var(--dev-sticky) + 20px); display: grid; gap: 12px; }
.dev-panel-icon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; background: var(--tone-bg); color: var(--tone-ink); box-shadow: 0 14px 30px -18px var(--tone-ink); }
.dev-panel-icon .icon { width: 28px; height: 28px; }
.dev-panel-num { color: var(--faint); font-size: .875rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.dev-panel-intro h3 { font-size: clamp(1.375rem, 1.15rem + .8vw, 1.875rem); letter-spacing: -.03em; line-height: 1.15; }
.dev-panel-intro > p { color: var(--muted); font-size: .9375rem; line-height: 1.55; }
.dev-panel-intro .dev-panel-from { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; color: var(--muted); }
.dev-panel-from strong { color: var(--ink); font: 800 clamp(1.5rem, 1.25rem + .8vw, 2rem)/1.1 var(--font-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.dev-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dev-card { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-2); transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); }
.dev-card h4 { font-size: 1.0625rem; line-height: 1.3; }
.dev-card p { margin-top: 6px; color: var(--muted); font-size: .9375rem; line-height: 1.5; }
.dev-card-foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--line-2); }
.dev-card-price strong { display: block; font: 750 1.1875rem/1.2 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.dev-card-price span { color: var(--muted); font-size: .875rem; }
@media (hover: hover) {
  .dev-card:hover { border-color: color-mix(in srgb, var(--tone-ink) 35%, var(--line)); box-shadow: var(--shadow); transform: translateY(-2px); }
}

/* AI bot vs agent: always dark, like the process band on the home page */
.dev-ai-wrap { padding-block: clamp(24px, 3vw, 40px); }
.dev-ai {
  --ink: #F2F2F7; --ink-2: #C9CAD6; --muted: #9EA0B4; --line: rgba(255, 255, 255, .14);
  position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 56px); align-items: center; overflow: hidden;
  padding: clamp(28px, 4.5vw, 60px); border-radius: 32px; background: #0A0A12; color: var(--ink);
}
:root[data-theme="dark"] .dev-ai { background: #0E0E16; border: 1px solid var(--line); }
.dev-ai::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 80% at 100% 0%, rgba(113, 102, 255, .38), transparent 70%), radial-gradient(50% 60% at 0% 100%, rgba(200, 255, 61, .14), transparent 70%); }
.dev-ai-eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; color: var(--ink-2); font-weight: 600; }
.dev-ai h2 { color: #fff; font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem); letter-spacing: -.045em; line-height: 1.05; }
.dev-ai h2 .ai-agent-line { color: var(--lime); }
.dev-ai-copy > p { max-width: 52ch; margin-top: 18px; color: var(--ink-2); font-size: 1.0625rem; line-height: 1.6; }
.dev-ai-switch { display: inline-flex; margin-top: 24px; padding: 4px; border: 1px solid var(--line); border-radius: 99px; background: rgba(255, 255, 255, .06); }
.dev-ai-switch button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 18px; border: 0; border-radius: 99px; background: none; color: var(--muted); font: 600 .9375rem/1 var(--font-sans); cursor: pointer; transition: background-color .2s, color .2s; }
.dev-ai-switch button:hover { color: #fff; }
.dev-ai-switch button[aria-pressed="true"] { background: #fff; color: #0C0C14; }
.dev-ai-switch button:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.dev-ai-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.dev-ai-flows { display: grid; gap: 28px; }
.dev-flow { position: relative; display: grid; gap: 12px; }
.dev-flow::before { content: ''; position: absolute; top: 24px; bottom: 24px; left: 23px; width: 1px; background: linear-gradient(rgba(255, 255, 255, .28), rgba(255, 255, 255, .06)); }
.dev-flow li { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: center; gap: 14px; padding: 10px 14px 10px 0; }
.dev-flow li > .icon { position: relative; z-index: 1; width: 46px; height: 46px; padding: 12px; border: 1px solid var(--line); border-radius: 50%; background: #15151F; color: #fff; }
.dev-flow li:last-child > .icon { border-color: var(--lime); background: var(--lime); color: #11140A; box-shadow: 0 0 0 6px rgba(200, 255, 61, .12), 0 0 26px rgba(200, 255, 61, .35); }
.dev-flow b { display: block; color: #fff; font-size: 1.0625rem; }
.dev-flow span { color: var(--muted); font-size: .9375rem; line-height: 1.4; }
.dev-ai.is-enhanced .dev-ai-flows { min-height: 300px; align-content: center; }

/* Steps: the agreed step in lime, a line that fills as the list scrolls into view */
.dev-steps { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.dev-steps li { position: relative; display: grid; align-content: start; gap: 8px; min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.dev-step-num { width: fit-content; padding: 2px 9px; border-radius: 99px; background: var(--surface-sunken); color: var(--ink-2); font-size: .875rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.dev-steps h3 { font-size: 1.0625rem; }
.dev-steps p { color: var(--muted); font-size: .9375rem; line-height: 1.5; }
.dev-steps li.is-agreed { border-color: color-mix(in srgb, var(--lime) 55%, var(--line)); background: linear-gradient(180deg, var(--lime-soft), var(--surface) 70%); }
.dev-steps li.is-agreed .dev-step-num { background: var(--lime); color: var(--lime-ink); }
.dev-steps::before { content: ''; position: absolute; top: -14px; left: 0; right: 0; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--violet), var(--lime)); transform-origin: left; }

.dev-faq { padding-top: clamp(40px, 5vw, 72px); }
.dev-faq, .dev-page .closing-wrap { content-visibility: auto; contain-intrinsic-size: auto 640px; }

/* Motion: only with no reduced-motion preference */
@media (prefers-reduced-motion: no-preference) {
  .dev-title-grad { animation: dev-sheen 8s ease-in-out infinite; }
  .sk { animation: dev-shimmer 2.4s ease-in-out infinite; }
  .dev-caret { animation: dev-blink 1.1s steps(1) infinite; }
  .dev-chip { animation: dev-float 6s ease-in-out infinite; }
  .dev-chip-b { animation-delay: -1.5s; } .dev-chip-c { animation-delay: -3s; } .dev-chip-d { animation-delay: -4.5s; }
  .dev-marquee-track { animation: dev-marquee 48s linear infinite; }
  .dev-marquee:hover .dev-marquee-track { animation-play-state: paused; }
  .dev-ai.is-enhanced .dev-flow:not([hidden]) li { animation: dev-flow-in .5s var(--ease) both; }
  .dev-ai.is-enhanced .dev-flow li:nth-child(2) { animation-delay: .12s; } .dev-ai.is-enhanced .dev-flow li:nth-child(3) { animation-delay: .24s; } .dev-ai.is-enhanced .dev-flow li:nth-child(4) { animation-delay: .36s; }
  @supports (animation-timeline: view()) {
    html:not(.fx) .dev-steps::before { animation: dev-fill linear both; animation-timeline: view(); animation-range: entry 20% cover 50%; }
  }
}
@keyframes dev-sheen { 50% { background-position: 100% 0; } }
@keyframes dev-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes dev-blink { 50% { opacity: 0; } }
/* The float moves transform, so the translate property stays free for the scroll (motion block below). */
@keyframes dev-float { 50% { transform: translateZ(var(--z)) translateY(-8px); } }
/* Three copies of the list: the loop moves one copy, the scroll can add up to one more without a gap. */
@keyframes dev-marquee { to { transform: translateX(-33.3333%); } }
@keyframes dev-flow-in { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@keyframes dev-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .dev-marquee-track { width: auto; }
  .dev-marquee ul { flex-wrap: wrap; justify-content: center; gap: 12px 28px; }
  .dev-marquee ul[aria-hidden] { display: none; }
}

@media (max-width: 1120px) {
  .dev-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dev-panel { grid-template-columns: minmax(0, 1fr); }
  .dev-panel-intro { position: static; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 16px; }
  .dev-panel-intro > :not(.dev-panel-icon) { grid-column: 1 / -1; }
  .dev-panel-intro .dev-panel-num { grid-column: 2; grid-row: 1; }
}
@media (max-width: 960px) {
  .dev-hero-grid, .dev-ai { grid-template-columns: minmax(0, 1fr); }
  .dev-scene { justify-self: center; max-width: 520px; margin-top: 28px; }
}
@media (max-width: 720px) {
  .dev-cards { grid-template-columns: minmax(0, 1fr); }
  .dev-steps { grid-template-columns: minmax(0, 1fr); }
  .dev-steps li { grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; }
  .dev-steps li p { grid-column: 2; }
  .dev-steps::before { display: none; }
  .dev-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dev-stats > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .dev-stats > div:nth-child(n+3) { margin-top: 12px; border-top: 1px solid var(--line); }
  .dev-nav-track { margin-inline: 0; }
  .dev-nav a { padding: 0 12px; }
}
@media (max-width: 560px) {
  .dev-actions .button, .dev-ai-actions .button { flex: 1 1 auto; }
  .dev-scene { aspect-ratio: 1 / 1; }
  .dev-chip-b, .dev-chip-d { display: none; }
  .dev-code { width: 84%; }
  .dev-code-body { padding: 10px 12px; }
  .dev-panel { padding: 18px; border-radius: 22px; }
  .dev-card { padding: 16px; }
}

/* Scroll scenes (motion.js + motion.css, docs/DESIGN.md §7). Everything below needs html.fx; without it the page above is final. */

/* Hero: scrolling away takes the product scene apart — browser, code, phone and chips drift to their own depths while the whole
   scene turns. The pointer tilt from dev.js keeps working on top of it (transform there, rotate/translate here). */
.fx .dev-hero-copy { translate: 0 calc(var(--p) * -56px); }
.fx .dev-scene-inner { rotate: 1 -1 0 calc(var(--p) * 12deg); }
.fx .dev-browser { translate: calc(var(--p) * -48px) calc(var(--p) * -36px) calc(var(--p) * -90px); }
.fx .dev-code { translate: calc(var(--p) * -28px) calc(var(--p) * 44px) calc(var(--p) * 110px); }
.fx .dev-phone { translate: calc(var(--p) * 72px) calc(var(--p) * 8px) calc(var(--p) * 190px); }
.fx .dev-chip-a { translate: calc(var(--p) * 20px) calc(var(--p) * -90px) calc(var(--p) * 120px); }
.fx .dev-chip-b { translate: calc(var(--p) * -110px) calc(var(--p) * -10px) calc(var(--p) * 120px); }
.fx .dev-chip-c { translate: calc(var(--p) * 30px) calc(var(--p) * 90px) calc(var(--p) * 120px); }
.fx .dev-chip-d { translate: calc(var(--p) * 110px) calc(var(--p) * 20px) calc(var(--p) * 120px); }

/* Stack marquee: a cover scene — the page scroll pushes the slow loop along by up to one more copy. */
.fx .dev-marquee-track { translate: calc(var(--p) * -33.3333%) 0; }

/* Direction panels: the icon turns in, the title and the entry price slide over, the service cards assemble one by one. */
.fx .dev-panel-intro { --a: 0; --b: .6; }
.fx .dev-panel-icon { rotate: calc((1 - var(--e)) * -120deg); scale: calc(.4 + .6 * var(--e)); }
.fx .dev-panel-intro > :not(.dev-panel-icon) { opacity: calc(.1 + .9 * var(--e)); translate: calc((1 - var(--e)) * -24px) 0; }
.fx .dev-cards { --from: .12; --stagger: .08; --len: .4; }
.fx .dev-card { opacity: calc(.1 + .9 * var(--e)); translate: 0 calc((1 - var(--e)) * 32px); scale: calc(.96 + .04 * var(--e)); }

/* AI: on wide screens the card pins; the first half of the scroll is the bot (it answers), the second the agent (it acts).
   The headline lights the matching line, each flow draws its line and its steps in order. */
.fx .dev-ai-pin[data-mode="pin"] { --pin: 240vh; }
.fx .dev-ai-pin[data-mode="pin"] .dev-ai-stage { display: grid; align-content: center; }
.fx .dev-ai-pin[data-mode="pin"] .dev-ai h2 > span { opacity: .45; transition: opacity .35s var(--ease); }
.fx .dev-ai-pin[data-mode="pin"][data-step="0"] .ai-bot-line, .fx .dev-ai-pin[data-mode="pin"][data-step="1"] .ai-agent-line { opacity: 1; }
.fx .dev-ai-pin[data-mode="pin"] [data-flow="bot"] { --from: .04; --stagger: .1; --len: .12; --fa: .04; }
.fx .dev-ai-pin[data-mode="pin"] [data-flow="agent"] { --from: .54; --stagger: .08; --len: .1; --fa: .54; }
.fx .dev-ai-pin[data-mode="pin"] .dev-flow li { animation: none; opacity: calc(.15 + .85 * var(--e)); translate: calc((1 - var(--e)) * -16px) 0; }
.fx .dev-ai-pin[data-mode="pin"] .dev-flow::after { content: ''; position: absolute; top: 24px; bottom: 24px; left: 23px; width: 1px; background: linear-gradient(var(--violet), var(--lime)); transform-origin: top; scale: 1 clamp(0, (var(--p) - var(--fa)) / .32, 1); }

/* Order steps: the line fills and the cards flip up in turn, like stages of a pipeline. */
.fx .dev-steps { perspective: 1200px; --from: .05; --stagger: .13; --len: .3; }
.fx .dev-steps::before { transform: scaleX(var(--p)); }
.fx .dev-steps li { transform-origin: 50% 0; opacity: calc(.12 + .88 * var(--e)); rotate: x calc((1 - var(--e)) * -70deg); }
@media (max-width: 720px) {
  .fx .dev-steps { --from: .08; --stagger: .08; --len: .2; }
}