/* Streetwise Software Online (SWSO) — the home page control panel.
   Every destination is a tile: art, name, one line, price, status light. Uses tokens from site.css. */
body.panel-page{background:var(--ink);overflow-x:hidden}
.console{position:relative;isolation:isolate;min-height:100vh;padding:0 0 40px}
.console::before{content:"";position:fixed;inset:0;z-index:-2;background:url(img/city-wave.jpg) center 62%/cover no-repeat;opacity:.38}
.console::after{content:"";position:fixed;inset:0;z-index:-1;
  background:radial-gradient(ellipse at 50% 0%,rgba(7,10,18,.55),rgba(7,10,18,.96) 62%)}
.deck{max-width:1320px;margin:0 auto;padding:0 20px}

/* ---- top strip: brand plate + meters ---- */
.topplate{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;margin:18px 0 0;padding:14px 18px;
  border-radius:18px;border:1px solid #2a3650;background:linear-gradient(180deg,rgba(26,34,52,.92),rgba(13,19,34,.92));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.brandplate{display:flex;align-items:center;gap:12px;text-decoration:none}
.brandplate img{width:46px;height:46px;border-radius:12px}
.brandplate b{display:block;font:800 15px/1.2 var(--display);letter-spacing:.02em}
.brandplate b span{color:var(--amber)}
.brandplate small{display:block;color:var(--steel);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
#pulse{width:100%;height:46px;display:block;opacity:.9}
.meters{display:flex;gap:8px}
.meter{--acc:var(--amber);display:flex;align-items:center;gap:9px;padding:8px 12px 8px 9px;border-radius:12px;background:#070b14;border:1px solid #222d42;text-decoration:none;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
.meter.c{--acc:var(--cyan)}
.meter svg{flex:none;width:30px;height:30px;padding:6px;box-sizing:border-box;border-radius:9px;color:var(--acc);background:color-mix(in srgb,var(--acc) 13%,transparent);border:1px solid color-mix(in srgb,var(--acc) 38%,transparent)}
.meter span{display:flex;flex-direction:column;text-align:left}
.meter b{font:700 12.5px/1.15 var(--display);color:var(--acc);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.meter small{font-size:11px;color:var(--steel);font-weight:600;white-space:nowrap;margin-top:2px}
.meter:hover,.meter:focus-visible{transform:translateY(-2px);border-color:var(--acc);box-shadow:0 8px 22px -12px var(--acc);outline:none}
.meter:hover small{color:#e7eaf3}

/* ---- title ---- */
.panel-title{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 30px;margin:34px 0 8px}
.panel-title h1{font-size:clamp(1.9rem,4.4vw,3.4rem);margin:0;max-width:20ch}
.panel-title h1 .soft{display:block;font:600 .38em/1.4 var(--body);color:var(--steel);letter-spacing:.12em;text-transform:uppercase;margin-bottom:.4em}
.panel-title p{margin:0;color:#c9d2e0;max-width:46ch}

/* ---- quick-jump buttons (section switches) ---- */
.switches{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 6px;padding:0;list-style:none}
.switch{display:inline-flex;align-items:center;gap:10px;padding:10px 16px 10px 12px;border-radius:12px;text-decoration:none;
  font-weight:800;font-size:15px;color:var(--paper);background:linear-gradient(180deg,#1b2539,#111827);border:1px solid #2a3650;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 2px 0 #03050a;transition:transform .15s ease,border-color .15s ease}
.switch i{width:10px;height:10px;border-radius:50%;background:var(--amber);box-shadow:0 0 8px rgba(255,174,46,.7)}
.switch.c i{background:var(--cyan);box-shadow:0 0 8px rgba(63,208,255,.7)}
.switch.g i{background:#8fd18b;box-shadow:0 0 8px rgba(143,209,139,.6)}
.switch.r i{background:#ff7a45;box-shadow:0 0 8px rgba(255,122,69,.6)}
.switch:hover,.switch:focus-visible{transform:translateY(-2px);border-color:var(--amber)}

/* ---- module (one per section) ---- */
.module{margin-top:30px;padding:20px;border-radius:22px;border:1px solid #2a3650;
  background:linear-gradient(180deg,rgba(20,27,43,.94),rgba(11,16,28,.94));box-shadow:inset 0 1px 0 rgba(255,255,255,.05);scroll-margin-top:16px}
.module-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 18px;margin:0 0 16px;padding:0 4px}
.module-head h2{display:flex;align-items:center;gap:12px;font-size:clamp(1.15rem,2.2vw,1.5rem);margin:0}
.module-head h2::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--amber);box-shadow:0 0 10px rgba(255,174,46,.8)}
.module.web .module-head h2::before{background:var(--cyan);box-shadow:0 0 10px rgba(63,208,255,.8)}
.module.soon .module-head h2::before{background:#5b6880;box-shadow:none}
.module-head p{margin:0;color:var(--steel);font-size:15px}
.module-head .switch{padding:8px 14px;font-size:14px}

/* ---- tiles ---- */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin:0;padding:0;list-style:none}
.tile{position:relative;display:flex;flex-direction:column;height:100%;padding:16px 16px 14px;border-radius:16px;text-decoration:none;color:var(--paper);
  background:linear-gradient(180deg,#18223a,#0f1626);border:1px solid #273349;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 3px 0 #03050a;transition:transform .18s ease,border-color .18s ease,background .18s ease}
.tile:hover,.tile:focus-visible{transform:translateY(-3px);border-color:var(--amber);background:linear-gradient(180deg,#1d2944,#111a2d)}
.web .tile:hover,.web .tile:focus-visible{border-color:var(--cyan)}
.tile .art{width:58px;height:58px;border-radius:14px;object-fit:cover;margin-bottom:12px;background:#0b111e}
.tile .ph{display:grid;place-items:center;width:58px;height:58px;border-radius:14px;margin-bottom:12px;background:#1a2336;border:1px solid #2a3650;font:800 18px var(--display);color:#c9d2e0}
.tile .led{position:absolute;top:16px;right:16px;width:10px;height:10px;border-radius:50%;background:var(--amber);box-shadow:0 0 9px rgba(255,174,46,.85)}
.tile .led.c{background:var(--cyan);box-shadow:0 0 9px rgba(63,208,255,.85)}
.tile .led.off{background:#5b6880;box-shadow:none}
.tile .name{display:block;font:700 1.02rem/1.25 var(--display);margin:0 0 6px;padding-right:16px}
.tile .desc{display:block;color:#c9d2e0;font-size:14.5px;line-height:1.45;margin-bottom:12px}
.tile .foot{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px}
.tile .price{font-weight:800;font-size:14px;color:var(--amber);font-variant-numeric:tabular-nums}
.web .tile .price{color:var(--cyan)}
.tile .price.muted{color:var(--steel)}
.tile .tag{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--steel);border:1px solid #2a3650;border-radius:999px;padding:2px 9px}
.tile.big{grid-column:span 2}
.tile.big .desc{max-width:52ch}
/* site screenshots for the website tiles */
.tile .shot{display:block;margin:-6px -6px 12px;border-radius:11px;overflow:hidden;aspect-ratio:16/10;background:#0b111e}
.tile .shot img{width:100%;height:100%;object-fit:cover;object-position:top}
.tile .town{font-size:12.5px;color:var(--steel);font-weight:700}
/* small plan list inside web-app tiles */
.tile .plans-mini{display:block;margin:0 0 12px;padding:8px 10px;border-radius:10px;background:#0a0f1b;border:1px solid #1f2a3d;font-size:13.5px;line-height:1.5;color:#c9d2e0}
.tile .plans-mini b{color:var(--cyan)}

/* ---- footer plate (button-style links only) ---- */
.footplate{margin-top:34px;padding:20px;border-radius:22px;border:1px solid #2a3650;background:rgba(11,16,28,.94)}
.footplate .row{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.pill{display:inline-block;padding:8px 14px;border-radius:999px;border:1px solid #2a3650;background:#111827;color:#c9d2e0;text-decoration:none;font-size:14px;font-weight:700}
.pill:hover,.pill:focus-visible{border-color:var(--amber);color:var(--paper)}
.footplate .credit{margin:16px 0 0;color:var(--steel);font-size:14px;max-width:none}

@media (max-width:900px){
  .topplate{grid-template-columns:auto minmax(0,1fr)}
  .meters{grid-column:1/-1;flex-wrap:wrap}
}
@media (max-width:600px){
  .deck{padding:0 12px}
  .topplate{grid-template-columns:1fr;padding:12px}
  #pulse{height:34px}
  .meter{flex:1 1 calc(50% - 8px)}
  .module{padding:14px;border-radius:18px}
  .tiles{grid-template-columns:minmax(0,1fr);gap:10px}
  /* phone: each tile becomes a compact app row: art on the left, text on the right */
  .tile{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:12px;padding:12px}
  .tile .art,.tile .ph{grid-row:1/span 2;width:48px;height:48px;border-radius:12px;margin:0}
  .tile .name{grid-column:2;font-size:.95rem;margin:2px 0 4px}
  .tile .desc{grid-column:2;font-size:13.5px;margin-bottom:8px}
  .tile .plans-mini{grid-column:2;margin-bottom:8px}
  .tile .foot{grid-column:2}
  .tile .shot{grid-column:1/-1;margin:-4px -4px 10px;aspect-ratio:16/8}
  .tile .shot ~ .name,.tile .shot ~ .desc,.tile .shot ~ .foot{grid-column:1/-1}
  .tile .led{top:12px;right:12px}
}
@media (prefers-reduced-motion:reduce){.tile,.switch{transition:none}.tile:hover,.switch:hover{transform:none}}