/* 3DPIX landing — the same pixel language as the app: Silkscreen + Pixelify, stepped pixel frames, gold accent */
:root {
  --bg: #16161f; --bg2: #1d1c2b; --panel: #262438; --line: #09090f;
  --ink: #f4f4f4; --dim: #9d9bb8; --acc: #ffcd75; --acc-d: #e39a3b; --acc2: #ef7d57; --red: #b13e53; --mint: #a7f070;
  --sky1: #120e24; --sky2: #2a1d4d; --hill1: #2b2145; --hill2: #1f1834;
  --px: 4px;
  --head: 'Pixelify Sans', ui-monospace, monospace; --body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --ui: 'DM Sans', system-ui, sans-serif;
}
* { box-sizing: border-box }
html { scroll-behavior: smooth }
body { margin: 0; background: var(--bg); color: var(--ink); font: 18px/1.6 var(--body); -webkit-font-smoothing: antialiased }
body::before { content: ''; position: fixed; inset: 0; z-index: -1; background-image: radial-gradient(var(--bg2) 1.5px, transparent 1.5px); background-size: 16px 16px }
img { display: block; max-width: 100%; height: auto; image-rendering: pixelated }
a { color: var(--acc) }
.wrap { width: min(1180px, 100% - 40px); margin: 0 auto }
h1, h2, h3 { font-family: var(--head); font-weight: 700; line-height: 1.12; margin: 0 0 .45em; letter-spacing: .5px }
h1 { font-size: clamp(2.3rem, 5.6vw, 4.4rem); text-shadow: 4px 4px 0 var(--red) }
h1 em { font-style: normal; color: var(--acc) }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.7rem); text-shadow: 3px 3px 0 var(--red) }
h2.big { font-size: clamp(2.4rem, 6vw, 4.6rem) }
h3 { font-size: 1.05rem; color: var(--acc) }
.kicker { font-family: var(--ui); font-weight: 700; font-size: .8rem; color: var(--mint); text-transform: uppercase; letter-spacing: 1px; margin: 0 0 12px }
.sub { color: var(--dim); margin: -6px 0 26px }
.gold { color: var(--acc) } .red { color: var(--acc2) }
.center { text-align: center; margin-top: 34px }
.fine { color: var(--dim); font-size: .95rem; margin: 14px 0 0 }

/* chunky pixel frame: stepped corners via four offset shadows */
.px {
  background: var(--panel);
  box-shadow: 0 calc(-1 * var(--px)) 0 0 var(--line), 0 var(--px) 0 0 var(--line), calc(-1 * var(--px)) 0 0 0 var(--line), var(--px) 0 0 0 var(--line),
    inset 0 var(--px) 0 0 #ffffff14, inset 0 calc(-1 * var(--px)) 0 0 #00000059;
}

.btn {
  display: inline-block; font: 700 1rem var(--head); text-transform: uppercase; text-decoration: none; text-align: center; letter-spacing: .5px;
  background: var(--acc); color: var(--line); padding: 13px 22px; cursor: pointer; border: 0;
  box-shadow: 0 -4px 0 var(--line), 0 4px 0 var(--line), -4px 0 0 var(--line), 4px 0 0 var(--line), inset 0 -4px 0 #0000004d, inset 0 4px 0 #ffffff66;
}
.btn:hover { background: #ffe0a0 }
.btn:active { transform: translateY(2px); box-shadow: 0 -4px 0 var(--line), 0 4px 0 var(--line), -4px 0 0 var(--line), 4px 0 0 var(--line), inset 0 4px 0 #0000004d }
.btn.lg { font-size: 1.25rem; padding: 18px 30px }
.btn.sm { font-size: .8rem; padding: 8px 14px }
.btn.ghost { background: var(--bg2); color: var(--ink) }
.btn.ghost:hover { background: var(--panel); color: var(--acc) }

/* nav */
.nav { position: sticky; top: 0; z-index: 20; background: #16161fee; backdrop-filter: blur(6px); box-shadow: 0 4px 0 var(--line) }
.nav .wrap { display: flex; align-items: center; gap: 28px; height: 68px }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink) }
.logo svg { width: 32px; height: 32px }
.logo span { font: 700 1.5rem var(--head); letter-spacing: 2px; text-shadow: 3px 3px 0 var(--red) }
.nav nav { display: flex; gap: 24px; margin-left: auto }
.nav nav a { color: var(--dim); text-decoration: none; font: 700 .78rem var(--ui); text-transform: uppercase }
.nav nav a:hover { color: var(--acc) }
@media (max-width: 820px) { .nav nav { display: none } .nav .btn { margin-left: auto } }

/* hero: night sky, stars, hills, spinning models on the ground */
.hero { position: relative; overflow: hidden; background: linear-gradient(var(--sky1), var(--sky2) 70%, var(--hill1)); padding: 70px 0 0 }
.stars { position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--acc) 0 0), linear-gradient(#fff 0 0), linear-gradient(#fff 0 0), linear-gradient(var(--mint) 0 0), linear-gradient(#fff 0 0), linear-gradient(#fff 0 0), linear-gradient(var(--acc2) 0 0), linear-gradient(#fff 0 0),
    radial-gradient(#ffffff55 1px, transparent 1.5px);
  background-size: 4px 4px, 4px 4px, 2px 2px, 4px 4px, 2px 2px, 4px 4px, 2px 2px, 2px 2px, 57px 61px;
  background-position: 8% 12%, 23% 34%, 41% 8%, 67% 18%, 78% 42%, 91% 10%, 55% 48%, 12% 55%, 0 0;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat;
  animation: twinkle 3s steps(2) infinite }
@keyframes twinkle { 50% { opacity: .75 } }
.hero-grid { position: relative; display: grid; grid-template-columns: 1fr 1.02fr; gap: 56px; align-items: center; z-index: 2 }
.lead { font-size: 1.25rem; color: #dcdaf0; max-width: 32em; margin: 0 0 30px }
.ctas { display: flex; gap: 16px; flex-wrap: wrap }
@media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; gap: 44px } .hero-copy { text-align: center } .lead { margin-inline: auto } .ctas { justify-content: center } }

/* the app window in the hero */
.mock { padding: 0 0 14px; --px: 5px }
.mock-top { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: var(--bg2); box-shadow: inset 0 -4px 0 var(--line) }
.mock-top i { width: 10px; height: 10px; background: var(--red) } .mock-top i:nth-child(2) { background: var(--acc) } .mock-top i:nth-child(3) { background: var(--mint) }
.mock-top span { margin-left: 10px; font: 700 .68rem var(--ui); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.mock-body { display: grid; grid-template-columns: .72fr auto 1fr; align-items: center; gap: 10px; padding: 18px 18px 6px }
.mock figure { margin: 0; text-align: center }
.mock figcaption { font: 700 .62rem var(--ui); color: var(--dim); text-transform: uppercase; margin-top: 6px }
.mock-sheet img { background: var(--bg); transition: opacity .25s steps(3) }
.mock-sheet img.fade, .mock-model .turn.fade { opacity: 0 }
.mock-model .turn { transition: opacity .25s steps(3) }
.mock-arrow span { display: block; color: var(--acc); font-size: 1.3rem; animation: nudge 1s steps(2) infinite }
@keyframes nudge { 50% { transform: translateX(4px) } }
.mock-steps { display: flex; justify-content: center; gap: 16px; font: 700 .66rem var(--ui); color: #4a4862; margin: 6px 0 12px }
.mock-steps span.done { color: var(--mint) } .mock-steps span.now { color: var(--acc); animation: blink .6s steps(2) infinite }
@keyframes blink { 50% { opacity: .25 } }
.mock-bar { display: flex; align-items: center; gap: 10px; margin: 0 14px; padding: 8px; background: var(--bg); box-shadow: 0 0 0 4px var(--line) }
.mock-bar .clip { width: 34px; height: 34px; background: var(--bg2); flex: none }
.mock-bar .typed { flex: 1; font-size: 1.15rem; white-space: nowrap; overflow: hidden }
.mock-bar .go { font: 700 .9rem var(--ui); background: var(--acc); color: var(--line); padding: 8px 14px; box-shadow: inset 0 -3px 0 #0000004d }
.caret { display: inline-block; width: 10px; height: 1.05em; background: var(--acc); vertical-align: -3px; margin-left: 3px; animation: blink .8s steps(2) infinite }

/* hills + shelf of models */
.ground { position: relative; margin-top: 70px; height: 190px; z-index: 1 }
.ground::before, .ground::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0 }
.ground::before { height: 150px; background: var(--hill1);
  clip-path: polygon(0 40%, 6% 40%, 6% 28%, 14% 28%, 14% 18%, 24% 18%, 24% 30%, 36% 30%, 36% 22%, 48% 22%, 48% 34%, 60% 34%, 60% 16%, 72% 16%, 72% 26%, 84% 26%, 84% 36%, 94% 36%, 94% 24%, 100% 24%, 100% 100%, 0 100%) }
.ground::after { height: 70px; background: var(--hill2); box-shadow: inset 0 6px 0 #3a2d5c }
.shelf { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; align-items: flex-end; gap: clamp(4px, 2vw, 34px); z-index: 2 }
.shelf .turn { width: clamp(70px, 11vw, 150px) } .shelf .turn.big { width: clamp(100px, 16vw, 220px) }
@media (max-width: 600px) { .shelf .turn:nth-child(1), .shelf .turn:nth-child(5) { display: none } }

/* turntable strip: 16 frames side by side, stepped by landing.js */
.turn { aspect-ratio: 1; width: 100%; background-repeat: no-repeat; background-size: 1600% 100%; image-rendering: pixelated; cursor: grab; touch-action: pan-y }
.turn:active { cursor: grabbing }

section { padding: 96px 0 }
.engines { padding: 34px 0; background: var(--hill2); box-shadow: inset 0 4px 0 var(--line), inset 0 -4px 0 var(--line) }
.engines .wrap { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; justify-content: center }
.engines p { margin: 0; font: 700 .78rem var(--ui); color: var(--dim); text-transform: uppercase }
.engines ul { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; margin: 0; padding: 0; justify-content: center }
.engines li { font: 700 .85rem var(--ui); color: var(--ink); background: var(--panel); padding: 8px 12px; box-shadow: 0 -3px 0 var(--line), 0 3px 0 var(--line), -3px 0 0 var(--line), 3px 0 0 var(--line) }

.problem { text-align: center }
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin: 42px 0 64px; text-align: left }
.card { padding: 26px } .card p { margin: 0; color: var(--dim); font-size: 1.02rem }
.ico { font-size: 2rem; margin-bottom: 10px; filter: saturate(.8) }
.answer { font: 700 clamp(1.8rem, 4.4vw, 3.3rem)/1.15 var(--head); margin: 0 0 12px; text-shadow: 3px 3px 0 var(--red) }
.answer-sub { color: var(--dim); max-width: 36em; margin: 0 auto 30px }
@media (max-width: 860px) { .cards3 { grid-template-columns: 1fr } }

.pipeline { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; counter-reset: none }
.pipeline li { padding: 24px; display: flex; flex-direction: column; position: relative }
.pipeline li:not(:last-child)::after { content: '▶'; position: absolute; right: -24px; top: 50%; color: var(--acc); font-size: 1.1rem; z-index: 2 }
.num { font: 700 2.4rem var(--head); color: var(--mint); line-height: 1; margin-bottom: 8px; text-shadow: 3px 3px 0 var(--line) }
.vis { background: var(--bg); height: 260px; display: grid; place-items: center; margin: 6px 0 16px; padding: 12px; box-shadow: inset 0 0 0 4px var(--line) }
.vis img { max-height: 236px; width: auto }
.vis .turn { width: 236px; max-width: 100% }
.vis-prompt { font-size: 1.3rem; padding: 20px; text-align: center }
.pipeline p { margin: 0; color: var(--dim); font-size: 1rem }
@media (max-width: 900px) { .pipeline { grid-template-columns: 1fr } .pipeline li:not(:last-child)::after { content: '▼'; right: 50%; top: auto; bottom: -26px } }

.wall { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px }
.ex { margin: 0; padding: 14px 14px 12px; text-align: center; transition: transform .1s steps(2) }
.ex:hover { transform: translateY(-4px) }
.ex .turn { background-color: var(--bg); box-shadow: inset 0 -26px 0 #1f1d30 }
.ex figcaption { font: 700 .72rem var(--ui); color: var(--dim); margin-top: 10px }
@media (max-width: 900px) { .wall { grid-template-columns: repeat(2, 1fr) } }

.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 30px }
.col { padding: 28px } .col ul { list-style: none; margin: 0; padding: 0 } .col li { padding: 10px 0; box-shadow: 0 2px 0 #ffffff0d; font-size: 1.08rem }
.them h3 { color: var(--dim) } .them li { color: var(--dim) } .them li::before { content: '✗'; color: var(--acc2); margin-right: 14px; font-family: var(--head) }
.us { --panel: #2c2842 } .us li::before { content: '✓'; color: var(--mint); margin-right: 14px; font-family: var(--head) }
@media (max-width: 760px) { .vs { grid-template-columns: 1fr } }

.own-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: center }
.own p { color: var(--dim); margin: 0 0 28px; font-size: 1.1rem }
.own-vis { margin: 0; padding: 20px; display: grid; grid-template-columns: .7fr 1fr; gap: 16px; align-items: center }
.own-vis img { background: var(--bg) }
@media (max-width: 860px) { .own-grid { grid-template-columns: 1fr } }

.pricing { text-align: center }
.toggle { display: inline-flex; gap: 12px; margin-bottom: 38px }
.toggle button { font: 700 .78rem var(--ui); text-transform: uppercase; background: var(--bg2); color: var(--ink); border: 0; padding: 10px 14px; cursor: pointer; box-shadow: 0 -3px 0 var(--line), 0 3px 0 var(--line), -3px 0 0 var(--line), 3px 0 0 var(--line) }
.toggle button.on { background: var(--mint); color: var(--line) }
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; text-align: left }
.plan { padding: 26px 22px; display: flex; flex-direction: column; position: relative }
.plan.pop { --panel: #2f2a48; box-shadow: 0 -5px 0 var(--acc), 0 5px 0 var(--acc), -5px 0 0 var(--acc), 5px 0 0 var(--acc) }
.plan .tag { position: absolute; top: -14px; right: 14px; font: 700 .62rem var(--ui); background: var(--acc); color: var(--line); padding: 4px 8px; text-transform: uppercase }
.price { font: 700 2.6rem var(--head); margin: 4px 0 0; line-height: 1 }
.per { color: var(--dim); font-size: .9rem; margin: 6px 0 0 }
.plan ul { list-style: none; padding: 0; margin: 20px 0 26px; color: #d7d5ea; font-size: 1rem }
.plan li { padding: 4px 0 } .plan li::before { content: '■'; color: var(--mint); font-size: .6em; margin-right: 10px; vertical-align: 3px }
.plan .btn { margin-top: auto }
.packs { color: var(--dim); margin-top: 40px }
.packs b { color: var(--ink); font-weight: 400 }
@media (max-width: 1000px) { .plans { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 560px) { .plans { grid-template-columns: 1fr } }

.faq .wrap { max-width: 860px }
.faq details { margin: 18px 0; padding: 0 }
.faq summary { cursor: pointer; list-style: none; padding: 18px 22px; font-size: 1.12rem }
.faq summary::-webkit-details-marker { display: none }
.faq summary::before { content: '+'; font-family: var(--head); color: var(--acc); margin-right: 16px }
.faq details[open] summary::before { content: '−' }
.faq details p { margin: 0; padding: 0 22px 20px 54px; color: var(--dim) }

.final { position: relative; overflow: hidden; text-align: center; padding: 110px 0 0; background: linear-gradient(var(--bg), var(--sky2) 60%, var(--hill1)) }
.final .wrap { position: relative; z-index: 2 }
.final h2 { max-width: 16em; margin: 0 auto 36px }
.final .ground { margin-top: 60px }

.foot { background: var(--line); padding: 44px 0; color: var(--dim); font-size: .95rem }
.foot .wrap { display: grid; grid-template-columns: auto 1fr auto; gap: 10px 30px; align-items: center }
.foot p { margin: 0 } .foot nav { display: flex; gap: 20px } .foot nav a { color: var(--dim); text-decoration: none; font: 700 .72rem var(--ui); text-transform: uppercase } .foot nav a:hover { color: var(--acc) }
.foot .copy { grid-column: 1 / -1; font-size: .8rem; color: #5c5a78 }
@media (max-width: 760px) { .foot .wrap { grid-template-columns: 1fr; text-align: center; justify-items: center } }

/* 3D hero: pixel landscape, live fold-into-3D stage, prompt HUD */
.hero3d { position: relative; overflow: hidden; background: #110d22; box-shadow: inset 0 -4px 0 var(--line) }
.land { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; image-rendering: pixelated }
.h3 { position: relative; display: grid; grid-template-columns: .92fr 1.08fr; gap: 24px; align-items: center; min-height: min(92svh, 880px); padding: 40px 0 }
.hero-copy { position: relative; z-index: 2 }
.hero3d h1 { font-size: clamp(2.3rem, 5vw, 4.2rem) }
.hero3d h1 em { display: block }
.hero3d .lead { text-shadow: 2px 2px 0 var(--line) }
.stage-wrap { position: relative; height: min(76svh, 700px) }
.stage { position: absolute; inset: 0 0 110px; cursor: grab; touch-action: pan-y }
.stage:active { cursor: grabbing }
.stage canvas { display: block; width: 100% !important; height: 100% !important; image-rendering: pixelated }
.hud { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); width: min(460px, 100%); padding: 10px 12px 12px; z-index: 2 }
.hud-steps { display: flex; justify-content: center; gap: 16px; font: 700 .66rem var(--ui); color: #4a4862; margin: 0 0 8px }
.hud-steps span.done { color: var(--mint) } .hud-steps span.now { color: var(--acc); animation: blink .6s steps(2) infinite }
.hud-bar { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; background: var(--bg); box-shadow: 0 0 0 4px var(--line) }
.hud-bar .typed { flex: 1; font: 500 1.15rem var(--head); white-space: nowrap; overflow: hidden; min-height: 1.5em }
.hud-bar .go { font: 700 .9rem var(--ui); background: var(--acc); color: var(--line); padding: 8px 14px; box-shadow: inset 0 -3px 0 #0000004d }
.drag { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; text-align: center; font: 700 .6rem var(--ui); color: var(--dim); text-transform: uppercase; letter-spacing: 1px }
@media (max-width: 960px) {
  .h3 { grid-template-columns: 1fr; min-height: 0; padding: 36px 0 0; gap: 0 }
  .hero-copy { text-align: center } .hero3d .lead { margin-inline: auto } .hero3d .ctas { justify-content: center }
  .stage-wrap { height: 64svh; min-height: 420px }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } .stars, .caret, .mock-arrow span, .mock-steps span.now, .hud-steps span.now { animation: none } }