/* =====================================================================
   Home hero: "a site builds itself" — wireframe → design → build → live
   ===================================================================== */
.bld { margin: 0; --b-acc: #3B6BFF; --b-acc2: #A9BEFF; --b-line: rgba(169,190,255,.75); }
.bld__stage { position: relative; aspect-ratio: 1 / .84; container-type: inline-size; --px: 0; --py: 0; }
.bld__l { position: absolute; z-index: var(--z, 1); transition: transform .9s cubic-bezier(.2,.8,.2,1), opacity .6s, translate .9s cubic-bezier(.2,.8,.2,1);
  transform: translate3d(calc(var(--px) * var(--d, 8px)), calc(var(--py) * var(--d, 8px)), 0); }

.bld__glow { position: absolute; inset: 6% 2% 0 8%; z-index: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(59,107,255,.32), rgba(59,107,255,.08) 55%, transparent 75%); filter: blur(30px);
  animation: bldBreath 7s ease-in-out infinite alternate; }
@keyframes bldBreath { from { transform: scale(.92); opacity: .75; } to { transform: scale(1.06); opacity: 1; } }

/* ---------- browser window ---------- */
.bld__win { left: 3%; top: 7%; width: 80%; --d: 10px; border-radius: 1.8cqw; background: #0E0F13; border: 1px solid rgba(242,239,234,.12);
  box-shadow: 0 60px 100px -40px rgba(0,0,0,.95), 0 0 0 1px rgba(0,0,0,.5); }
.bld__ring { position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; transition: opacity .8s;
  background: conic-gradient(from var(--a, 0deg), transparent 0 60%, rgba(120,155,255,.9) 75%, transparent 90%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: bldSpin 4s linear infinite; }
@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes bldSpin { to { --a: 360deg; } }
.bld__bar { display: flex; align-items: center; gap: 2cqw; height: 5.4cqw; padding: 0 1.8cqw; border-bottom: 1px solid rgba(242,239,234,.07); background: #15161B; border-radius: 1.8cqw 1.8cqw 0 0; }
.bld__dots { display: flex; gap: .9cqw; }
.bld__dots i { width: 1.25cqw; height: 1.25cqw; border-radius: 50%; background: rgba(242,239,234,.16); }
.bld__url { flex: 1; display: flex; align-items: center; justify-content: center; gap: .8cqw; height: 3.2cqw; max-width: 56%; margin: 0 auto; padding: 0 1.4cqw; border-radius: .9cqw;
  background: rgba(242,239,234,.06); font-size: max(9px, 1.7cqw); color: rgba(242,239,234,.55); white-space: nowrap; overflow: hidden; transition: background .5s, color .5s; }
.bld__lock { display: none; width: 1.3cqw; height: 1.5cqw; border-radius: .25cqw; background: #3DDC84; position: relative; top: .15cqw; }
.bld__lock::before { content: ""; position: absolute; left: 50%; top: -.8cqw; width: .9cqw; height: .9cqw; margin-left: -.45cqw; border: .22cqw solid #3DDC84; border-bottom: 0; border-radius: .5cqw .5cqw 0 0; box-sizing: border-box; }
.bld__urltext { overflow: hidden; text-overflow: ellipsis; }
.bld__mode { display: inline-flex; align-items: center; gap: .8cqw; padding: .5cqw 1.2cqw; border-radius: 99px; font-size: max(9px, 1.5cqw); font-weight: 500; color: #CFCCC7; background: rgba(242,239,234,.06); border: 1px solid rgba(242,239,234,.08); }
.bld__mode i { width: 1cqw; height: 1cqw; border-radius: 50%; background: var(--b-acc2); box-shadow: 0 0 0 0 rgba(169,190,255,.6); animation: bldPulse 1.6s infinite; }
@keyframes bldPulse { 70% { box-shadow: 0 0 0 1cqw rgba(169,190,255,0); } 100% { box-shadow: 0 0 0 0 rgba(169,190,255,0); } }

.bld__view { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 0 0 1.8cqw 1.8cqw; background: #0C0D11; }
.bld__cols { position: absolute; inset: 0 5%; display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.4%; opacity: 0; transition: opacity .6s; }
.bld__cols i { background: rgba(59,107,255,.07); border-left: 1px solid rgba(59,107,255,.12); border-right: 1px solid rgba(59,107,255,.12); }

/* wireframe blocks */
.w { position: absolute; border-radius: .6cqw; border: 1px dashed var(--b-line); background: rgba(59,107,255,.09);
  opacity: 0; transform: scale(.94); transform-origin: left center;
  transition: opacity .45s calc(var(--i) * .08s), transform .6s cubic-bezier(.2,.8,.2,1) calc(var(--i) * .08s), background .6s, border-color .6s, box-shadow .6s; }
.w em { position: absolute; left: 0; top: -2.4cqw; font-style: normal; font-size: max(8px, 1.3cqw); font-weight: 500; color: var(--b-acc2); white-space: nowrap; transition: opacity .4s; }
.w--logo { left: 5%; top: 6%; width: 10%; height: 4%; }
.w--nav { left: 37%; top: 6.6%; width: 32%; height: 2.8%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8%; border: 0; background: none; }
.w--nav i { border-radius: .4cqw; border: 1px dashed var(--b-line); transition: background .6s, border-color .6s; }
.w--cta { left: 82%; top: 5%; width: 13%; height: 5.5%; }
.w--eyebrow { left: 5%; top: 23%; width: 17%; height: 2.6%; }
.w--h1 { left: 5%; top: 29.5%; width: 45%; height: 7.5%; }
.w--h1b { left: 5%; top: 39.5%; width: 33%; height: 7.5%; }
.w--p { left: 5%; top: 53%; width: 40%; height: 2.6%; }
.w--p2 { left: 5%; top: 57.6%; width: 29%; height: 2.6%; }
.w--btn { left: 5%; top: 65.5%; width: 14%; height: 7%; }
.w--btn2 { left: 20.5%; top: 65.5%; width: 13%; height: 7%; }
.w--img { left: 55%; top: 21%; width: 40%; height: 54%; overflow: hidden; }
.w--logos { left: 5%; top: 84%; width: 90%; height: 4.5%; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6%; border: 0; background: none; }
.w--logos i { border-radius: .4cqw; border: 1px dashed var(--b-line); transition: background .6s, border-color .6s; }

/* selection box + spacing marker (design phase) */
.bld__sel { position: absolute; left: 4.2%; top: 28.5%; width: 47%; height: 19.5%; border: 1.5px solid var(--b-acc); opacity: 0; transition: opacity .35s, transform .5s; transform: scale(1.04); pointer-events: none; }
.bld__sel i { position: absolute; width: 1.1cqw; height: 1.1cqw; background: #fff; border: 1.5px solid var(--b-acc); }
.bld__sel i:nth-child(2) { left: -.6cqw; top: -.6cqw; } .bld__sel i:nth-child(3) { right: -.6cqw; top: -.6cqw; }
.bld__sel i:nth-child(4) { left: -.6cqw; bottom: -.6cqw; } .bld__sel i:nth-child(5) { right: -.6cqw; bottom: -.6cqw; }
.bld__selsize { position: absolute; left: 50%; bottom: -3.4cqw; transform: translateX(-50%); padding: .3cqw 1cqw; border-radius: .5cqw; background: var(--b-acc); color: #fff; font-size: max(8px, 1.3cqw); font-weight: 500; white-space: nowrap; }
.bld__spacing { position: absolute; left: 41%; top: 47.4%; height: 5.4%; width: 0; border-left: 1px solid #FF6BB5; opacity: 0; transition: opacity .4s .3s; }
.bld__spacing::before, .bld__spacing::after { content: ""; position: absolute; left: -.6cqw; width: 1.2cqw; border-top: 1px solid #FF6BB5; }
.bld__spacing::before { top: 0; } .bld__spacing::after { bottom: 0; }
.bld__spacing span { position: absolute; left: .8cqw; top: 50%; transform: translateY(-50%); padding: .1cqw .6cqw; border-radius: .4cqw; background: #FF6BB5; color: #fff; font-size: max(8px, 1.2cqw); font-weight: 600; }

/* real screenshot reveal */
.bld__shot { position: absolute; inset: 0; clip-path: inset(0 100% 0 0); transition: clip-path 1.4s cubic-bezier(.65,0,.35,1); }
.bld__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transform: scale(1.04); transition: transform 6s cubic-bezier(.2,.8,.2,1); }
.bld__scan { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: #fff; box-shadow: 0 0 16px 4px rgba(120,155,255,.9), 0 0 60px 14px rgba(59,107,255,.45); opacity: 0; }

/* ---------- side panels ---------- */
.bld__panel { border-radius: 1.6cqw; background: rgba(20,21,27,.92); border: 1px solid rgba(242,239,234,.1); box-shadow: 0 40px 70px -30px rgba(0,0,0,.95);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font-size: max(8px, 1.45cqw); color: #DAD7D2; opacity: 0; }
.bld__muted { color: rgba(242,239,234,.42); }

.bld__insp { right: 0; top: 0; width: 27%; padding: 1.8cqw; --d: -14px; translate: 3cqw 0; }
.bld__ph { display: flex; gap: 2cqw; padding-bottom: 1.4cqw; margin-bottom: 1.4cqw; border-bottom: 1px solid rgba(242,239,234,.08); font-weight: 500; }
.bld__pt { margin: 0 0 1.2cqw; font-weight: 600; color: #fff; }
.bld__pl { margin: 1.6cqw 0 .8cqw; font-size: .9em; color: rgba(242,239,234,.42); }
.bld__row { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: .8cqw 1cqw; align-items: center; }
.bld__row b { padding: .5cqw .9cqw; border-radius: .5cqw; background: rgba(242,239,234,.05); font-weight: 500; }
.bld__ico { color: var(--b-acc2); }
.bld__sw { display: flex; gap: 1cqw; }
.bld__sw i { width: 3cqw; height: 3cqw; border-radius: .7cqw; background: var(--c); border: 1px solid rgba(242,239,234,.18); transform: scale(0); transition: transform .5s cubic-bezier(.3,1.6,.5,1); }
.bld__sw i:nth-child(2) { transition-delay: .08s; } .bld__sw i:nth-child(3) { transition-delay: .16s; } .bld__sw i:nth-child(4) { transition-delay: .24s; }
.bld__type { display: flex; align-items: center; gap: 1.2cqw; line-height: 1.35; }
.bld__type b { display: grid; place-items: center; width: 4.6cqw; height: 4.6cqw; border-radius: .8cqw; background: rgba(59,107,255,.16); color: #fff; font-family: var(--font-head); font-size: 1.4em; }

.bld__code { right: -3%; bottom: 12%; width: 56%; --d: -12px; translate: 0 3cqw; overflow: hidden; }
.bld__ch { display: flex; align-items: center; gap: 1.6cqw; padding: 1.1cqw 1.6cqw; background: rgba(242,239,234,.03); border-bottom: 1px solid rgba(242,239,234,.07); }
.bld__tab { color: rgba(242,239,234,.4); } .bld__tab.is-on { color: #fff; }
.bld__plat { margin-left: auto; padding: .3cqw 1cqw; border-radius: 99px; background: rgba(59,107,255,.18); color: var(--b-acc2); font-weight: 500; }
.bld__code pre { margin: 0; padding: 1.4cqw 1.8cqw 1.8cqw; font: 500 max(8px, 1.3cqw)/1.75 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: #DAD7D2; white-space: pre; overflow: hidden; }
.bld__code u { text-decoration: none; color: #7C9BFF; } .bld__code s { text-decoration: none; color: #B8C7FF; } .bld__code q { quotes: none; color: #F2EFEA; }
.ln { display: block; clip-path: inset(0 100% 0 0); }
.ln--ok { color: #3DDC84; margin-top: .4cqw; }

.bld__phone { left: -3%; bottom: 2%; width: 19%; --d: 18px; padding: .8cqw; border-radius: 3.4cqw; background: #1A1B20; border: 1px solid rgba(242,239,234,.16);
  box-shadow: 0 40px 70px -24px rgba(0,0,0,.95); opacity: 0; translate: 0 6cqw; }
.bld__pv { position: relative; aspect-ratio: 9 / 19.5; border-radius: 2.7cqw; overflow: hidden; background: #0E0F13; }
.bld__pv::before { content: ""; position: absolute; top: .9cqw; left: 50%; width: 32%; height: 1.4cqw; margin-left: -16%; border-radius: 1cqw; background: #000; z-index: 2; }
.bld__pv img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }

.bld__score { left: 20%; bottom: 0; display: flex; gap: 2.2cqw; padding: 1.5cqw 2cqw; --d: 14px; translate: 0 3cqw; }
.bld__gauge { position: relative; display: grid; justify-items: center; gap: .5cqw; width: 6.4cqw; }
.bld__gauge svg { width: 6.4cqw; height: 6.4cqw; transform: rotate(-90deg); }
.bld__gauge circle { fill: none; stroke: rgba(61,220,132,.16); stroke-width: 3; }
.bld__gauge .g { stroke: #3DDC84; stroke-linecap: round; stroke-dasharray: 97.4; stroke-dashoffset: 97.4; transition: stroke-dashoffset 1.4s cubic-bezier(.2,.8,.2,1); }
.bld__gauge b { position: absolute; top: 0; height: 6.4cqw; display: grid; place-items: center; font-size: max(9px, 1.7cqw); font-weight: 600; color: #3DDC84; font-variant-numeric: tabular-nums; }
.bld__gauge span { font-size: max(8px, 1.2cqw); color: rgba(242,239,234,.55); }

.bld__toast { left: 30%; top: -4%; display: flex; align-items: center; gap: 1.4cqw; padding: 1.3cqw 2cqw 1.3cqw 1.4cqw; border-radius: 1.6cqw;
  background: rgba(20,21,27,.94); border: 1px solid rgba(61,220,132,.35); box-shadow: 0 30px 60px -20px rgba(0,0,0,.9), 0 0 40px -10px rgba(61,220,132,.35);
  font-size: max(9px, 1.5cqw); opacity: 0; translate: 0 -2cqw; --d: 6px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.bld__toast b { display: block; color: #fff; font-weight: 600; }
.bld__toast small { display: block; color: rgba(242,239,234,.55); font-size: .9em; }
.bld__check { position: relative; flex: none; width: 3.4cqw; height: 3.4cqw; border-radius: 50%; background: #3DDC84; }
.bld__check::after { content: ""; position: absolute; left: 1.1cqw; top: .85cqw; width: .9cqw; height: 1.6cqw; border-right: .35cqw solid #0B0C0F; border-bottom: .35cqw solid #0B0C0F; transform: rotate(45deg); }

/* ---------- cursors ---------- */
.bld__cur { position: absolute; z-index: 30; left: 40%; top: 40%; pointer-events: none; opacity: 0;
  transition: left 1.1s cubic-bezier(.6,0,.25,1), top 1.1s cubic-bezier(.6,0,.25,1), opacity .4s; }
.bld__cur svg { width: max(14px, 2.8cqw); height: max(14px, 2.8cqw); fill: var(--b-acc); stroke: #fff; stroke-width: 1.3; stroke-linejoin: round; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.bld__cur--b svg { fill: #12B886; }
.bld__cur span { position: absolute; left: 2.2cqw; top: 2.4cqw; padding: .4cqw 1.1cqw; border-radius: .5cqw 1.4cqw 1.4cqw 1.4cqw; background: var(--b-acc); color: #fff; font-size: max(9px, 1.45cqw); font-weight: 500; white-space: nowrap; }
.bld__cur--b span { background: #12B886; }
.bld__cur::after { content: ""; position: absolute; left: -1cqw; top: -1cqw; width: 2.4cqw; height: 2.4cqw; border-radius: 50%; border: 2px solid currentColor; color: var(--b-acc2); opacity: 0; }
.bld__cur.is-click::after { animation: bldClick .6s ease-out; }
@keyframes bldClick { from { opacity: 1; transform: scale(.4); } to { opacity: 0; transform: scale(2); } }

/* ============ phases ============ */
[data-phase="wire"] .w, [data-phase="design"] .w { opacity: 1; transform: none; }
[data-phase="wire"] .bld__cols { opacity: 1; }
[data-phase="wire"] .bld__cur--a { opacity: 1; }

[data-phase="design"] .bld__cols { opacity: .35; }
[data-phase="design"] .w { border-color: transparent; transition-delay: 0s; }
[data-phase="design"] .w em { opacity: 0; }
[data-phase="design"] .w--logo { background: #F2EFEA; border-radius: .4cqw; }
[data-phase="design"] .w--nav i { background: rgba(242,239,234,.35); border-color: transparent; }
[data-phase="design"] .w--cta { background: var(--b-acc); }
[data-phase="design"] .w--eyebrow { background: rgba(169,190,255,.6); }
[data-phase="design"] .w--h1, [data-phase="design"] .w--h1b { background: #F2EFEA; }
[data-phase="design"] .w--p, [data-phase="design"] .w--p2 { background: rgba(242,239,234,.32); }
[data-phase="design"] .w--btn { background: var(--b-acc); box-shadow: 0 1cqw 3cqw -1cqw rgba(59,107,255,.8); }
[data-phase="design"] .w--btn2 { background: transparent; border: 1px solid rgba(242,239,234,.4); }
[data-phase="design"] .w--img { background: radial-gradient(60% 70% at 70% 30%, rgba(124,155,255,.9), transparent 70%), linear-gradient(140deg, #1B2B6B, #0E1430 60%, #3B6BFF); }
[data-phase="design"] .w--logos i { background: rgba(242,239,234,.16); border-color: transparent; }
[data-phase="design"] .bld__sel { opacity: 1; transform: none; }
[data-phase="design"] .bld__spacing { opacity: 1; }
[data-phase="design"] .bld__insp { opacity: 1; translate: 0 0; }
[data-phase="design"] .bld__sw i { transform: scale(1); }
[data-phase="design"] .bld__cur--a { opacity: 1; }

[data-phase="shot"] .w { opacity: 1; transform: none; border-color: transparent; transition: none; }
[data-phase="shot"] .bld__shot, [data-phase="build"] .bld__shot, [data-phase="live"] .bld__shot { clip-path: inset(0 0 0 0); }
[data-phase="shot"] .bld__shot img, [data-phase="build"] .bld__shot img, [data-phase="live"] .bld__shot img { transform: none; }
[data-phase="shot"] .bld__scan { animation: bldScan 1.4s cubic-bezier(.65,0,.35,1) forwards; }
@keyframes bldScan { 0% { left: 0; opacity: 1; } 92% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
[data-phase="shot"] .bld__insp { opacity: 1; translate: 0 0; }
[data-phase="shot"] .bld__sw i { transform: scale(1); }
[data-phase="shot"] .bld__cur--a { opacity: 1; }

[data-phase="build"] .bld__code, [data-phase="live"] .bld__code { opacity: 1; translate: 0 0; }
[data-phase="build"] .ln, [data-phase="live"] .ln { clip-path: inset(0 0 0 0); transition: clip-path .55s steps(22) calc(.25s + var(--i) * .26s); }
[data-phase="build"] .bld__cur--b, [data-phase="live"] .bld__cur--b { opacity: 1; }
[data-phase="build"] .bld__cur--a { opacity: .0; }

[data-phase="live"] .bld__phone { opacity: 1; translate: 0 0; transition-delay: .2s; }
[data-phase="live"] .bld__score { opacity: 1; translate: 0 0; transition-delay: .35s; }
[data-phase="live"] .bld__toast { opacity: 1; translate: 0 0; }
[data-phase="live"] .bld__ring { opacity: 1; }
[data-phase="live"] .bld__url { background: rgba(61,220,132,.08); color: #F2EFEA; }
[data-phase="live"] .bld__lock { display: inline-block; }
[data-phase="live"] .bld__mode i { background: #3DDC84; }
[data-phase="live"] .bld__code { opacity: .0; translate: 0 2cqw; transition-delay: .1s; }
[data-phase="build"] .bld__mode i { background: #12B886; }

[data-phase="out"] .bld__win .bld__view > *, [data-phase="out"] .bld__l:not(.bld__win), [data-phase="out"] .bld__cur { opacity: 0; transition: opacity .5s; }
[data-phase="out"] .bld__shot { clip-path: inset(0 0 0 0); }

/* ---------- caption ---------- */
.bld__meta { position: relative; z-index: 2; margin-top: 22px; font-size: 14px; color: var(--muted); }
.bld__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0; padding: 0; list-style: none; }
.bld__steps li { position: relative; padding-top: 12px; font-size: 13px; color: rgba(242,239,234,.62); transition: color .4s; }
.bld__steps li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 2px; background: rgba(242,239,234,.12); }
.bld__steps li::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--b-acc), #7C9BFF); transform: scaleX(0); transform-origin: left; }
.bld__steps li.is-done { color: #CFCCC7; } .bld__steps li.is-done::after { transform: scaleX(1); }
.bld__steps li.is-on { color: var(--text); } .bld__steps li.is-on::after { animation: bldFill var(--dur, 2s) linear forwards; }
@keyframes bldFill { to { transform: scaleX(1); } }
.bld__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 16px; }
.bld__info { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.bld__label { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.bld__name { color: var(--text); font-weight: 600; transition: opacity .4s; }
.bld__link { flex: none; color: var(--text); font-weight: 500; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.bld__link span { display: inline-block; transition: transform .4s var(--ease); }
.bld__link:hover span { transform: translateX(4px); }

@media (max-width: 1000px) { .bld { max-width: 640px; } }
@media (max-width: 760px) {
  .bld__insp, .bld__code, .bld__score { display: none; }
  .bld__win { left: 0; width: 92%; }
  .bld__phone { left: auto; right: 0; width: 24%; }
  .bld__toast { left: 8%; top: 0; }
  .bld__cur { display: none; }
  .bld__stage { aspect-ratio: 1 / .72; }
  .bld__win { top: 9%; }
  .bld__steps li { font-size: 12px; }
  .bld__foot { flex-direction: column; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .bld__glow, .bld__ring, .bld__mode i { animation: none; }
  .bld__cur { display: none; }
}

/* give the scene room on desktop */
@media (min-width: 1101px) {
  .hero__inner:has(.bld) { grid-template-columns: minmax(0, 1fr) minmax(0, min(540px, 44%)); gap: 56px; }
  .hero__inner:has(.bld) .hero__title { font-size: clamp(40px, 4.9vw, 76px); }
}
@media (min-width: 1360px) { .bld__stage { width: calc(100% + 56px); } }