/* 15 · Build yours — pick what you need, watch the product assemble itself */
.bld{position:relative;background:#f5f7fa;overflow:hidden}
.bld .bld-accent{color:#2a2d9f}
.bld-layout{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.3fr);gap:48px;align-items:stretch}

/* left: questions */
.bld-panel{display:flex;flex-direction:column;gap:26px}
.bld-q{display:grid;grid-template-columns:34px 1fr;row-gap:12px;align-items:center}
.bld-n{font:500 11px/1 'JetBrains Mono',Consolas,monospace;color:#2a2d9f}
.bld-q>b{font-size:16px;font-weight:500;color:#0f1233}
.bld-q>div{grid-column:2}
.bld-seg{position:relative;display:grid;grid-template-columns:repeat(3,1fr);background:#e7e9f6;border-radius:14px;padding:4px}
.bld-seg button{position:relative;z-index:1;border:0;background:none;padding:11px 6px;font-size:13px;color:#4d5180;border-radius:10px;transition:color .35s}
.bld-seg button.on{color:#fff}
.bld-seg>i{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / 3);border-radius:10px;background:#2a2d9f;box-shadow:0 8px 20px -8px rgba(42,45,159,.7);transform:translateX(calc(var(--i,2) * 100%));transition:transform .55s cubic-bezier(.65,0,.25,1)}
.bld-chips{display:flex;flex-wrap:wrap;gap:8px}
.bld-chips button{border:1px solid #d5d8ee;background:#fff;border-radius:999px;padding:9px 15px;font-size:13px;color:#33376a;transition:background .3s,color .3s,border-color .3s,transform .2s,box-shadow .3s}
.bld-chips button:hover{transform:translateY(-1px);border-color:#a9aee8}
.bld-chips button.on{background:#2a2d9f;border-color:#2a2d9f;color:#fff;box-shadow:0 8px 18px -10px rgba(42,45,159,.9)}
.bld-chips:not(.one) button.on::before{content:"✓";margin-right:7px;font-size:11px}

.bld-plan{margin-top:auto;border-radius:20px;background:#fff;border:1px solid #e1e4f3;padding:22px 22px 18px;box-shadow:0 30px 60px -40px rgba(15,18,51,.35)}
.bld-plan-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.bld-plan-top span,.bld-team>span{font:500 10px/1 'JetBrains Mono',Consolas,monospace;letter-spacing:.16em;text-transform:uppercase;color:#6a6e9c}
.bld-plan-top b{font-size:15px;font-weight:400;color:#5c5e80}
.bld-weeks{font-style:normal;font-size:34px;font-weight:400;letter-spacing:-.04em;color:#2a2d9f;font-variant-numeric:tabular-nums;margin-right:4px}
.bld-phases{display:flex;gap:4px;height:34px;margin-bottom:16px}
.bld-phases i{flex:0 0 calc(var(--w) - 3px);border-radius:8px;display:flex;align-items:center;padding:0 9px;overflow:hidden;background:#eceefb;transition:flex-basis .8s cubic-bezier(.65,0,.25,1)}
.bld-phases i:nth-child(3){background:linear-gradient(90deg,#2a2d9f,#5b62ff)}.bld-phases i:nth-child(3) span{color:#fff}
.bld-phases i:nth-child(2){background:#d9dcfa}
.bld-phases span{font-size:11px;font-style:normal;color:#3b3f74;white-space:nowrap}
.bld-team{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.bld-avs{display:flex}
.bld-avs i{width:32px;height:32px;margin-left:-8px;border-radius:50%;border:2px solid #fff;display:grid;place-items:center;font:600 10px/1 Poppins,Arial,sans-serif;font-style:normal;color:#fff;background:var(--c);animation:bld-pop .5s cubic-bezier(.3,1.5,.5,1) both}
@keyframes bld-pop{from{transform:scale(0)}}
.bld-cta{width:100%;background:#0f1233;color:#fff;border-radius:12px}
.bld-cta:hover{background:#2a2d9f}
.bld-fine{margin:10px 0 0;font-size:11px;color:#7a7ea3;text-align:center}

/* right: blueprint canvas */
.bld-canvas{position:relative;min-height:640px;border-radius:24px;overflow:hidden;
  background:radial-gradient(circle at 70% 30%,color-mix(in srgb,var(--ac,#2a2d9f) 14%,transparent),transparent 55%),
             radial-gradient(#c9cdea 1px,transparent 1.2px) 0 0/22px 22px,#eef0fa;
  border:1px solid #e0e3f3;transition:background .8s}
.bld-label{position:absolute;left:20px;bottom:16px;font:600 10px/1 'JetBrains Mono',Consolas,monospace;letter-spacing:.18em;color:var(--ac,#2a2d9f);display:flex;align-items:center;gap:8px}
.bld-label::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;animation:bld-live 2s ease-out infinite}
@keyframes bld-live{0%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 50%,transparent)}100%{box-shadow:0 0 0 8px transparent}}

.bld-browser,.bld-phone{position:absolute;transition:transform .9s cubic-bezier(.65,0,.25,1),opacity .6s,left .9s cubic-bezier(.65,0,.25,1),top .9s cubic-bezier(.65,0,.25,1),width .9s cubic-bezier(.65,0,.25,1)}
.bld-browser{left:6%;top:9%;width:78%;height:72%;border-radius:14px;background:#fff;box-shadow:0 40px 80px -40px rgba(15,18,51,.45),0 0 0 1px rgba(15,18,51,.06);overflow:hidden;display:flex;flex-direction:column}
.bld-bar{height:34px;flex:none;display:flex;align-items:center;gap:6px;padding:0 12px;background:#f3f4fa;border-bottom:1px solid #e6e8f4}
.bld-bar i{width:9px;height:9px;border-radius:50%;background:#d6d9ea}
.bld-url{margin:0 auto;font:500 10px/1 'JetBrains Mono',monospace;color:#6a6e9c;background:#fff;border-radius:999px;padding:5px 14px}
.bld-phone{right:6%;top:24%;width:206px;height:420px;border-radius:34px;padding:8px;background:#0f1233;box-shadow:0 40px 70px -30px rgba(15,18,51,.6),inset 0 0 0 1.5px #3a3e78}
.bld-phone .bld-view{border-radius:27px;height:100%;background:#fff;overflow:hidden}
.bld-canvas[data-kind="web"] .bld-phone{opacity:0;transform:translate(40px,30px) scale(.9);pointer-events:none}
.bld-canvas[data-kind="web"] .bld-browser{left:6%;top:10%;width:88%;height:76%}
.bld-canvas[data-kind="mobile"] .bld-browser{opacity:0;transform:translate(-40px,20px) scale(.92)}
.bld-canvas[data-kind="mobile"] .bld-phone{right:calc(50% - 125px);top:7%;transform:scale(1.2);transform-origin:top center}

/* app views */
.bld-view{position:relative;flex:1;padding:16px;display:grid;gap:10px;align-content:start;font-family:Poppins,Arial,sans-serif;color:#141743;background:linear-gradient(170deg,#fff,color-mix(in srgb,var(--ac,#2a2d9f) 5%,#fff))}
.bld-web{grid-template-columns:repeat(6,1fr);grid-auto-rows:min-content}
.bld-mob{padding:30px 12px 12px;grid-template-columns:1fr;gap:8px;font-size:90%}
.b{border-radius:12px;background:#fff;border:1px solid #e8eaf5;padding:11px 12px;box-shadow:0 8px 20px -16px rgba(15,18,51,.4);min-width:0;font-size:11px}
.b.in{animation:bld-in .7s cubic-bezier(.2,.9,.25,1.15) both}
.b.out{animation:bld-out .35s ease-in forwards}
@keyframes bld-in{from{opacity:0;transform:translateY(14px) scale(.94)}}
@keyframes bld-out{to{opacity:0;transform:scale(.9)}}
.bld-web .b{grid-column:span 3}.bld-web .b.w6{grid-column:span 6}.bld-web .b.w2{grid-column:span 2}.bld-web .b.w4{grid-column:span 4}
.b-head{display:flex;align-items:center;gap:9px;border:0;box-shadow:none;background:none;padding:2px 0}
.b-logo{width:26px;height:26px;border-radius:8px;background:var(--ac);color:#fff;display:grid;place-items:center;font-weight:600;font-size:11px;flex:none}
.b-head b{font-size:14px;font-weight:600;letter-spacing:-.02em}
.b-head .b-av{margin-left:auto;width:24px;height:24px;border-radius:50%;background:color-mix(in srgb,var(--ac) 18%,#fff)}
.b-head .b-lock{font-size:9px;color:#1c9b62;background:#e6f7ee;border-radius:999px;padding:4px 8px;margin-left:auto}
.b-head .b-lock+.b-av{margin-left:6px}
.b-hero{background:var(--ac);color:#fff;border:0}
.b-hero small{display:block;opacity:.75;font-size:10px}.b-hero b{display:block;font-size:16px;font-weight:500;margin:3px 0 8px;letter-spacing:-.02em}
.b-hero .b-pills{display:flex;gap:6px;flex-wrap:wrap}.b-hero .b-pills span{font-size:9.5px;background:rgba(255,255,255,.18);border-radius:999px;padding:4px 9px}
.b-ai{display:flex;gap:9px;align-items:flex-start}
.b-ai .b-mk{flex:none;width:22px;height:22px;border-radius:7px;background:linear-gradient(135deg,var(--ac),#6a70ff);color:#fff;font-size:8.5px;font-weight:600;display:grid;place-items:center}
.b-ai p{margin:0;line-height:1.5}
.b-search{display:flex;flex-direction:column;gap:7px}
.b-search .b-in{border:1px solid #dfe2f3;border-radius:999px;padding:7px 11px;color:#8a8db3}
.b-search .b-sug{display:flex;gap:5px;flex-wrap:wrap}.b-search .b-sug span{font-size:9.5px;background:#f0f1fb;border-radius:999px;padding:3px 8px;color:#4d5180}
.b-chart small,.b-map small,.b-pay small{display:block;color:#7a7ea8;font-size:9.5px;margin-bottom:4px}
.b-chart b{font-size:17px;font-weight:500}
.b-chart svg{display:block;width:100%;height:46px;margin-top:4px}
.b-chart path.l{fill:none;stroke:var(--ac);stroke-width:2;vector-effect:non-scaling-stroke;stroke-dasharray:400;stroke-dashoffset:400;animation:bld-draw 1.4s .2s cubic-bezier(.3,.6,.2,1) forwards}
.b-chart path.a{fill:color-mix(in srgb,var(--ac) 12%,transparent)}
@keyframes bld-draw{to{stroke-dashoffset:0}}
.b-pay{display:flex;justify-content:space-between;align-items:center;gap:8px}
.b-pay b{font-size:16px;font-weight:500}
.b-pay .b-btn{background:#0f1233;color:#fff;border-radius:999px;padding:7px 12px;font-size:10px;white-space:nowrap}
.b-chat{display:flex;flex-direction:column;gap:5px}
.b-chat span{max-width:85%;border-radius:10px;padding:5px 9px;background:#f0f1fb;font-size:10px}
.b-chat span.me{align-self:flex-end;background:var(--ac);color:#fff}
.b-map{position:relative;height:118px;padding:0;overflow:hidden;background:#eef2f6}
.b-map svg{position:absolute;inset:0;width:100%;height:100%}
.b-map small{position:absolute;left:10px;top:8px;z-index:1;background:#fff;border-radius:999px;padding:3px 8px}
.b-map .rt{fill:none;stroke:var(--ac);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:5 5;animation:bld-dash 1.2s linear infinite}
@keyframes bld-dash{to{stroke-dashoffset:-20}}
.b-notify{position:absolute;z-index:3;left:50%;top:10px;width:min(78%,300px);transform:translateX(-50%);display:flex;gap:9px;align-items:center;background:#0f1233;color:#fff;border:0;box-shadow:0 18px 30px -12px rgba(15,18,51,.6)}
.b-notify i{flex:none;width:8px;height:8px;border-radius:50%;background:#4fe0a0;box-shadow:0 0 0 4px rgba(79,224,160,.2)}
.bld-mob .b-notify{top:6px;width:88%;font-size:9.5px;padding:8px 10px}
.b-notify.in{animation:bld-drop .8s cubic-bezier(.2,.9,.25,1.2) both}
@keyframes bld-drop{from{opacity:0;transform:translate(-50%,-30px)}}
.b-notify.out{animation:bld-outn .35s ease-in forwards}
@keyframes bld-outn{to{opacity:0;transform:translate(-50%,-16px)}}

@media(max-width:1000px){.bld-layout{grid-template-columns:1fr}.bld-canvas{min-height:560px}}
@media(max-width:760px){.bld-canvas{min-height:480px}.bld-phone{width:170px;height:350px}.bld-seg button{font-size:12px}}
@media(prefers-reduced-motion:reduce){.b.in,.b-notify.in,.bld-avs i{animation:none}.b-chart path.l{animation:none;stroke-dashoffset:0}}

/* pastel pass — soft, light colours throughout (no dark fills) */
.bld-canvas{--pa:color-mix(in srgb,var(--ac,#2a2d9f) 13%,#fff);--pb:color-mix(in srgb,var(--ac,#2a2d9f) 24%,#fff);--pt:color-mix(in srgb,var(--ac,#2a2d9f) 80%,#1a1c40)}
.bld-seg{background:#eef0fa}
.bld-seg>i{background:#dfe2ff;box-shadow:0 6px 16px -10px rgba(42,45,159,.45)}
.bld-seg button.on{color:#2a2d9f;font-weight:500}
.bld-chips button.on{background:#e6e8ff;border-color:#c5c9fb;color:#2a2d9f;box-shadow:none}
.bld-cta{background:#e3e6ff;color:#2a2d9f;border:1px solid #cdd1fb}
.bld-cta:hover{background:#d6daff}
.bld-phases i:nth-child(3){background:linear-gradient(90deg,#d3d7ff,#e6e3ff)}.bld-phases i:nth-child(3) span{color:#2a2d9f}
.bld-phases i:nth-child(2){background:#e8eafc}.bld-phases i{background:#f2f3fc}
.bld-avs i{color:#3b3f74;border-color:#fff}
.bld-avs i[title="PM"]{--c:#dfe2ff!important}.bld-avs i[title="UX"]{--c:#ffdcd8!important}.bld-avs i[title="FE"]{--c:#d8e6ff!important}
.bld-avs i[title="MO"]{--c:#d4f1e3!important}.bld-avs i[title="BE"]{--c:#e4dcff!important}.bld-avs i[title="AI"]{--c:#efdcff!important}.bld-avs i[title="QA"]{--c:#e9ebf2!important}
.bld-weeks{color:#5b62d6}
.bld-canvas{background:radial-gradient(circle at 70% 30%,var(--pa),transparent 55%),radial-gradient(#d9dcf0 1px,transparent 1.2px) 0 0/22px 22px,#f4f5fc}
.bld-phone{background:#eceef8;box-shadow:0 30px 60px -30px rgba(42,45,159,.3),inset 0 0 0 1.5px #d6d9ee}
.b-logo{background:var(--pb);color:var(--pt)}
.b-hero{background:linear-gradient(135deg,var(--pa),color-mix(in srgb,var(--ac) 7%,#fff));color:var(--pt);border:1px solid var(--pb)}
.b-hero small{opacity:.8}
.b-hero .b-pills span{background:#fff;color:var(--pt);border:1px solid var(--pb)}
.b-ai .b-mk{background:var(--pb);color:var(--pt)}
.b-chat span.me{background:var(--pa);color:var(--pt)}
.b-pay .b-btn{background:var(--pa);color:var(--pt);border:1px solid var(--pb)}
.b-chart path.l{stroke:color-mix(in srgb,var(--ac) 60%,#fff)}
.b-chart path.a{fill:color-mix(in srgb,var(--ac) 9%,transparent)}
.b-map .rt{stroke:color-mix(in srgb,var(--ac) 55%,#fff)}
.b-map circle:first-of-type{fill:#b9bdd8}
.b-head .b-av{background:var(--pa)}
.b-notify{background:#fff;color:#33376a;border:1px solid #e3e6f5;box-shadow:0 16px 30px -16px rgba(42,45,159,.35)}
.b-notify i{background:#7fd9ae;box-shadow:0 0 0 4px rgba(127,217,174,.25)}
.bld-label{color:color-mix(in srgb,var(--ac,#2a2d9f) 60%,#fff)}