/* Home: how a site comes together (process bento) and why it matters (benefit cards). */
.proc{--p-surface:#10131C;--p-surface-2:#161A26;--p-line:rgba(255,255,255,.1);--p-line-hi:rgba(255,255,255,.26);--p-blue:#5E8FFF;--p-muted:rgba(255,255,255,.68);position:relative;overflow:clip}
.proc ol,.proc ul{list-style:none;margin:0;padding:0}
.proc-head{max-width:860px;margin:0 auto clamp(36px,4.6vw,64px);text-align:center}
.proc-head .section-lede{margin-inline:auto;max-width:680px}

/* ---------- bento ---------- */
.bento{display:grid;gap:clamp(16px,1.8vw,24px);grid-template-columns:minmax(0,1fr)}
.bento-item{display:grid;min-width:0}
.proc .bento-item[data-reveal],.proc .why-grid>li[data-reveal]{transition-delay:calc(var(--i,0)*60ms)}
.pcard{position:relative;display:grid;grid-template-columns:minmax(0,1fr);min-width:0;overflow:hidden;padding:clamp(22px,2.4vw,32px);background:var(--p-surface);border:1px solid var(--p-line);border-radius:var(--radius);transition:transform .4s var(--ease),border-color .25s}
.pcard:hover{transform:translateY(-3px);border-color:var(--p-line-hi)}
.pcard-copy{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.pcard-chip{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;background:var(--p-surface-2);border:1px solid var(--p-line);margin-bottom:22px}
.pcard-chip svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pcard-step{font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--yellow);margin-bottom:8px}
.pcard-title{font-family:var(--display);font-weight:800;font-size:clamp(1.45rem,1.2rem + .7vw,1.8rem);letter-spacing:-.03em;line-height:1.1;margin-bottom:12px}
.pcard-text{font-size:16px;line-height:1.6;color:var(--p-muted);max-width:34ch}
.pcard-cta{margin-top:24px}
.proc-more{margin-top:clamp(24px,3vw,36px);text-align:center}
.proc-more .text-link{display:inline-flex;align-items:center;gap:10px}
.proc-more .text-link:hover{color:var(--yellow)}

/* ---------- mock visuals: shared ---------- */
.pviz{position:relative;container-type:inline-size;min-width:0;font-family:var(--sans);color:var(--ink);user-select:none;pointer-events:none}
.pviz i,.pviz b,.pviz em{display:block;font-style:normal}
.mock-tag{display:inline-block;font-size:.62em;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(11,13,20,.55)}
.dt-dots{display:flex;gap:.45em}
.dt-dots i{width:.7em;height:.7em;border-radius:50%;background:rgba(255,255,255,.22)}

/* pieces that arrive once the card is revealed (site.js adds .in to the [data-reveal] wrapper) */
.pviz .a{transition:opacity .6s var(--ease),transform .7s var(--ease),clip-path .9s var(--ease);transition-delay:calc(var(--d,0)*1ms)}
.js .proc [data-reveal]:not(.in) .a{opacity:0;transform:translateY(.9em)}
.js .proc [data-reveal]:not(.in) .a--fade{transform:none}
.js .proc [data-reveal]:not(.in) .a--pop{transform:scale(.55)}
.js .proc [data-reveal]:not(.in) .a--draw{opacity:1;transform:none;clip-path:inset(0 100% 0 0)}
.js .proc [data-reveal]:not(.in) .a--wipe{opacity:1;transform:none;clip-path:inset(0 0 100% 0)}
.js .proc [data-reveal]:not(.in) .a--slide{transform:translate(2.4em,2em)}
.pviz .a--draw,.pviz .a--wipe{clip-path:inset(0)}

/* ---------- 1. laptop: mood board and wireframe ---------- */
.pviz--laptop{margin:28px -6px -4px}
.pviz-glow{position:absolute;left:50%;top:46%;width:118%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(closest-side,rgba(19,94,245,.95),rgba(19,94,245,.5) 45%,rgba(19,94,245,0) 100%);transition-duration:1.4s!important}
.lap{position:relative;font-size:clamp(5.5px,2.5cqw,13px)}
.lap-screen{position:relative;aspect-ratio:16/10.2;margin-inline:5%;background:var(--paper);border:.75em solid #05060A;border-bottom-width:.9em;border-radius:1.2em 1.2em .3em .3em;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.14)}
.lap-base{height:1em;border-radius:.2em .2em 1.2em 1.2em;background:linear-gradient(#C9CCD3,#8B90A0);position:relative}
.lap-base::before{content:"";position:absolute;left:50%;top:0;width:16%;height:.4em;translate:-50% 0;border-radius:0 0 .5em .5em;background:#6E7385}
.mb,.wf{position:absolute;top:6%;bottom:6%;display:flex;flex-direction:column;gap:.7em}
.mb{left:4%;width:43%}
.wf{right:4%;width:45%}
.mb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5em}
.mb-grid i{aspect-ratio:1;border-radius:.45em;background:#DCDDD5;position:relative;overflow:hidden}
.mb-grid .is-blue{background:var(--blue)}
.mb-grid .is-yellow{background:var(--yellow)}
.mb-grid .is-ink{background:var(--ink)}
.mb-grid .is-ink::after{content:"";position:absolute;inset:26%;border-radius:50%;border:.3em solid var(--yellow)}
.mb-grid .is-x,.wf-img{background-image:linear-gradient(to top right,transparent calc(50% - .6px),rgba(11,13,20,.28) calc(50% - .6px),rgba(11,13,20,.28) calc(50% + .6px),transparent calc(50% + .6px)),linear-gradient(to bottom right,transparent calc(50% - .6px),rgba(11,13,20,.28) calc(50% - .6px),rgba(11,13,20,.28) calc(50% + .6px),transparent calc(50% + .6px))}
.mb-grid .is-arch{background:#C9CBC1}
.mb-grid .is-arch::after{content:"";position:absolute;left:22%;right:22%;bottom:0;height:66%;border-radius:99em 99em 0 0;background:var(--paper)}
.mb-grid .is-blue::after{content:"";position:absolute;left:-10%;right:-10%;bottom:-38%;height:70%;border-radius:50%;background:rgba(255,255,255,.3)}
.mb-sw{display:flex;align-items:center;gap:.5em;margin-top:.2em}
.mb-sw i{width:1.7em;height:1.7em;border-radius:50%;background:var(--blue);box-shadow:0 0 0 1px rgba(11,13,20,.12)}
.mb-sw i:nth-child(2){background:var(--ink)}
.mb-sw i:nth-child(3){background:var(--yellow)}
.mb-sw i:nth-child(4){background:#fff}
.mb-sw b{margin-left:auto;font-family:var(--display);font-weight:800;font-size:2em;line-height:1;letter-spacing:-.04em}
.wf-page{flex:1;display:flex;flex-direction:column;gap:.55em;padding:.8em;background:#fff;border:1px dashed rgba(11,13,20,.38);border-radius:.5em;min-height:0}
.wf-nav{display:flex;align-items:center;gap:.5em;margin-bottom:.3em}
.wf-nav i{width:.9em;height:.9em;border-radius:50%;background:rgba(11,13,20,.5);margin-right:auto}
.wf-nav span{width:1.8em;height:.3em;border-radius:1em;background:rgba(11,13,20,.25)}
.wf-h{height:.95em;width:92%;border-radius:.2em;background:rgba(11,13,20,.74)}
.wf-h--short{width:60%}
.wf-p{height:.9em;width:80%;background:linear-gradient(rgba(11,13,20,.22),rgba(11,13,20,.22)) 0 0/100% .3em no-repeat,linear-gradient(rgba(11,13,20,.22),rgba(11,13,20,.22)) 0 100%/70% .3em no-repeat}
.wf-btn{width:4.6em;height:1.3em;border-radius:1em;border:1px solid rgba(11,13,20,.6);transform-origin:left center}
.wf-img{flex:1;min-height:2em;border:1px solid rgba(11,13,20,.28);border-radius:.3em;background-color:#EFEFE9}
.wf-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.45em}
.wf-row i{height:1.7em;border:1px solid rgba(11,13,20,.28);border-radius:.3em}
.note{position:absolute;left:45%;bottom:5%;width:6.6em;padding:.9em .8em 1.1em;background:var(--yellow);rotate:-5deg;box-shadow:0 .5em 1.2em -.4em rgba(11,13,20,.5);display:grid;gap:.4em}
.note span{height:.3em;border-radius:1em;background:rgba(11,13,20,.55)}
.note span:last-child{width:55%}

/* ---------- 2. design tool ---------- */
.pviz--dt,.pviz--live{margin:26px calc(clamp(22px,2.4vw,32px)*-1 - 1px) calc(clamp(22px,2.4vw,32px)*-1 - 1px) 0}
.dt{font-size:clamp(6px,3.1cqw,13px);display:flex;flex-direction:column;aspect-ratio:5/3.7;background:#1B2030;border-radius:1.2em 0 0 0;border:1px solid rgba(255,255,255,.16);border-right:0;border-bottom:0;overflow:hidden;box-shadow:-1.5em -1em 4em -1.5em rgba(19,94,245,.5)}
.dt-bar{display:flex;align-items:center;gap:1.4em;height:2.9em;padding:0 1.1em;border-bottom:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.6)}
.dt-tools{display:flex;gap:.5em}
.dt-tools i{width:1.6em;height:1.6em;border-radius:.4em;background:rgba(255,255,255,.08);position:relative}
.dt-tools i::after{content:"";position:absolute;inset:30%;border:1.5px solid rgba(255,255,255,.6);border-radius:.15em}
.dt-tools i:nth-child(2)::after{border-radius:50%}
.dt-tools i:nth-child(3)::after{border-width:0 0 1.5px 0;inset:30% 25% 45%}
.dt-tools i:nth-child(4)::after{border-width:1.5px 0 0 1.5px;border-radius:0}
.dt-tools .is-on{background:var(--blue)}
.dt-tools .is-on::after{border-color:#fff}
.dt-zoom{margin-left:auto;font-size:.8em;font-weight:600}
.dt-body{flex:1;display:flex;min-height:0}
.dt-layers{width:11%;padding:1em .7em;display:grid;align-content:start;gap:.75em;border-right:1px solid rgba(255,255,255,.1)}
.dt-layers i{height:.42em;border-radius:1em;background:rgba(255,255,255,.2)}
.dt-layers i:nth-child(odd){width:70%}
.dt-layers .is-on{background:var(--p-blue)}
.dt-canvas{flex:1;position:relative;min-width:0;background:#0C0F17 radial-gradient(rgba(255,255,255,.1) 1px,transparent 1.2px) 0 0/1.5em 1.5em}
.ab{position:absolute;left:6%;top:11%;right:-3%;bottom:-6%;padding:1em 2em 1em 1.2em;background:var(--paper);border-radius:.5em;box-shadow:0 1.5em 3em -1em rgba(0,0,0,.7)}
.ab-nav{display:flex;align-items:center;gap:.8em;margin-bottom:2.3em}
.ab-nav i{width:1.15em;height:1.15em;border-radius:.35em;background:var(--blue);margin-right:auto}
.ab-nav span{width:2.2em;height:.32em;border-radius:1em;background:rgba(11,13,20,.3)}
.ab-nav b{width:3.4em;height:1.25em;border-radius:1em;background:var(--ink)}
.ab-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:1.2em;align-items:start}
.ab-h{position:relative;font-family:var(--display);font-weight:800;font-size:1.72em;line-height:1.04;letter-spacing:-.04em;padding:.12em .1em .16em;text-wrap:balance}
.sel{position:absolute;inset:-.16em;border:1.5px solid var(--blue);background:rgba(19,94,245,.07)}
.sel i{position:absolute;width:.42em;height:.42em;background:#fff;border:1.5px solid var(--blue)}
.sel i:nth-child(1){left:-.24em;top:-.24em}
.sel i:nth-child(2){right:-.24em;top:-.24em}
.sel i:nth-child(3){left:-.24em;bottom:-.24em}
.sel i:nth-child(4){right:-.24em;bottom:-.24em}
.sel-bar{position:absolute;left:-.1em;bottom:calc(100% + .55em);display:flex;align-items:center;gap:.6em;padding:.36em .6em;border-radius:.5em;background:var(--ink);color:#fff;font-family:var(--sans);font-size:.5em;font-weight:600;letter-spacing:0;line-height:1;box-shadow:0 .8em 1.6em -.5em rgba(0,0,0,.6);transform-origin:left bottom;white-space:nowrap}
.sel-bar em{font-weight:800}
.sel-bar .al{width:1.1em;height:.9em;background:linear-gradient(#fff,#fff) 0 0/100% 2px no-repeat,linear-gradient(#fff,#fff) 0 50%/65% 2px no-repeat,linear-gradient(#fff,#fff) 0 100%/85% 2px no-repeat}
.sel-bar .dot{width:1em;height:1em;border-radius:50%;background:var(--blue);box-shadow:0 0 0 1.5px #fff}
.sel-size{position:absolute;right:-.2em;top:calc(100% + .45em);padding:.3em .55em;border-radius:.3em;background:var(--blue);color:#fff;font-family:var(--sans);font-size:.42em;font-weight:700;letter-spacing:.02em;line-height:1;transform-origin:right top}
.ab-p{display:grid;gap:.45em;margin-top:1.5em}
.ab-p span{height:.34em;border-radius:1em;background:rgba(11,13,20,.28)}
.ab-p span:last-child{width:72%}
.ab-btns{display:flex;align-items:center;gap:.6em;margin-top:1.1em}
.ab-btns b{padding:.6em 1em;border-radius:9em;background:var(--blue);color:#fff;font-size:.7em;font-weight:700;line-height:1;white-space:nowrap}
.ab-btns i{width:3.6em;height:1.75em;border-radius:9em;border:1.5px solid var(--ink)}
.ab-pic{position:relative;aspect-ratio:1/1.12;border-radius:.6em;background:var(--yellow);overflow:hidden}
.ab-pic i{position:absolute;left:18%;right:18%;bottom:0;height:68%;border-radius:99em 99em 0 0;background:var(--ink)}
.ab-pic b{position:absolute;right:10%;top:10%;width:26%;aspect-ratio:1;border-radius:50%;background:var(--blue)}

.ab-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:.8em;margin-top:1.6em}
.ab-cards i{height:5.2em;border-radius:.5em;background:#fff;border:1px solid rgba(11,13,20,.12);position:relative}
.ab-cards i::before{content:"";position:absolute;left:.6em;top:.6em;width:1.3em;height:1.3em;border-radius:.35em;background:var(--blue)}
.ab-cards i:nth-child(2)::before{background:var(--yellow)}
.ab-cards i:nth-child(3)::before{background:var(--ink)}
.ab-cards i::after{content:"";position:absolute;left:.6em;right:.6em;top:2.6em;height:1.2em;background:linear-gradient(rgba(11,13,20,.6),rgba(11,13,20,.6)) 0 0/70% .34em no-repeat,linear-gradient(rgba(11,13,20,.22),rgba(11,13,20,.22)) 0 100%/100% .3em no-repeat}

/* ---------- 3. launched site in a browser ---------- */
.br{font-size:clamp(6px,3.1cqw,13px);display:flex;flex-direction:column;background:#1B2030;border-radius:1.2em 0 0 0;border:1px solid rgba(255,255,255,.16);border-right:0;border-bottom:0;overflow:hidden;box-shadow:-1.5em -1em 4em -1.5em rgba(19,94,245,.5)}
.br-bar{display:flex;align-items:center;gap:1.2em;height:2.9em;padding:0 1.1em}
.br-url{flex:1;display:flex;align-items:center;justify-content:center;gap:.5em;height:1.75em;max-width:19em;margin-right:auto;border-radius:9em;background:rgba(255,255,255,.09);color:rgba(255,255,255,.8);font-size:.82em;font-weight:500}
.br-url svg{width:1em;height:1em;fill:currentColor;stroke:currentColor;stroke-width:1.2}
.br-view{position:relative;aspect-ratio:16/11;background:#FFF3C9;overflow:hidden}
.br-view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:0 0}
.live{position:absolute;right:9%;bottom:15%;display:inline-flex;align-items:center;gap:.6em;padding:.75em 1.2em .75em 1em;border-radius:9em;background:var(--ink);color:#fff;border:1px solid rgba(255,255,255,.2);font-size:clamp(11px,4cqw,15px);font-weight:650;line-height:1;box-shadow:0 1em 2.2em -.6em rgba(0,0,0,.6);transition-timing-function:cubic-bezier(.3,1.6,.5,1)!important}
.live i{position:relative;width:.62em;height:.62em;border-radius:50%;background:#35D07F}
.live i::after{content:"";position:absolute;inset:0;border-radius:50%;background:#35D07F;opacity:0}
.js .proc [data-reveal].in .live i::after{animation:proc-ping 1.2s 1.9s ease-out 3}
@keyframes proc-ping{from{opacity:.7;transform:scale(1)}to{opacity:0;transform:scale(3.4)}}
.cursor{position:absolute;right:calc(9% - 14px);bottom:calc(15% - 20px);width:clamp(20px,7cqw,28px);fill:var(--blue);stroke:#fff;stroke-width:1.6;stroke-linejoin:round;filter:drop-shadow(0 3px 5px rgba(0,0,0,.35))}

/* ---------- wide cards: copy left, visual right ---------- */
@media (min-width:700px){
  .pcard{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);column-gap:clamp(16px,2vw,28px);min-height:300px}
  .pviz--dt,.pviz--live{margin-top:6px;display:grid;align-self:stretch}
  .dt,.br{aspect-ratio:auto;height:100%;min-height:250px}
  .br-view{aspect-ratio:auto;flex:1}
  .pviz--laptop{align-self:end;margin:8px -2% 0 0}
  .pcard-cta{margin-top:auto}
  .pcard-text{margin-bottom:24px}
}
/* ---------- desktop bento: one tall card left, two stacked right ---------- */
@media (min-width:1240px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
  .bento-item--discover{grid-row:1 / span 2}
  .pcard--discover{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;min-height:600px}
  .pcard--discover .pcard-text{max-width:30ch}
  .pcard--discover .pcard-cta{position:absolute;left:0;top:100%;margin:0}
  .pcard--discover .pcard-copy{position:static}
  .pcard--discover .pcard-cta{left:clamp(22px,2.4vw,32px);top:auto;bottom:clamp(22px,2.4vw,32px)}
  .pcard--discover .pviz--laptop{justify-self:end;align-self:end;width:71%;margin:0 -9% 4% 0}
  .pcard--build,.pcard--launch{min-height:288px}
}

/* ---------- why it matters ---------- */
.why{margin-top:clamp(72px,9vw,128px);padding-top:clamp(64px,8vw,112px);border-top:1px solid var(--p-line)}
.why-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(14px,1.8vw,24px)}
.why-grid>li{display:grid;min-width:0}
.why-card{display:flex;flex-direction:column;justify-content:space-between;gap:36px;padding:clamp(24px,2.3vw,32px);background:var(--p-surface);border:1px solid var(--p-line);border-radius:var(--radius);transition:transform .4s var(--ease),border-color .25s,background-color .25s}
.why-card:hover{transform:translateY(-4px);border-color:var(--p-line-hi);background:var(--p-surface-2)}
.why-icon{width:36px;height:36px;fill:none;stroke:var(--p-blue);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.why-title{font-family:var(--display);font-weight:800;font-size:clamp(1.25rem,1.1rem + .35vw,1.42rem);letter-spacing:-.03em;line-height:1.15;margin-bottom:9px}
.why-text{font-size:15.5px;line-height:1.55;color:var(--p-muted)}
@media (min-width:640px){
  .why-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .why-card{min-height:250px}
}
@media (min-width:1240px){
  .why-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .why-card{min-height:300px}
}

@media (prefers-reduced-motion:reduce){
  .pcard:hover,.why-card:hover{transform:none}
  .js .proc [data-reveal] .a{opacity:1!important;transform:none!important;clip-path:none!important}
  .js .proc [data-reveal].in .live i::after{animation:none}
}