.hero {
  background: radial-gradient(1200px 600px at 75% 10%, #1b2a5a 0%, transparent 60%), var(--ink);
  color: #fff; position: relative; overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 44px 44px;
}
.hero-grid {
  position: relative; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 32px; align-items: center; max-width: 1440px;
  min-height: calc(100vh - 68px); padding-block: 48px 40px;
}
.hero-copy .eyebrow { color: var(--shirt); }
.hero-copy h1 { font-size: clamp(2.3rem, 4.1vw, 3.7rem); }
.hero-copy h1 em { font-style: normal; color: var(--shirt); }
.hero-copy h1 .h1-line { display: block; }
.hero-copy h1 .h1-sub { display: block; margin-top: .45em; font-family: var(--mono); font-size: .3em; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: #b8c1d9; }
.hero-copy .lead { color: #b8c1d9; }
.hero-copy .lead .hl { color: var(--shirt); font-weight: 700; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-ctas .btn-ghost { color: #fff; border-color: rgba(255,255,255,.35); }

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-block: 40px 24px; }
}
.intro-mobile { display: none; background: var(--ink-2); color: #fff; padding-block: 56px 56px; border-top: 1px solid rgba(255,255,255,.08); }
.intro-mobile { text-align: center; }
.intro-mobile .lead { color: #c9d1e6; font-size: 1.15rem; margin: 0 auto; }
.intro-mobile .hero-ctas { justify-content: center; }
.intro-mobile .hero-ctas .btn-ghost { color: #fff; border-color: rgba(255,255,255,.35); }

@media (max-width: 600px) {
  .hero-grid { gap: 18px; padding-block: 28px 52px; }
  .hero-copy { display: contents; }
  .hero-copy .eyebrow { order: 1; margin-bottom: 0; }
  .hero-copy h1 { order: 2; margin: 0; }
  .stage { order: 3; }
  .hero-copy .lead, .hero-copy .hero-ctas { display: none; }
  .intro-mobile { display: block; }
}

/* ---------- stage ---------- */
.stage { position: relative; width: 100%; aspect-ratio: 4 / 3; container-type: inline-size; }
.stage svg.scene { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; }

/* ---------- the browser being built ---------- */
.browser {
  position: absolute; left: 4%; top: 3%; width: 92%; height: 58%;
  border-radius: 1.4cqw; overflow: hidden; background: #fff;
  box-shadow: 0 3cqw 6cqw -2cqw rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08);
  font-family: var(--body); color: #1b1f2e;
  display: flex; flex-direction: column;
}
.b-bar { height: 7%; min-height: 14px; background: #e8e6df; display: flex; align-items: center; gap: .7cqw; padding: 0 1.4cqw; flex: none; }
.b-bar i { width: 1.1cqw; height: 1.1cqw; border-radius: 50%; background: #ff6058; }
.b-bar i:nth-child(2) { background: #ffbd2e; }
.b-bar i:nth-child(3) { background: #28c840; }
.b-url { margin-left: 1.5cqw; flex: 1; max-width: 55%; height: 62%; background: #fff; border-radius: 99px; font: 500 1.25cqw/1 var(--mono); color: #5a6275; display: flex; align-items: center; padding: 0 1.2cqw; white-space: nowrap; overflow: hidden; }
.b-url .caret { display: inline-block; width: 1px; height: 1.4cqw; background: #2f6bff; margin-left: 1px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.b-page { position: relative; flex: 1; background: var(--pg, #f7f7f5); color: var(--pg-text, #1b1f2e); transition: background .8s ease, color .8s ease; padding: 0 3cqw; display: flex; flex-direction: column; gap: 2cqw; }
.part { position: relative; border-radius: .8cqw; transition: opacity .5s ease, transform .5s ease; }
.part.ghost { outline: 1.5px dashed #c3c7d3; outline-offset: -1px; }
.part.ghost > * { opacity: 0; }
.part > * { transition: opacity .5s ease; }

.b-nav { height: 11%; display: flex; align-items: center; justify-content: space-between; gap: 2cqw; margin-top: 1.4cqw; padding: 0 1cqw; }
.b-logo { font: 800 1.7cqw/1 var(--display); color: var(--brand); display: flex; align-items: center; gap: .6cqw; }
.b-logo::before { content: ""; width: 2cqw; height: 2cqw; border-radius: .5cqw; background: var(--brand); }
.b-links { display: flex; gap: 1.6cqw; font-size: 1.15cqw; opacity: .75; }
.b-cta { font-size: 1.1cqw; font-weight: 700; background: var(--brand); color: #fff; padding: .6cqw 1.2cqw; border-radius: 99px; }

.b-hero { flex: 1.25; display: grid; grid-template-columns: 1.3fr 1fr; align-items: center; gap: 2cqw; padding: 1.5cqw 2cqw; overflow: hidden; }
.part.built.b-hero { background: var(--hero-bg); }
.b-h { font: 800 3.3cqw/1.02 var(--display); letter-spacing: -.03em; margin: 0 0 1cqw; min-height: 2.1em; }
.b-h .caret { display: inline-block; width: .3cqw; height: .9em; background: var(--brand); vertical-align: -.1em; animation: blink 1s steps(1) infinite; }
.b-sub { font-size: 1.3cqw; line-height: 1.4; opacity: .75; margin: 0 0 1.4cqw; }
.b-btn { display: inline-block; font-size: 1.2cqw; font-weight: 700; color: #fff; background: var(--brand); padding: .9cqw 1.8cqw; border-radius: 99px; transform: scale(0); transition: transform .4s cubic-bezier(.3,1.6,.5,1); }
.b-btn.pop { transform: scale(1); }
.b-art { height: 90%; border-radius: 1.4cqw; background: var(--art); display: grid; place-items: center; font-size: 7cqw; transform: scale(.6) rotate(-6deg); opacity: 0; transition: transform .7s cubic-bezier(.3,1.4,.5,1), opacity .4s; }
.b-art.pop { transform: none; opacity: 1; }

.b-cards { flex: .7; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; margin-bottom: 9%; }
.b-cards.part.ghost { outline: none; }
.b-card { border-radius: .8cqw; background: var(--card-bg, #fff); box-shadow: 0 .4cqw 1.4cqw -.6cqw rgba(0,0,0,.25); padding: 1.2cqw; font-size: 1.2cqw; font-weight: 700; transform: translateY(40%); opacity: 0; transition: transform .6s cubic-bezier(.3,1.3,.5,1), opacity .5s; outline: 1.5px dashed #c3c7d3; }
.b-card small { display: block; font-weight: 400; font-size: 1cqw; opacity: .6; margin-top: .4cqw; }
.b-card::before { content: ""; display: block; width: 2.2cqw; height: 2.2cqw; border-radius: .6cqw; background: var(--brand); opacity: .85; margin-bottom: .8cqw; }
.b-cards.ghost .b-card { opacity: 1; transform: none; background: transparent; box-shadow: none; color: transparent; }
.b-cards.ghost .b-card::before { opacity: 0; }
.b-cards.ghost .b-card small { opacity: 0; }
.b-card.in { opacity: 1; transform: none; outline-color: transparent; }

.b-chat { position: absolute; right: 2cqw; bottom: 2cqw; display: flex; align-items: flex-end; gap: .8cqw; transform: scale(0); transform-origin: bottom right; transition: transform .45s cubic-bezier(.3,1.6,.5,1); }
.b-chat.pop { transform: scale(1); }
.b-chat-msg { background: #fff; color: #1b1f2e; font-size: 1.1cqw; padding: .9cqw 1.2cqw; border-radius: 1.2cqw 1.2cqw .2cqw 1.2cqw; box-shadow: 0 .6cqw 1.6cqw -.6cqw rgba(0,0,0,.35); max-width: 22cqw; min-height: 3.2cqw; }
.b-chat-btn { width: 4cqw; height: 4cqw; border-radius: 50%; background: var(--brand); display: grid; place-items: center; color: #fff; font-size: 1.8cqw; flex: none; box-shadow: 0 .6cqw 1.6cqw -.6cqw rgba(0,0,0,.5); }

.b-select { position: absolute; border: 2px solid #2f6bff; border-radius: .6cqw; pointer-events: none; opacity: 0; transition: all .45s cubic-bezier(.4,0,.2,1); box-shadow: 0 0 0 9999px rgba(47,107,255,0); z-index: 5; }
.b-select.on { opacity: 1; }
.b-select span { position: absolute; top: -1.9cqw; left: -2px; background: #2f6bff; color: #fff; font: 600 1cqw/1 var(--mono); padding: .45cqw .7cqw; border-radius: .4cqw .4cqw 0 0; white-space: nowrap; }
.b-select::after { content: ""; position: absolute; right: -.5cqw; bottom: -.5cqw; width: .9cqw; height: .9cqw; background: #fff; border: 2px solid #2f6bff; border-radius: 2px; }

.b-toast { position: absolute; left: 50%; top: 12%; transform: translate(-50%, -30%) scale(.9); opacity: 0; background: #0f1a33; color: #fff; font: 600 1.3cqw/1 var(--mono); padding: 1.1cqw 1.6cqw; border-radius: 99px; display: flex; gap: .8cqw; align-items: center; transition: all .45s cubic-bezier(.3,1.5,.5,1); z-index: 6; }
.b-toast.on { opacity: 1; transform: translate(-50%, 0) scale(1); }
.b-toast i { width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: var(--mint); display: grid; place-items: center; font-style: normal; color: #0f1a33; font-size: 1cqw; }

.b-autos { position: absolute; right: 3cqw; top: 17%; width: 38cqw; background: #0f1a33; color: #fff; border-radius: 1.2cqw; padding: 1.3cqw 1.5cqw; box-shadow: 0 2cqw 4cqw -1.5cqw rgba(0,0,0,.6); z-index: 6; opacity: 0; transform: translateY(1.5cqw) scale(.95); transition: all .45s cubic-bezier(.3,1.4,.5,1); }
.b-autos.on { opacity: 1; transform: none; }
.b-autos-head { font: 700 1.2cqw/1 var(--mono); color: var(--shirt); display: flex; justify-content: space-between; margin-bottom: 1cqw; }
.b-autos-head span { color: var(--mint); font-weight: 500; animation: blink 1.4s steps(1) infinite; }
.b-auto-row { font-size: 1.15cqw; line-height: 1.3; padding: .7cqw 0; border-top: 1px solid rgba(255,255,255,.08); display: flex; gap: .8cqw; align-items: flex-start; opacity: 0; transform: translateX(-1.5cqw); transition: all .4s ease; }
.b-auto-row::before { content: "✓"; flex: none; width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: var(--mint); color: #0f1a33; font-size: 1cqw; font-weight: 700; display: grid; place-items: center; }
.b-auto-row.in { opacity: 1; transform: none; }

.browser.wipe .b-page, .browser.wipe .b-autos { animation: wipe .7s ease forwards; }
@keyframes wipe { to { opacity: 0; filter: blur(6px); } }

/* ---------- the man ---------- */
.man { transition: transform 1.6s linear; }
.man .arm, .man .leg, .man .head { transform-box: fill-box; transition: transform .35s ease; }
.man .arm, .man .leg { transform-origin: 50% 0; }
.man .head { transform-origin: 50% 100%; }
.man .m-legs { transition: opacity .2s; }
.man.sitting .m-legs { opacity: 0; }
.man .marker { opacity: 0; }
.man.writing .marker { opacity: 1; }
.man .eyes { transform-box: fill-box; transform-origin: center; animation: blinkEyes 4.5s infinite; }
@keyframes blinkEyes { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }

.man.typing .arm-r { animation: typeR .16s infinite alternate ease-in-out; }
.man.typing .arm-l { animation: typeL .19s infinite alternate ease-in-out; }
.man.typing .head { transform: rotate(4deg); }
@keyframes typeR { from { transform: rotate(-34deg); } to { transform: rotate(-42deg); } }
@keyframes typeL { from { transform: rotate(-48deg); } to { transform: rotate(-40deg); } }

.man.walking .leg-l { animation: swing .42s infinite alternate ease-in-out; }
.man.walking .leg-r { animation: swing .42s infinite alternate-reverse ease-in-out; }
.man.walking .arm-r { animation: swing .42s infinite alternate-reverse ease-in-out; }
.man.walking .arm-l { animation: swing .42s infinite alternate ease-in-out; }
.man.walking .m-body { animation: bob .21s infinite alternate ease-in-out; }
@keyframes swing { from { transform: rotate(-18deg); } to { transform: rotate(18deg); } }
@keyframes bob { to { transform: translateY(-4px); } }

.man.writing .arm-r { animation: write .55s infinite alternate ease-in-out; }
.man.writing .head { transform: rotate(-10deg); }
@keyframes write { 0% { transform: rotate(104deg); } 50% { transform: rotate(124deg); } 100% { transform: rotate(112deg); } }

.man.thinking .head { transform: rotate(-9deg); }
.man.thinking .arm-l { transform: rotate(-150deg); }
.man.thinking.sitting .arm-l { transform: rotate(-40deg); }

.man.celebrate .arm-r { transform: rotate(155deg); }
.man.celebrate .arm-l { transform: rotate(-155deg); }
.man.celebrate .m-body { animation: hop .32s 3 alternate ease-out; }
@keyframes hop { to { transform: translateY(-10px); } }

.thought { opacity: 0; transform-box: fill-box; transform-origin: 0% 100%; transform: scale(.4); transition: opacity .3s, transform .35s cubic-bezier(.3,1.6,.5,1); }
.thought.on { opacity: 1; transform: scale(1); }
.thought .bulb { opacity: 0; transition: opacity .3s; }
.thought.idea .q { opacity: 0; }
.thought.idea .bulb { opacity: 1; }
.thought .q { transition: opacity .3s; }
.bulb-glow { animation: glow 1s infinite alternate; }
@keyframes glow { from { opacity: .35; } to { opacity: .9; } }

.screen-glow { opacity: 0; transition: opacity .5s; }
.screen-glow.on { opacity: 1; }

.sketch path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .7s ease; }
.sketch path.drawn { stroke-dashoffset: 0; }
.sketch.erase { animation: erase .6s ease forwards; }
@keyframes erase { to { opacity: 0; } }
.board-label-clip { transition: width 1s steps(14); }

.steam path { animation: steam 2.4s infinite ease-in-out; opacity: 0; }
.steam path:nth-child(2) { animation-delay: 1.2s; }
@keyframes steam { 0% { opacity: 0; transform: translateY(4px); } 40% { opacity: .55; } 100% { opacity: 0; transform: translateY(-12px); } }

.code-bit { font: 700 13px var(--mono); fill: var(--shirt); animation: codeUp 1.3s ease-out forwards; }
@keyframes codeUp { from { opacity: 0; transform: translate(0, 0); } 20% { opacity: 1; } to { opacity: 0; transform: translate(var(--dx), -70px); } }
.code-bit { transform-box: fill-box; }

.man.listening .head { transform: rotate(-12deg); }
.man .m-panic { opacity: 0; }
.man.panicked .m-panic { opacity: 1; }
.man.panicked .m-brows, .man.panicked .m-smile { opacity: 0; }
.man.panicked .eyes { animation: none; transform: scale(1.3); }
.man.panicked .sweat { transform-box: fill-box; animation: sweat .6s infinite ease-in; }
@keyframes sweat { from { transform: translateY(-2px); opacity: 1; } to { transform: translateY(6px); opacity: 0; } }
.man.running .leg, .man.running .arm { animation-duration: .2s !important; }
.man.running .m-body { animation-duration: .1s !important; }
.man.lifting .arm-r { transform: rotate(12deg); }
.man.lifting .arm-l { transform: rotate(34deg); }
.man.carrying .arm-r { animation: none; transform: rotate(-38deg); }
.man.carrying .arm-l { animation: none; transform: rotate(38deg); }

.easel { transform-box: fill-box; transform-origin: 50% 100%; }
.easel.wobble { animation: wobble .14s infinite alternate ease-in-out; }
@keyframes wobble { from { transform: rotate(-2.4deg); } to { transform: rotate(2.4deg); } }

.kid { opacity: 0; transition-property: transform; transition-timing-function: linear; }
.kid.on { opacity: 1; visibility: visible; }
.kid .k-leg, .kid .k-arm, .kid .k-head { transform-box: fill-box; transition: transform .3s ease; }
.kid .k-leg, .kid .k-arm { transform-origin: 50% 0; }
.kid .k-head { transform-origin: 50% 100%; }
.kid.walking .k-leg-l { animation: kswing .3s infinite alternate ease-in-out; }
.kid.walking .k-leg-r { animation: kswing .3s infinite alternate-reverse ease-in-out; }
.kid.walking .k-arm-l { animation: kswing .3s infinite alternate-reverse ease-in-out; }
.kid.walking .k-arm-r { animation: kswing .3s infinite alternate ease-in-out; }
.kid.walking .k-body { animation: kbob .15s infinite alternate ease-in-out; }
@keyframes kswing { from { transform: rotate(-20deg); } to { transform: rotate(20deg); } }
@keyframes kbob { to { transform: translateY(-3px) rotate(2deg); } }
.kid .k-back { opacity: 0; }
.boy.facing-away .k-face { opacity: 0; }
.boy.facing-away .k-back { opacity: 1; }
.boy.shaking .k-arm-r { transform: rotate(168deg); }
.boy.shaking .k-arm-l { transform: rotate(-168deg); }
.boy.shaking .k-body { animation: kshake .14s infinite alternate ease-in-out; }
@keyframes kshake { from { transform: translateX(-2px) rotate(-3deg); } to { transform: translateX(2px) rotate(3deg); } }
.boy.carried .k-arm-r { transform: rotate(-35deg); }
.boy.carried .k-arm-l { transform: rotate(35deg); }
.boy.carried .k-leg-l { animation: kswing .6s infinite alternate ease-in-out; }
.boy.carried .k-leg-r { animation: kswing .6s infinite alternate-reverse ease-in-out; }
.boy.carried .k-head { transform: rotate(-10deg); }
.kid-bubble { opacity: 0; transform-box: fill-box; transform-origin: 0% 100%; transform: scale(.5); transition: opacity .25s, transform .35s cubic-bezier(.3,1.6,.5,1); }
.girl.chatting .kid-bubble { opacity: 1; transform: none; }
.girl.chatting .k-arm-l { animation: kwave .28s infinite alternate ease-in-out; }
.girl.chatting .k-head { transform: rotate(6deg); }
@keyframes kwave { from { transform: rotate(-150deg); } to { transform: rotate(-115deg); } }

@media (prefers-reduced-motion: reduce) {
  .kid, .kid * { animation: none !important; transition: none !important; }
  .man, .man * { animation: none !important; transition: none !important; }
}