.builder-page{background:linear-gradient(180deg,#edf4ff 0,#f8fafc 34rem,#f3f4f6 100%);padding-bottom:5rem}.builder-hero{padding:4.5rem 0 2rem;text-align:center}.builder-hero .section-kicker{justify-content:center}.builder-hero h1{font:800 clamp(2.35rem,6vw,4.8rem)/.98 Sora,sans-serif;letter-spacing:-.055em;color:#0f172a;margin:.8rem auto 1rem;max-width:900px}.builder-hero>div>p:last-child{max-width:720px;margin:auto;color:#475569;font-size:1.05rem;line-height:1.7}.builder-shell{display:grid;grid-template-columns:minmax(290px,.82fr) minmax(0,1.55fr) minmax(280px,.72fr);gap:1.25rem;align-items:start}.builder-panel{background:rgba(255,255,255,.92);border:1px solid #dbe5f2;border-radius:24px;box-shadow:0 18px 55px rgba(15,23,42,.08)}.builder-visual{position:sticky;top:1rem;padding:1.25rem;overflow:hidden}.builder-visual-head{display:flex;justify-content:space-between;align-items:start;gap:1rem}.builder-visual-head small,.builder-summary small{display:block;color:#64748b}.builder-visual-head b{color:#0f172a}.builder-visual-head span{font-size:.72rem;background:#e7f0ff;color:#1456b8;padding:.4rem .65rem;border-radius:999px;font-weight:800}.pc-stage{height:470px;position:relative;perspective:900px;margin-top:1rem;background:radial-gradient(circle at 50% 44%,rgba(37,99,255,.18),transparent 43%),linear-gradient(160deg,#081529,#10294e);border-radius:20px;overflow:hidden}.pc-stage:after{content:"";position:absolute;inset:auto 13% 7%;height:34px;border-radius:50%;background:#020617;filter:blur(12px);opacity:.7}.pc-tower{position:absolute;inset:7% 18% 9%;border:1px solid rgba(148,203,255,.5);border-radius:22px 22px 14px 14px;background:linear-gradient(135deg,rgba(20,52,93,.86),rgba(3,11,24,.95));transform:rotateY(-10deg);transform-style:preserve-3d;box-shadow:inset 0 0 60px rgba(37,99,255,.15),20px 20px 50px rgba(0,0,0,.35)}.pc-tower:before{content:"";position:absolute;inset:5%;border:1px solid rgba(56,221,248,.2);border-radius:15px}.tower-slot{--angle:0deg;position:absolute;z-index:2;left:50%;top:50%;width:70px;height:70px;margin:-35px;transform:rotate(var(--angle)) translateX(clamp(72px,9vw,116px)) rotate(calc(var(--angle) * -1));border:1px solid rgba(148,163,184,.45);border-radius:18px;background:rgba(15,23,42,.88);display:grid;place-items:center;color:#b8c8df;transition:.35s ease}.tower-slot:nth-child(1){--angle:-86deg}.tower-slot:nth-child(2){--angle:-43deg}.tower-slot:nth-child(3){--angle:0deg}.tower-slot:nth-child(4){--angle:43deg}.tower-slot:nth-child(5){--angle:86deg}.tower-slot:nth-child(6){--angle:129deg}.tower-slot:nth-child(7){--angle:172deg}.tower-slot:nth-child(8){--angle:215deg}.tower-slot.selected{border-color:#38ddf8;background:#0b55be;color:#fff;box-shadow:0 0 24px rgba(56,221,248,.65);transform:rotate(var(--angle)) translateX(clamp(72px,9vw,116px)) rotate(calc(var(--angle) * -1)) scale(1.08)}.tower-slot.active{outline:3px solid rgba(255,255,255,.85);outline-offset:3px}.tower-slot img{width:54px;height:54px;object-fit:contain;background:white;border-radius:12px}.tower-slot .material-symbols-outlined{font-size:31px}.tower-slot small{position:absolute;top:76px;white-space:nowrap;color:#dceaff;font-size:.65rem;font-weight:800;text-shadow:0 2px 4px #000}.builder-workspace{padding:1.4rem}.builder-progress{display:flex;align-items:center;gap:.8rem;margin-bottom:1.35rem}.builder-progress-track{height:8px;background:#e2e8f0;border-radius:99px;overflow:hidden;flex:1}.builder-progress-track i{display:block;height:100%;width:12.5%;background:linear-gradient(90deg,#2563ff,#0ea5ff);border-radius:inherit;transition:.3s}.builder-progress b{font-size:.78rem;color:#475569}.builder-step-title{display:flex;gap:.8rem;align-items:flex-start}.builder-step-title>span{display:grid;place-items:center;width:45px;height:45px;border-radius:14px;background:#e9f1ff;color:#1d5ed1}.builder-step-title h2{font:800 1.45rem Sora,sans-serif;margin:0;color:#0f172a}.builder-step-title p{color:#64748b;margin:.35rem 0 0;font-size:.9rem}.builder-search{display:flex;margin:1.2rem 0;border:1px solid #cbd5e1;border-radius:14px;background:#fff;padding:0 .9rem;align-items:center}.builder-search:focus-within{outline:3px solid rgba(37,99,255,.18);border-color:#2563ff}.builder-search input{border:0;outline:0;width:100%;padding:.9rem;background:transparent}.builder-products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;max-height:620px;overflow:auto;padding:.15rem}.builder-product{display:grid;grid-template-columns:76px 1fr;gap:.75rem;text-align:left;border:1px solid #dbe5f2;border-radius:17px;background:#fff;padding:.7rem;cursor:pointer;position:relative;transition:.2s}.builder-product:hover{border-color:#8eb7f5;transform:translateY(-2px)}.builder-product.selected{border:2px solid #2563ff;background:#f2f7ff}.builder-product[disabled]{opacity:.55;cursor:not-allowed;transform:none}.builder-product img{width:76px;height:76px;object-fit:contain;border-radius:12px;background:#f8fafc}.builder-product strong{font-size:.83rem;line-height:1.35;color:#0f172a;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.builder-product b{display:block;color:#1456b8;margin-top:.35rem;font-size:.86rem}.compat-tag{display:inline-flex;margin-top:.35rem;border-radius:999px;padding:.22rem .42rem;background:#f1f5f9;color:#64748b;font-size:.63rem;font-weight:800}.compat-tag.ok{background:#dcfce7;color:#166534}.compat-tag.blocked{background:#fee2e2;color:#991b1b}.builder-nav{display:flex;justify-content:space-between;margin-top:1.25rem;gap:.7rem}.builder-nav button{min-height:46px}.builder-summary{position:sticky;top:1rem;padding:1.3rem}.builder-summary h2{font:800 1.2rem Sora,sans-serif;margin:.2rem 0}.compatibility-state{margin:1rem 0;padding:.85rem;border-radius:14px;background:#fff7ed;color:#9a3412;font-size:.8rem;line-height:1.45}.compatibility-state.ok{background:#ecfdf5;color:#166534}.compatibility-state.blocked{background:#fef2f2;color:#991b1b}.summary-list{display:grid;gap:.45rem;margin:1rem 0}.summary-item{display:grid;grid-template-columns:30px 1fr auto;gap:.55rem;align-items:center;padding:.52rem 0;border-bottom:1px solid #eef2f7}.summary-item span:first-child{width:28px;height:28px;border-radius:9px;background:#eff6ff;color:#2563ff;display:grid;place-items:center;font-size:.75rem;font-weight:800}.summary-item b{font-size:.72rem;white-space:nowrap}.summary-item strong{font-size:.72rem;color:#334155;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.summary-item.empty strong{color:#94a3b8;font-weight:600}.summary-total{display:flex;justify-content:space-between;align-items:end;margin:1.15rem 0}.summary-total span{color:#64748b;font-size:.75rem}.summary-total strong{font:800 1.55rem Sora,sans-serif;color:#0f172a}.builder-finish{width:100%}.builder-finish[disabled]{opacity:.5}.builder-honesty{font-size:.68rem;line-height:1.5;color:#64748b;margin:.75rem 0 0}.builder-empty{grid-column:1/-1;padding:2rem;text-align:center;color:#64748b}.builder-toast{position:fixed;z-index:30;right:1rem;bottom:1rem;max-width:360px;background:#0f172a;color:#fff;padding:1rem 1.2rem;border-radius:14px;box-shadow:0 18px 55px rgba(15,23,42,.25)}
@media(max-width:1050px){.builder-shell{grid-template-columns:.8fr 1.2fr}.builder-summary{position:static;grid-column:1/-1}.summary-list{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.builder-page{padding-bottom:2rem}.builder-hero{padding:2.5rem 0 1.3rem}.builder-shell{display:flex;flex-direction:column}.builder-panel{width:100%;border-radius:19px}.builder-visual{position:relative;top:auto}.pc-stage{height:340px}.pc-tower{inset:6% 12% 10%}.tower-slot{width:58px;height:58px;margin:-29px}.tower-slot img{width:45px;height:45px}.tower-slot small{display:none}.builder-products{grid-template-columns:1fr;max-height:520px}.builder-product{grid-template-columns:68px 1fr}.builder-product img{width:68px;height:68px}.summary-list{grid-template-columns:1fr}.builder-nav{position:sticky;bottom:.5rem;z-index:5;background:rgba(255,255,255,.94);padding:.6rem;border-radius:14px;box-shadow:0 8px 28px rgba(15,23,42,.16)}}
@media(prefers-reduced-motion:reduce){.tower-slot,.builder-product{transition:none}}
.tower-slot{--inverse-angle:0deg;transform:rotate(var(--angle)) translateX(clamp(72px,9vw,116px)) rotate(var(--inverse-angle))}.tower-slot:nth-child(1){--inverse-angle:86deg}.tower-slot:nth-child(2){--inverse-angle:43deg}.tower-slot:nth-child(3){--inverse-angle:0deg}.tower-slot:nth-child(4){--inverse-angle:-43deg}.tower-slot:nth-child(5){--inverse-angle:-86deg}.tower-slot:nth-child(6){--inverse-angle:-129deg}.tower-slot:nth-child(7){--inverse-angle:-172deg}.tower-slot:nth-child(8){--inverse-angle:-215deg}.tower-slot.selected{transform:rotate(var(--angle)) translateX(clamp(72px,9vw,116px)) rotate(var(--inverse-angle)) scale(1.08)}