/* =========================================================
   33bit Showroom — hub-page extras on top of ../assets/css/main.css
   Reuses the main site's dark navy/anthracite tokens + primitives.
   ========================================================= */

/* ---------- Showroom hero ---------- */
.showroom-hero{position:relative;overflow:hidden;background:var(--bg-dark);color:var(--fg-dark);padding-block:clamp(96px,14vw,150px) var(--sp-9)}
.showroom-hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(60% 70% at 78% 20%, rgba(217,177,101,.16), transparent 62%),
             radial-gradient(50% 60% at 8% 90%, rgba(141,123,245,.14), transparent 68%);
}
.showroom-hero > .container{position:relative;z-index:1}
.showroom-hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-8);align-items:center}
.showroom-hero-copy{max-width:640px}
.showroom-hero-copy h1{margin:var(--sp-4) 0 var(--sp-5)}
.showroom-microcopy{color:var(--fg-dark-muted);font-size:.95rem;max-width:56ch;margin-top:var(--sp-3)}
@media (min-width:960px){.showroom-hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}}

/* mini browser-collage visual */
.showroom-collage{position:relative;display:grid;gap:var(--sp-4);min-height:320px}
.collage-card{
  position:relative;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-lg);
  padding:var(--sp-5);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;gap:10px;
  transition:transform .2s var(--ease);
}
.collage-card span{font-size:.72rem;font-weight:750;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.collage-card strong{font-family:var(--font-display);font-size:1.15rem;font-weight:600;color:var(--fg)}
.collage-card i{display:block;height:8px;border-radius:99px;background:var(--border-strong);width:70%}
.collage-card i:nth-of-type(2){width:45%}
.collage-card b{margin-top:4px;align-self:flex-start;font-size:.76rem;font-weight:700;padding:8px 14px;border-radius:99px;background:var(--accent);color:var(--void-950)}
.collage-main{transform:rotate(-1.5deg)}
.collage-warm{transform:rotate(1deg) translateX(6%)}
.collage-calm{transform:rotate(-.5deg) translateX(2%)}
.collage-phone{width:min(160px,44%);padding:var(--sp-4);gap:8px;background:var(--coffee-950);border-color:var(--border-dark)}
.collage-phone span{display:block;height:60px;border-radius:12px;background:linear-gradient(135deg,rgba(217,177,101,.24),rgba(141,123,245,.14));margin-bottom:4px}
.collage-phone i{background:rgba(255,255,255,.14)}
.collage-phone b{background:var(--accent-dark)}
@media (min-width:640px){
  .showroom-collage{grid-template-columns:repeat(2,1fr)}
  .collage-main{grid-column:1/-1}
}

/* ---------- Trust strip (reuse trust-bar look) ---------- */
.showroom-trust-strip{position:relative;background:var(--bg-dark);border-top:1px solid var(--border-dark);padding-block:var(--sp-5)}
.showroom-trust-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-3) var(--sp-7)}
.showroom-trust-pills span{position:relative;padding-left:16px;font-size:.86rem;font-weight:650;color:var(--fg-dark-muted)}
.showroom-trust-pills span::before{content:"";position:absolute;left:0;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--accent-dark);box-shadow:0 0 10px var(--accent-dark)}

/* ---------- Logic grid ---------- */
.logic-grid{display:grid;gap:var(--sp-4);margin-top:var(--sp-6)}
.logic-grid article{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--sp-5)}
.logic-grid strong{display:block;font-family:var(--font-display);font-size:1.05rem;margin-bottom:6px}
.logic-grid span{color:var(--fg-muted);font-size:.9rem}
@media (min-width:700px){.logic-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.logic-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- Gallery / case cards ---------- */
.showroom-info-box{display:flex;flex-wrap:wrap;gap:8px;font-size:.86rem;color:var(--fg-muted);background:var(--surface);border:1px solid var(--border);padding:14px 18px;border-radius:var(--radius-md);margin-bottom:var(--sp-6)}
.showroom-info-box strong{color:var(--fg)}
.premium-case-grid{display:grid;gap:var(--sp-5)}
.premium-case-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .18s var(--ease),box-shadow .25s var(--ease)}
.premium-case-card:hover{box-shadow:var(--shadow-lg)}
.case-visual{position:relative;height:150px;background:var(--bg-alt);overflow:hidden}
.case-browser{position:absolute;inset:14px 14px auto 14px;height:70%;background:var(--coffee-950);border-radius:var(--radius-sm);border:1px solid var(--border-dark);padding:10px}
.case-browser span{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--border-strong);margin-right:4px}
.case-browser strong{display:block;height:8px;width:60%;border-radius:99px;background:rgba(217,177,101,.4);margin:10px 0 6px}
.case-browser i{display:block;height:6px;border-radius:99px;background:rgba(255,255,255,.12);width:80%;margin-bottom:5px}
.case-phone{position:absolute;right:20px;bottom:-10px;width:34px;height:56px;background:var(--coffee-950);border:1px solid var(--border-dark);border-radius:10px}
.case-phone span{display:block;height:16px;margin:5px 5px 3px;border-radius:4px;background:rgba(141,123,245,.3)}
.case-phone i{display:block;height:4px;margin:0 5px 3px;border-radius:99px;background:rgba(255,255,255,.14)}
.show-card-body{padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-4)}
.show-tag{display:inline-block;font-size:.72rem;font-weight:750;text-transform:uppercase;letter-spacing:.05em;color:var(--accent);margin-bottom:8px}
.show-card-body h3{margin-bottom:8px}
.show-card-body p{font-size:.92rem;margin-bottom:var(--sp-3)}
.case-points{display:grid;gap:6px;margin-bottom:var(--sp-3)}
.case-points li{font-size:.86rem;color:var(--fg-muted);display:flex;gap:8px}
.case-points li::before{content:"✓";color:var(--accent);font-weight:800}
.show-card-body small{display:block;color:var(--fg-muted);font-size:.78rem;margin-bottom:var(--sp-3)}
@media (min-width:700px){.premium-case-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.premium-case-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- Before / after mocks ---------- */
.premium-ba-grid{display:grid;gap:var(--sp-5)}
.ba-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--sp-6)}
.ba-card.after{border-color:rgba(217,177,101,.3)}
.ba-mock{border-radius:var(--radius-md);height:120px;margin-bottom:var(--sp-4);background:var(--bg-alt);position:relative;overflow:hidden}
.ba-mock span{position:absolute;inset:10px 10px auto 10px;height:14px;border-radius:4px;background:var(--border-strong)}
.ba-mock i{position:absolute;left:10px;right:10px;height:6px;border-radius:99px;background:rgba(255,255,255,.1)}
.ba-mock i:nth-of-type(1){top:38px}
.ba-mock i:nth-of-type(2){top:52px;width:70%}
.ba-mock i:nth-of-type(3){top:66px;width:50%}
.ba-mock-after{background:linear-gradient(135deg,var(--coffee-950),var(--coffee-800))}
.ba-mock-after span{background:var(--accent-dark)}
.ba-card h3{margin-bottom:var(--sp-3)}
.ba-list{display:grid;gap:8px}
.ba-list li{font-size:.9rem;color:var(--fg-muted);display:flex;gap:8px}
.ba-card.before .ba-list li::before{content:"–";color:var(--ink-300)}
.ba-card.after .ba-list li::before{content:"✓";color:var(--accent);font-weight:800}
.showroom-section-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-7)}
@media (min-width:820px){.premium-ba-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- Process / offer grids ---------- */
.showroom-process-grid,.showroom-offer-grid{display:grid;gap:var(--sp-4);margin-top:var(--sp-6)}
.showroom-process-grid article,.showroom-offer-grid article{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--sp-5)}
.showroom-process-grid strong,.showroom-offer-grid strong{display:block;font-family:var(--font-display);font-size:1.05rem;margin-bottom:6px}
.showroom-process-grid span,.showroom-offer-grid span{color:var(--fg-muted);font-size:.9rem}
@media (min-width:700px){.showroom-process-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.showroom-offer-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1100px){.showroom-process-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- Final CTA ---------- */
.showroom-final-cta{position:relative;background:var(--bg-dark);color:var(--fg-dark);padding-block:var(--sp-9);overflow:hidden}
.final-cta-box{position:relative;z-index:1;text-align:center;max-width:60ch;margin-inline:auto;display:grid;justify-items:center;gap:var(--sp-3)}
.final-cta-box .hero-actions{justify-content:center;margin-top:var(--sp-5)}
.final-cta-box small{color:var(--fg-dark-muted);font-size:.84rem;margin-top:var(--sp-2)}