@import url("../assets/framework-base.css");
.showcase { padding: clamp(28px, 6vw, 68px); }
.showcase-number { display: block; color: var(--accent); font-size: 12px; font-weight: 900; letter-spacing: .18em; }
.showcase > strong { position: relative; z-index: 2; display: block; max-width: 800px; margin-top: 20px; font-size: clamp(48px, 8vw, 105px); line-height: .85; letter-spacing: -.07em; }
.showcase > p { position: relative; z-index: 2; max-width: 420px; margin-top: 25px; color: #b9bec5; line-height: 1.5; }
.showcase-art { position: absolute; pointer-events: none; }

:root { --bg:#efedf7; --paper:#fff; --ink:#251f3c; --muted:#716b82; --line:#c9c3d8; --accent:#6746d8; --accent-2:#ddd4ff; --dark:#251f3c; --width:1080px; }
.site-header{background:#fff}.button,.nav-links .nav-cta{border-radius:999px}.hero-layout{grid-template-columns:.7fr 1.3fr;min-height:730px}
.concept-stage{min-height:590px;padding:28px;background:#ddd4ff;border:0;border-radius:24px}.selector-stage{display:flex;min-height:534px;padding:32px;flex-direction:column;background:#fff;border-radius:17px;box-shadow:0 22px 50px rgba(37,31,60,.12)}
.selector-stage>small{font-size:9px;font-weight:900;letter-spacing:.15em}.selector-stage>b{margin:12px 0 23px;font-size:24px}.selector-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}.selector-options button{padding:18px;border:1px solid #c9c3d8;background:#f8f7fb;color:#251f3c;text-align:left;font-size:12px;font-weight:800;cursor:pointer;border-radius:9px}.selector-options button:hover,.selector-options button.selected{color:#fff;background:#6746d8;border-color:#6746d8}
.selector-result{display:flex;min-height:150px;margin-top:auto;padding:22px;flex-direction:column;justify-content:center;background:#251f3c;color:#fff;border-radius:11px}.selector-result small{color:#bdaeff;font-size:9px;letter-spacing:.13em}.selector-result b{margin-top:9px;font-size:22px}.selector-result span{margin-top:6px;color:#c8c3d1;font-size:11px;line-height:1.45}.selector-result a{margin-top:13px;color:#bdaeff;font-size:11px;font-weight:900;text-decoration:none}
.feature{border-radius:15px}.feature small{display:grid;width:44px;height:44px;place-items:center;color:#fff;background:#6746d8;border-radius:50%}.about-mark{border-radius:25px;background:#6746d8}
.showcase{background:#251f3c;border-radius:25px}.showcase-art{right:7%;top:12%;width:37%;height:76%;background:linear-gradient(135deg,#6746d8 0 31%,transparent 31% 35%,#fff 35% 65%,transparent 65% 69%,#efc74f 69%);border-radius:18px}
@media(max-width:520px){.selector-options{grid-template-columns:1fr}.selector-stage{padding:20px}}