/* DEELSYS – SBS Project Page (scoped) */
#sbs-root{
  font: inherit;
  color: inherit;
  /* Theme variables (auto-adjusted in JS; these are fallbacks) */
  --brand:#2b86d9;
  --accent:#00c6a2;
  --bg: transparent;
  --panel: color-mix(in srgb, currentColor 5%, transparent);
  --ink: currentColor;
  --ink-muted: color-mix(in srgb, currentColor 60%, #9fb0c7);
  --card: color-mix(in srgb, #0b1320 60%, transparent);
  --line: color-mix(in srgb, currentColor 15%, transparent);
  --chip: color-mix(in srgb, #0e1420 85%, transparent);
}
#sbs-root *{box-sizing:border-box}
#sbs-root a{color:var(--brand);text-decoration:none} #sbs-root a:hover{text-decoration:underline}
#sbs-root .wrap{max-width:1200px;margin:0 auto;padding:0 20px}
#sbs-root .section{padding:72px 0}
#sbs-root .muted{color:var(--ink-muted)}
#sbs-root .h1{font-size:clamp(28px,5vw,52px);line-height:1.1;margin:0 0 12px}
#sbs-root .h2{font-size:clamp(22px,3.5vw,34px);line-height:1.2;margin:0 0 12px}
#sbs-root .lead{font-size:18px;color:var(--ink-muted);max-width:820px}
#sbs-root .btn{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(180deg,var(--brand),color-mix(in srgb, var(--brand) 70%, #1a1a1a));color:#fff;
  padding:12px 18px;border-radius:12px;font-weight:600;border:1px solid color-mix(in srgb,var(--brand) 70%, #fff 30%);box-shadow:0 6px 24px color-mix(in srgb, var(--brand) 25%, transparent)}
#sbs-root .btn.alt{background:linear-gradient(180deg,color-mix(in srgb,#2a3344 70%, #000),#1b2333);border-color:#2b3750}
#sbs-root .chip{display:inline-block;background:var(--chip);border:1px solid color-mix(in srgb, var(--ink) 12%, transparent);border-radius:10px;padding:6px 10px;color:var(--ink-muted);font-size:14px}

/* Hero */
#sbs-root .hero{position:relative;min-height:58vh;display:grid;place-items:center;overflow:hidden;background:none;border-radius:16px;margin-top:8px}
#sbs-root .hero .content{position:relative;z-index:2;text-align:center;padding:24px}
#sbs-root .map-stage{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
#sbs-root .iso-map{width:min(1200px,100vw);aspect-ratio:16/9;transform:perspective(1200px) rotateX(5deg) rotateZ(-35deg) scale(2);
  transition:transform .9s cubic-bezier(.2,.8,.2,1);opacity:.85;filter:drop-shadow(0 24px 40px rgba(0,0,0,.15))}
#sbs-root .hero.scrolled .iso-map{transform:perspective(2000px) rotateX(30deg) rotateZ(-45deg) scale(1.18)}
#sbs-root .pin{fill:var(--brand);stroke:#fff;stroke-width:1.5}
#sbs-root .pin.hot{fill:var(--accent)}
#sbs-root .scroll-cue{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);opacity:.75;font-size:13px}

/* Layout helpers */
#sbs-root .grid{display:grid;gap:20px}
#sbs-root .features{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
#sbs-root .card{background:linear-gradient(180deg,var(--card),color-mix(in srgb, #0f141f 40%, transparent));border:1px solid var(--line);border-radius:16px;padding:20px}
#sbs-root .icon{font-size:26px}
#sbs-root .case{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}
@media (max-width: 980px){#sbs-root .case{grid-template-columns:1fr;}}
#sbs-root .tag{display:inline-flex;align-items:center;gap:8px;border:1px solid color-mix(in srgb, var(--ink) 15%, transparent);padding:6px 10px;border-radius:999px;background:color-mix(in srgb, #0e1420 80%, transparent);color:var(--ink-muted);font-size:13px}
#sbs-root .gallery{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
#sbs-root .tile{border-radius:14px;background:color-mix(in srgb, #0f1420 85%, transparent);border:1px solid color-mix(in srgb, #1e293b 85%, transparent);aspect-ratio:4/3;display:grid;place-items:center}
#sbs-root .audience{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
#sbs-root .audience .card{min-height:180px}
#sbs-root .cta{display:flex;gap:16px;flex-wrap:wrap}
#sbs-root .footer{padding:24px 0;color:var(--ink-muted);border-top:1px solid color-mix(in srgb, var(--ink) 12%, transparent);margin-top:36px}

/* Reveal on scroll */
#sbs-root .reveal{opacity:0;transform:translateY(18px);transition:all .7s ease}
#sbs-root .reveal.in-view{opacity:1;transform:none}

/* E-paper grid & widgets */
#sbs-root .epaper-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
#sbs-root .epaper-device{width:100%;aspect-ratio:3/4;border-radius:10px;background:#eef2f7;color:#111;display:grid;grid-template-rows:auto 1fr auto;gap:8px;padding:14px}
#sbs-root .epaper-card{background:#fff;border:1px solid #dde3ee;border-radius:8px;padding:8px}
#sbs-root .epaper-map{height:180px;border-radius:8px;background:linear-gradient(180deg,#e9f1fb,#f5f7fb);display:grid;place-items:center;position:relative}
#sbs-root .map-chip{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px dashed #c7d2e5;border-radius:999px;padding:4px 8px;font-size:12px;color:#333;position:absolute;top:8px;left:8px}

/* Compact hero option via wrapper class */
#sbs-root.compact .hero{min-height:48vh}