@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:#f1f1ec; --paper:#fff; --ink:#17191c; --muted:#70747a; --line:#cfd1ce; --accent:#ff6b35; --accent-2:#ffe1d5; --dark:#17191c; --width:1220px; }
.site-header { background:rgba(241,241,236,.94); }
.nav-links .nav-cta,.button { border-radius:8px; }
.hero-layout { grid-template-columns:.78fr 1.22fr; }
.concept-stage { padding:14px; background:#dbddd8; border-radius:22px; }
.bento-stage { display:grid; height:100%; min-height:470px; grid-template-columns:1.25fr .75fr .9fr; grid-template-rows:1fr .8fr; gap:12px; }
.tile { display:flex; padding:22px; flex-direction:column; justify-content:space-between; background:#fff; border-radius:14px; }
.tile small { font-size:10px; font-weight:900; letter-spacing:.14em; }
.tile strong { font-size:64px; letter-spacing:-.07em; }
.tile-main { grid-row:span 2; color:#fff; background:#17191c; }
.tile-main strong { margin-top:auto; font-size:120px; }
.tile-main span,.tile-proof span { color:#aeb4ba; font-size:13px; }
.tile-stat { background:#ff6b35; }
.tile-list { grid-row:span 2; gap:12px; justify-content:flex-start; }
.tile-list b { margin-bottom:30px; font-size:20px; }
.tile-list span { padding:13px 0; border-top:1px solid #d9dbd8; font-size:12px; }
.tile-proof { background:#cad7ff; }
.tile-cta { justify-content:center; font-weight:850; background:#d7ff55; }
.feature-grid { grid-template-columns:1.4fr .8fr .8fr; }
.feature { border-radius:15px; }
.about-mark { border-radius:20px; }
.showcase { background:#dddeda; color:#17191c; border-radius:22px; }
.showcase > p { color:#5f6468; }
.showcase-art { right:5%; top:10%; width:42%; height:80%; background:linear-gradient(135deg,#ff6b35 0 50%,#17191c 50%); border-radius:22px; box-shadow:-28px 28px 0 #fff; }
@media(max-width:820px){.bento-stage{grid-template-columns:1fr 1fr;grid-template-rows:auto}.tile-main,.tile-list{grid-row:auto}.tile-main{grid-column:span 2}.feature-grid{grid-template-columns:1fr}.showcase-art{opacity:.25;width:60%}}