/* DropZone landing. Light only. */
:root {
  color-scheme: light;
  --bg: #ffffff; --bg2: #f5f7fa; --bg3: #eef2f6; --panel: #ffffff; --line: #e4e9f0; --line2: #d5dce6;
  --ink: #0b1220; --ink2: #273142; --mute: #5a6678;
  --ring: #0a84d6; --ring2: #0670b8; --ringsoft: #e8f3fc;
  --ok: #12844c; --oksoft: #e7f6ee; --bad: #d92d20; --badsoft: #fdecea; --hold: #c4580e; --holdsoft: #fdf0e6; --unk: #a3680f; --unksoft: #fbf3e2;
  --max: 1200px; --r: 16px; --r-lg: 24px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --shadow: 0 12px 32px -8px rgba(16, 24, 40, .14), 0 4px 8px -4px rgba(16, 24, 40, .06);
  --shadow-lg: 0 40px 80px -24px rgba(16, 32, 64, .28), 0 12px 24px -12px rgba(16, 24, 40, .12);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.6 var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
a { color: var(--ring); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ring2); }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: 6px; }
code, pre { font-family: var(--mono); font-size: .92em; }
code { background: var(--bg3); padding: 1px 6px; border-radius: 6px; color: var(--ink2); }
img { display: block; max-width: 100%; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 12px; top: 12px; background: var(--panel); padding: 8px 12px; border-radius: 8px; z-index: 50; }
.ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic.sm { width: 15px; height: 15px; }
h1, h2, h3 { font-weight: 700; color: var(--ink); }
h2 { font-size: clamp(30px, 4.2vw, 52px); line-height: 1.06; letter-spacing: -.035em; margin: 0 0 16px; text-wrap: balance; }
h3 { font-size: 18px; letter-spacing: -.01em; margin: 0 0 6px; }
.sub { color: var(--mute); font-size: clamp(16px, 1.5vw, 19px); margin: 0 0 28px; max-width: 36em; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--ring); margin-bottom: 16px; }
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ring); box-shadow: 0 0 0 4px var(--ringsoft); }
.sec-head { margin-bottom: 48px; }
.sec-head.row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; }
.link .ic { transition: transform .2s var(--ease); }
.link:hover .ic { transform: translateX(3px); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border-radius: 999px; font: 600 15px/1.2 var(--font); text-decoration: none; border: 1px solid var(--line2); color: var(--ink); background: var(--panel); cursor: pointer; transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s, border-color .18s, color .18s; box-shadow: var(--shadow-sm); white-space: nowrap; }
.btn:hover { color: var(--ink); transform: translateY(-1px); box-shadow: var(--shadow); border-color: #c4cdd9; }
.btn:active { transform: translateY(0); }
.btn.primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn.primary:hover { background: #1c2638; color: #fff; }
.btn.primary .ic { transition: transform .2s var(--ease); }
.btn.primary:hover .ic { transform: translateX(3px); }
.btn.lg { padding: 15px 24px; font-size: 16px; }
.btn.sm { padding: 8px 14px; font-size: 14px; }
.ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.ctas.center { justify-content: center; }
.fine { font-size: 13px; color: var(--mute); margin: 16px 0 0; }

/* nav */
.nav { position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, .78); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s, background .2s; }
.nav.scrolled { border-bottom-color: var(--line); background: rgba(255, 255, 255, .9); }
.nav .wrap { display: flex; align-items: center; gap: 28px; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 18px; letter-spacing: -.02em; }
.brand:hover { color: var(--ink); }
.mark { width: 24px; height: 24px; border-radius: 50%; border: 2.5px solid var(--ring); position: relative; flex: none; }
.mark::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--ring); }
.nav-links { display: flex; gap: 26px; margin-right: auto; }
.nav-links a { color: var(--mute); text-decoration: none; font-size: 14px; font-weight: 500; transition: color .15s; }
.nav-links a:hover { color: var(--ink); }
@media (max-width: 760px) { .nav-links { display: none; } .nav .wrap { justify-content: space-between; } }

/* hero */
.hero { position: relative; padding: 56px 0 40px; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: -20% -10% auto; height: 900px; z-index: -1; background:
  radial-gradient(600px 360px at 18% 18%, rgba(10, 132, 214, .10), transparent 70%),
  radial-gradient(560px 360px at 84% 8%, rgba(18, 132, 76, .08), transparent 70%),
  linear-gradient(#fff, #fff); }
.hero::after { content: ""; position: absolute; inset: 0 0 auto; height: 760px; z-index: -1; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(70% 60% at 50% 20%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(70% 60% at 50% 20%, #000 20%, transparent 75%); opacity: .55; }
.hero-copy { text-align: center; display: flex; flex-direction: column; align-items: center; }
h1 { font-size: clamp(40px, 6vw, 76px); line-height: 1.0; letter-spacing: -.045em; margin: 0 0 22px; max-width: 13.5em; text-wrap: balance; font-weight: 750; }
h1 .grad { background: linear-gradient(92deg, var(--ring) 10%, #0b9e7a 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lede { font-size: clamp(17px, 1.7vw, 20px); color: var(--mute); margin: 0 0 32px; max-width: 34em; text-wrap: pretty; }
.hero .ctas { justify-content: center; }

/* hero stage */
.stage-wrap { margin-top: 48px; perspective: 1600px; }
.stage { position: relative; margin: 0 auto; max-width: 1040px; transform-origin: 50% 0; will-change: transform; }
.cam { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; background: #dfe6dc url(assets/yard/day.jpg) center / cover; box-shadow: var(--shadow-lg); outline: 1px solid rgba(16, 24, 40, .08); outline-offset: -1px; }
.cam canvas, .layer { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ov { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.zone { fill: rgba(255, 255, 255, .10); stroke: #fff; stroke-width: 3; stroke-dasharray: 12 8; vector-effect: non-scaling-stroke; transition: fill .35s, stroke .35s; stroke-linejoin: round; }
.zone[data-s="bad"] { fill: rgba(217, 45, 32, .16); stroke: #ff5a4f; }
.zone[data-s="ok"] { fill: rgba(32, 200, 110, .14); stroke: #35d37f; }
.box { fill: none; stroke: #ff5a4f; stroke-width: 2.5; vector-effect: non-scaling-stroke; rx: 6; }
.boxlbl rect { fill: #ff5a4f; } .boxlbl text { fill: #fff; font: 600 20px var(--font); }
.hud { position: absolute; font: 600 13px/1 var(--font); color: #fff; background: rgba(10, 14, 22, .46); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 8px 11px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; letter-spacing: .01em; }
.hud.tl { left: 16px; top: 16px; }
.hud.tr { right: 16px; top: 16px; font-variant-numeric: tabular-nums; }
.hud.bl { left: 16px; right: 16px; bottom: 16px; height: 4px; padding: 0; background: rgba(255, 255, 255, .28); border-radius: 4px; overflow: hidden; }
.hud.bl i { display: block; height: 100%; width: 0; background: #fff; border-radius: 4px; }
.rec { width: 8px; height: 8px; border-radius: 50%; background: #ff5a4f; animation: blink 1.6s infinite; }
@keyframes blink { 50% { opacity: .35; } }
.status { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 9px 12px; border-radius: 999px; background: rgba(255, 255, 255, .94); box-shadow: var(--shadow); font-size: 14px; white-space: nowrap; transition: color .3s; }
.status b { font-weight: 750; letter-spacing: .02em; }
.status .why { color: var(--mute); font-weight: 500; }
.status .why:not(:empty)::before { content: "· "; }
.status .led { width: 9px; height: 9px; border-radius: 50%; background: #9aa4b2; transition: background .3s, box-shadow .3s; }
.status[data-s="bad"] b { color: var(--bad); } .status[data-s="bad"] .led { background: var(--bad); box-shadow: 0 0 0 4px var(--badsoft); }
.status[data-s="ok"] b { color: var(--ok); } .status[data-s="ok"] .led { background: var(--ok); box-shadow: 0 0 0 4px var(--oksoft); }
.status[data-s="hold"] b { color: var(--hold); }

.float { position: absolute; background: rgba(255, 255, 255, .96); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.alexa { left: -56px; bottom: 56px; width: 330px; padding: 16px 18px; opacity: 0; transform: translateY(12px) scale(.98); }
.alexa.on { opacity: 1; transform: none; }
.who { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--mute); margin-bottom: 6px; }
.who .t { margin-left: auto; font-weight: 500; }
.who .ring { width: 16px; height: 16px; border-radius: 50%; border: 3px solid #13b5ea; box-shadow: 0 0 0 0 rgba(19, 181, 234, .5); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(19, 181, 234, 0); } 100% { box-shadow: 0 0 0 0 rgba(19, 181, 234, 0); } }
.alexa p, .notif p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink); }
.ask { display: flex; gap: 8px; margin-top: 12px; transition: opacity .3s, max-height .3s; }
.ask .b { flex: 1; text-align: center; font-size: 14px; font-weight: 600; padding: 8px 10px; border-radius: 10px; background: var(--bg3); color: var(--ink2); transition: transform .15s, background .2s, color .2s; }
.ask .b.yes { background: var(--ink); color: #fff; }
.ask .b.yes.press { transform: scale(.94); background: var(--ring); }
.alexa:not(.asking) .ask { opacity: 0; max-height: 0; margin-top: 0; overflow: hidden; }
.alexa.asking .ask { max-height: 60px; }
.panel { right: -48px; top: 64px; width: 230px; padding: 14px 16px 10px; }
.ph { font-size: 12px; font-weight: 600; color: var(--mute); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; }
.panel dl { margin: 0; }
.panel dl div { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-top: 1px solid var(--line); font-size: 14px; }
.panel dl div:first-child { border-top: 0; }
.panel dt { color: var(--mute); }
.panel dd { margin: 0; font-weight: 650; transition: color .3s; white-space: nowrap; }
.panel dd.mono { font-size: 12px; }
.panel dd.flash { animation: flash .6s var(--ease); }
@keyframes flash { 0% { background: var(--ringsoft); } 100% { background: transparent; } }
.mono { font-family: var(--mono); font-size: 13px; }
.st[data-s="bad"], dd[data-s="bad"] { color: var(--bad); } .st[data-s="ok"], dd[data-s="ok"] { color: var(--ok); } dd[data-s="hold"] { color: var(--hold); } dd[data-s="ring"] { color: var(--ring); }
.receipt { right: 40px; bottom: -26px; display: flex; gap: 12px; align-items: center; padding: 12px 16px; font-size: 14px; opacity: 0; transform: translateY(10px); }
.receipt.on { opacity: 1; transform: none; }
.receipt .ic { width: 28px; height: 28px; padding: 6px; border-radius: 50%; background: var(--oksoft); color: var(--ok); stroke-width: 3; }
.receipt .m { color: var(--mute); }
@media (max-width: 1180px) { .alexa { left: 16px; bottom: 36px; width: 300px; } .panel { right: 16px; top: 60px; width: 210px; } }
@media (max-width: 760px) {
  .hero { padding: 40px 0 24px; }
  .stage-wrap { margin-top: 36px; padding: 0 12px; }
  .cam { border-radius: 16px; }
  .status { top: auto; bottom: 30px; font-size: 13px; padding: 7px 11px; }
  .hud { font-size: 11px; padding: 6px 9px; } .hud.tl { left: 10px; top: 10px; } .hud.tr { right: 10px; top: 10px; } .hud.bl { left: 10px; right: 10px; bottom: 10px; }
  .stage { display: grid; grid-template-columns: 1fr; gap: 12px; }
  .float { position: relative; inset: auto; width: auto; box-shadow: var(--shadow); }
  .alexa { min-height: 132px; opacity: 1; transform: none; order: 2; }
  .alexa:not(.on) p { color: var(--mute); }
  .panel { order: 3; padding: 10px 14px 6px; }
  .panel dl { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .panel dl div:nth-child(2) { border-top: 0; }
  .receipt { position: absolute; left: 50%; right: auto; bottom: auto; top: 14px; transform: translate(-50%, -6px); white-space: nowrap; font-size: 12px; padding: 8px 12px; order: 1; }
  .receipt.on { transform: translate(-50%, 0); }
  .receipt .ic { width: 22px; height: 22px; padding: 4px; }
  .receipt .m { display: none; }
}

/* problem */
.problem { padding: 120px 0 112px; }
.big-stat { display: grid; grid-template-columns: auto 1fr; column-gap: 28px; align-items: end; padding-bottom: 40px; margin-bottom: 56px; border-bottom: 1px solid var(--line); }
.big-stat .k { grid-column: 1 / -1; margin: 0 0 8px; color: var(--mute); font-weight: 500; }
.big-stat .n { margin: 0; font-size: clamp(22px, 2.4vw, 30px); font-weight: 600; letter-spacing: -.02em; color: var(--ink2); }
.big-stat .n span { display: block; font-size: clamp(56px, 10vw, 144px); line-height: .95; letter-spacing: -.055em; font-weight: 750; color: var(--ink); background: linear-gradient(180deg, var(--ink) 40%, #5a6b85); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.big-stat .m { margin: 0 0 10px; color: var(--mute); font-size: 17px; }
@media (max-width: 760px) { .big-stat { grid-template-columns: 1fr; } .big-stat .m { margin-top: 8px; } }
.problem h2 { max-width: 15em; margin-bottom: 48px; }
.quotes { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.q { grid-column: span 3; margin: 0; padding: 24px; border-radius: var(--r); background: var(--bg2); border: 1px solid var(--line); display: flex; flex-direction: column; justify-content: space-between; gap: 18px; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s; }
.q:hover { transform: translateY(-3px); box-shadow: var(--shadow); background: #fff; }
.q p { margin: 0; font-size: 17px; line-height: 1.45; color: var(--ink2); }
.q footer { font-size: 13px; color: var(--mute); }
.q footer a { color: var(--mute); }
.q-lead { grid-column: span 6; grid-row: span 2; background: linear-gradient(160deg, #eef6fd, #f4faf6); border-color: #d6e7f5; padding: 36px; }
.q-lead p { font-size: clamp(26px, 3.4vw, 44px); line-height: 1.12; letter-spacing: -.03em; font-weight: 650; color: var(--ink); }
@media (max-width: 1100px) { .q, .q-lead { grid-column: span 6; } .q-lead { grid-column: 1 / -1; grid-row: auto; } }
@media (max-width: 620px) { .q { grid-column: 1 / -1; } .q-lead { padding: 26px; } }
.manifesto { margin: 72px auto 0; max-width: 30em; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.3; letter-spacing: -.02em; font-weight: 550; color: var(--ink); text-align: center; text-wrap: balance; }
.manifesto em { font-style: normal; color: var(--ring); }

/* how: sticky story */
.how { padding: 112px 0 120px; background: var(--bg2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.story { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 72px; }
.story-stage { position: sticky; top: max(88px, calc(50vh - 17vw)); align-self: start; }
.sframe { position: relative; aspect-ratio: 16 / 10.5; border-radius: var(--r-lg); overflow: hidden; background: #dfe6dc; box-shadow: var(--shadow-lg); outline: 1px solid rgba(16, 24, 40, .08); outline-offset: -1px; }
.layer { object-fit: cover; opacity: 0; transition: opacity .7s var(--ease); }
.layer { width: 100%; height: 100%; }
.sframe[data-step="1"] .l1, .sframe[data-step="2"] .l2, .sframe[data-step="3"] .l3a, .sframe[data-step="4"] .l4 { opacity: 1; }
.sframe[data-step="3"] .l3b { opacity: 1; transition-delay: 1.1s; transition-duration: 1.2s; }
.sframe[data-step="2"] .l2 { filter: saturate(.9); }
.sv { position: absolute; inset: 0; opacity: 0; transition: opacity .5s var(--ease); pointer-events: none; }
.sframe[data-step="1"] .sv1, .sframe[data-step="2"] .sv2, .sframe[data-step="3"] .sv3, .sframe[data-step="4"] .sv4 { opacity: 1; }
.tri { position: absolute; left: 20px; top: 20px; display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .94); box-shadow: var(--shadow); font-size: 12px; font-weight: 700; letter-spacing: .03em; }
.tri span, .tri-art span { padding: 6px 12px; border-radius: 999px; color: var(--mute); transition: background .3s, color .3s; }
.tri .n.on, .tri-art .n.on { background: var(--bad); color: #fff; }
.tri-art .u.on { background: var(--unk); color: #fff; }
.chip { position: absolute; left: 20px; bottom: 20px; font-size: 13px; font-weight: 600; padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, .94); box-shadow: var(--shadow); color: var(--ink2); }
.notif { position: absolute; left: 50%; top: 50%; width: min(420px, 84%); transform: translate(-50%, -40%); padding: 18px 20px; border-radius: 20px; background: rgba(255, 255, 255, .97); box-shadow: var(--shadow-lg); transition: transform .6s var(--ease); }
.sframe[data-step="2"] .notif { transform: translate(-50%, -50%); }
.sframe[data-step="2"] .notif .yes { animation: tap 3.2s 1.2s infinite; }
@keyframes tap { 0%, 30%, 100% { transform: none; background: var(--ink); } 34% { transform: scale(.94); background: var(--ring); } 40% { transform: none; background: var(--ring); } }
.devs { position: absolute; right: 20px; top: 20px; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.dev { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; padding: 8px 12px; border-radius: 999px; background: rgba(255, 255, 255, .95); box-shadow: var(--shadow); color: var(--ink2); opacity: 0; transform: translateX(10px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.dev i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.dev b { font-weight: 700; }
.sframe[data-step="3"] .dev { opacity: 1; transform: none; }
.sframe[data-step="3"] .d1 { transition-delay: 1s; } .sframe[data-step="3"] .d2 { transition-delay: 1.5s; } .sframe[data-step="3"] .d3 { transition-delay: 2s; }
.ch-unk, .ch-ok { transition: opacity .4s; }
.ch-unk { color: var(--unk); }
.ch-ok { color: var(--ok); opacity: 0; }
.sframe[data-step="3"] .ch-unk { opacity: 0; transition-delay: 1.4s; }
.sframe[data-step="3"] .ch-ok { opacity: 1; transition-delay: 1.6s; }
.adv { position: absolute; right: 20px; bottom: 20px; width: 250px; padding: 12px 16px; border-radius: 16px; background: rgba(255, 255, 255, .96); box-shadow: var(--shadow-lg); }
.adv .row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-top: 1px solid var(--line); font-size: 14px; }
.adv .row:first-child { border-top: 0; }
.adv .row span { color: var(--mute); }
.adv code { background: none; padding: 0; font-size: 12.5px; color: var(--ink2); }
.adv .hold { color: #fff; background: var(--hold); padding: 3px 10px; border-radius: 999px; font-size: 13px; letter-spacing: .04em; }
.steps { list-style: none; margin: 0; padding: 0; }
.step { min-height: 56vh; display: flex; flex-direction: column; justify-content: center; padding: 24px 0 24px 28px; border-left: 2px solid var(--line); opacity: .38; transition: opacity .4s var(--ease), border-color .4s; position: relative; }
.step:first-child { min-height: 48vh; justify-content: flex-start; padding-top: 14vh; }
.step:last-child { min-height: 58vh; }
.step.active { opacity: 1; border-left-color: var(--ring); }
.step .num { font: 600 13px var(--mono); color: var(--ring); margin-bottom: 10px; }
.step h3 { font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -.03em; line-height: 1.1; margin-bottom: 12px; }
.step p { margin: 0; color: var(--mute); font-size: 17px; max-width: 26em; }
.step-media { display: none; }
@media (max-width: 900px) {
  .story { grid-template-columns: 1fr; gap: 0; }
  .story-stage { top: 72px; z-index: 2; margin: 0 -8px; }
  .sframe { aspect-ratio: 16 / 10; border-radius: 18px; }
  .steps { margin-top: 8px; }
  .step, .step:first-child, .step:last-child { min-height: 56vh; justify-content: flex-start; padding: 32px 0 32px 20px; }
  .step:first-child { padding-top: 32px; }
  .adv { width: 200px; right: 12px; bottom: 12px; padding: 8px 12px; } .adv .row { font-size: 12px; padding: 5px 0; }
  .tri { left: 12px; top: 12px; font-size: 10px; } .tri span { padding: 5px 8px; }
  .chip { left: 12px; bottom: 12px; font-size: 12px; }
  .devs { right: 12px; top: 12px; } .dev { font-size: 11.5px; padding: 6px 10px; }
  .notif { padding: 12px 14px; } .notif p { font-size: 13px; } .notif .ask { margin-top: 8px; } .notif .ask .b { padding: 6px; font-size: 12px; }
}

/* scenarios */
.scen { padding: 120px 0; }
.scards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.scard { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--ink); }
.scard:hover { color: var(--ink); }
.scard .sph { position: relative; aspect-ratio: 4 / 3.2; border-radius: var(--r); overflow: hidden; margin-bottom: 12px; background: #dfe6dc; box-shadow: var(--shadow-sm); transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
.scard .sph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.scard .sph > img.sp { inset: auto; height: auto; object-fit: contain; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .25)); }
.scard:hover .ph { box-shadow: var(--shadow); transform: translateY(-4px); }
.scard:hover .ph > img:not(.sp) { transform: scale(1.05); }
.scard .t { font-weight: 650; font-size: 16px; letter-spacing: -.01em; line-height: 1.3; }
.scard .d { color: var(--mute); font-size: 14px; line-height: 1.5; }
.scard .sph.locked > img { filter: blur(14px) brightness(.55) saturate(.6); transform: scale(1.15); }
.scard:hover .ph.locked > img { transform: scale(1.2); }
.lock { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #fff; font-size: 13px; font-weight: 600; }
.lock .ic { width: 26px; height: 26px; }
.poolmark { position: absolute; left: 50%; top: 44%; width: 24%; height: 20%; border: 2px dashed #fff; border-radius: 6px; background: rgba(255, 255, 255, .12); }
.pill { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; }
.sph .pill { position: absolute; left: 12px; bottom: 12px; box-shadow: var(--shadow-sm); }
.pill.bad { background: var(--bad); color: #fff; } .pill.ok { background: var(--ok); color: #fff; } .pill.unk { background: var(--unk); color: #fff; } .pill.hold { background: var(--hold); color: #fff; }
@media (max-width: 1000px) { .scards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .scards { grid-template-columns: 1fr 1fr; gap: 14px; } .scard .d { display: none; } .scard .t { font-size: 14px; } }

/* try the app */
.try { padding: 112px 0; background: linear-gradient(180deg, var(--bg2), #fff); border-top: 1px solid var(--line); overflow: hidden; }
.try-grid { display: grid; grid-template-columns: 1fr auto; gap: 80px; align-items: center; }
.feat { list-style: none; margin: 8px 0 36px; padding: 0; display: grid; gap: 4px; max-width: 30em; }
.feat li { display: grid; gap: 2px; padding: 16px 0 16px 20px; border-left: 2px solid var(--line); transition: border-color .3s; }
.feat li:hover { border-left-color: var(--ring); }
.feat b { font-size: 17px; } .feat span { color: var(--mute); }
.phone { position: relative; width: 340px; aspect-ratio: 390 / 844; border-radius: 52px; padding: 12px; background: linear-gradient(145deg, #f3f5f8, #d9dee6); box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(255, 255, 255, .8), 0 0 0 1px #c9d0da; margin-right: 24px; }
.phone::before { content: ""; position: absolute; top: 24px; left: 50%; width: 92px; height: 24px; border-radius: 20px; background: #0b1220; transform: translateX(-50%); z-index: 2; }
.screen { position: relative; width: 100%; height: 100%; border-radius: 40px; overflow: hidden; background: #f6f8fb; }
.screen img, .screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; object-position: top; }
.screen iframe { top: 34px; width: 390px; height: 844px; transform-origin: 0 0; }
.screen img { padding-top: 34px; background: #f6f8fb; }
@media (max-width: 900px) { .try-grid { grid-template-columns: 1fr; gap: 48px; justify-items: center; } .try-copy { justify-self: stretch; } .phone { width: min(320px, 82vw); margin: 0; } }

/* safety bento */
.safety { padding: 120px 0; }
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tile { position: relative; padding: 26px; border-radius: var(--r-lg); background: var(--bg2); border: 1px solid var(--line); transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s; overflow: hidden; }
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); background: #fff; }
.tile h3 { display: flex; align-items: center; gap: 10px; }
.tile h3 .ic { color: var(--ring); }
.tile p { margin: 0; color: var(--mute); font-size: 15px; }
.t-wide { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; justify-content: center; background: linear-gradient(160deg, #f2f8fe, #f7faf8); border-color: #d6e7f5; padding: 32px; }
.t-wide h3 { font-size: 24px; letter-spacing: -.02em; }
.t-wide p { font-size: 17px; max-width: 32em; }
.tile-art { margin-bottom: 22px; }
.code-art { display: flex; flex-direction: column; gap: 6px; font: 500 clamp(15px, 1.8vw, 22px)/1.4 var(--mono); padding: 22px 26px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); margin-bottom: 32px; }
.code-art .ln { opacity: .55; } .code-art .ln.hl { opacity: 1; background: var(--oksoft); margin: 0 -12px; padding: 2px 12px; border-radius: 8px; }
.k { color: #0a5a86; } .v { color: #a1460a; } .b { color: #b42318; }
.code-art .hl .v { color: var(--ok); font-weight: 600; }
.tri-art { display: inline-flex; padding: 4px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 11px; font-weight: 700; letter-spacing: .03em; }
.tri-art span { padding: 5px 10px; }
.chips-art { display: flex; flex-wrap: wrap; gap: 6px; }
.chips-art span { font: 500 12.5px var(--mono); padding: 4px 10px; border-radius: 8px; background: #fff; border: 1px solid var(--line); color: var(--ink2); }
.chips-art .no { text-decoration: line-through; color: #98a2b3; background: transparent; border-style: dashed; }
@media (max-width: 960px) { .bento { grid-template-columns: 1fr 1fr; } .t-wide { grid-column: 1 / -1; grid-row: auto; } }
@media (max-width: 620px) { .bento { grid-template-columns: 1fr; } .t-wide { padding: 24px; } }

/* partners */
.partners { padding: 112px 0; background: var(--bg2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 64px; align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); gap: 40px; } }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ticks li { display: flex; gap: 12px; color: var(--mute); }
.ticks .ic { color: var(--ok); margin-top: 4px; stroke-width: 2.5; }
.ticks b { color: var(--ink); font-weight: 600; }
.codecard { border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-lg); overflow: hidden; min-width: 0; }
.cbar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); font: 500 13px var(--mono); color: var(--ink2); background: #fbfcfd; }
.cbar .dots { display: inline-flex; gap: 6px; margin-right: 6px; } .cbar .dots i { width: 10px; height: 10px; border-radius: 50%; background: #e1e6ed; }
.cbar .m { color: var(--ok); font-weight: 700; }
.cbar .st { margin-left: auto; color: var(--ok); background: var(--oksoft); padding: 2px 8px; border-radius: 6px; font-size: 12px; }
.codecard pre { margin: 0; padding: 22px 24px; overflow-x: auto; font-size: 13.5px; line-height: 1.75; color: var(--ink2); background: #fff; }
.codecard pre .b { background: var(--holdsoft); color: var(--hold); padding: 1px 4px; border-radius: 4px; font-weight: 600; }

/* real vs demo */
.real { padding: 112px 0 96px; }
.real .sec-head { margin-bottom: 32px; }
.rd { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.rd-col { padding: 28px 32px; }
.rd-col + .rd-col { border-left: 1px solid var(--line); background: var(--bg2); }
.rd-col h3 { margin: 0 0 14px; }
.rd ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rd li { position: relative; padding-left: 20px; color: var(--ink2); font-size: 15px; }
.rd li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.rd-col + .rd-col li::before { background: #b0b9c6; }
.pill.demo { background: var(--bg3); color: var(--ink2); border: 1px solid var(--line2); }
.rd-note { margin: 16px 0 0; font-size: 13px; color: var(--mute); }
@media (max-width: 760px) { .rd { grid-template-columns: 1fr; } .rd-col + .rd-col { border-left: 0; border-top: 1px solid var(--line); } .rd-col { padding: 22px; } }

/* built on */
.built { padding: 96px 0 112px; border-top: 1px solid var(--line); }
.built-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: 56px; align-items: start; }
.links3 { display: grid; gap: 12px; }
.lk { position: relative; display: grid; gap: 4px; padding: 20px 52px 20px 22px; border-radius: var(--r); border: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: border-color .2s, box-shadow .2s, transform .2s var(--ease); }
.lk:hover { color: var(--ink); border-color: var(--line2); box-shadow: var(--shadow); transform: translateY(-2px); }
.lk span { color: var(--mute); font-size: 14px; }
.lk .ic { position: absolute; right: 20px; top: 22px; color: var(--mute); transition: color .2s, transform .2s var(--ease); }
.lk:hover .ic { color: var(--ring); transform: translate(2px, -2px); }
.oss { margin-top: 56px; display: flex; justify-content: space-between; align-items: center; gap: 32px; padding: 32px 36px; border-radius: var(--r-lg); background: var(--bg2); border: 1px solid var(--line); flex-wrap: wrap; }
.oss h3 { font-size: 22px; letter-spacing: -.02em; }
.oss p { margin: 0; color: var(--mute); max-width: 34em; }
.oss-links { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 900px) { .built-grid { grid-template-columns: 1fr; gap: 24px; } .oss { padding: 24px; } }

/* final */
.final { position: relative; padding: 140px 0 380px; text-align: center; overflow: hidden; }
.final-img { position: absolute; inset: auto 0 0; height: 460px; background: url(assets/yard/day.jpg) center 62% / cover; mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.35) 30%, #000 75%); -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.35) 30%, #000 75%); }
.final-copy { position: relative; }
.final h2 { font-size: clamp(34px, 5.6vw, 72px); max-width: 12em; margin: 0 auto 32px; }
@media (max-width: 760px) { .final { padding: 96px 0 240px; } .final-img { height: 320px; } }

/* footer */
.foot { padding: 28px 0 40px; border-top: 1px solid var(--line); color: var(--mute); font-size: 14px; }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; }
.foot .brand.sm { font-size: 15px; } .foot .mark { width: 18px; height: 18px; border-width: 2px; } .foot .mark::after { inset: 3px; }
.foot .fl { margin-left: auto; display: flex; gap: 20px; }
.foot a { color: var(--mute); text-decoration: none; } .foot a:hover { color: var(--ink); }
@media (max-width: 760px) { .foot .fl { margin-left: 0; } }

/* reveal on scroll */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0s); }
.js .reveal.in { opacity: 1; transform: none; }
.js .hero-copy > * { animation: rise .55s var(--ease) both; }
.js .hero-copy > :nth-child(2) { animation-delay: .06s; } .js .hero-copy > :nth-child(3) { animation-delay: .14s; } .js .hero-copy > :nth-child(4) { animation-delay: .22s; } .js .hero-copy > :nth-child(5) { animation-delay: .3s; }
.js .stage-wrap { animation: rise .7s .12s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(20px); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js .reveal { opacity: 1; transform: none; }
  .stage { transform: none !important; }
}

.nw { white-space: nowrap; }
.lock { text-align: center; padding: 0 12px; line-height: 1.3; }
@media (max-width: 560px) { .lock { font-size: 11px; gap: 6px; } .lock .ic { width: 20px; height: 20px; } }

/* split hero on wide screens: the product is fully in view above the fold */
@media (min-width: 1200px) {
  .hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.42fr); gap: 64px; align-items: center; padding: 72px max(24px, calc((100% - var(--max)) / 2 + 24px)) 96px; }
  :root { --max: 1392px; }
  .hero > .wrap { max-width: none; margin: 0; padding: 0; }
  .hero-copy { text-align: left; align-items: flex-start; }
  .hero .ctas { justify-content: flex-start; }
  h1 { font-size: clamp(46px, 3.9vw, 72px); max-width: 9.5em; }
  .lede { font-size: 18px; max-width: 28em; }
  .stage-wrap { margin-top: 0; animation-delay: .08s; }
  .stage { max-width: none; }
  .alexa { left: -40px; bottom: 40px; width: 320px; }
  .panel { right: -24px; top: 56px; width: 260px; }
  .receipt { right: 32px; }
}
@media (max-width: 760px) { .panel dd { white-space: normal; text-align: right; } .panel dd.mono { font-size: 11px; } }
@media (min-width: 1600px) {
  :root { --max: 1728px; }
  .hero { min-height: min(calc(100vh - 64px), 1000px); padding-top: 48px; padding-bottom: 72px; }
  h1 { font-size: 78px; }
  .lede { font-size: 19px; }
}