/* ===================================================================
   ASG shared design system — used by products / detail pages
   (public + internal). Mirrors index.html tokens.
=================================================================== */
:root{
  --bg:#050507;--bg2:#0a0a0e;--bg3:#101015;--bg4:#161620;--raised:#1a1a24;
  --border:rgba(255,255,255,0.05);--border2:rgba(255,255,255,0.09);--border3:rgba(255,255,255,0.14);
  --text:#e4e4e7;--text2:#8a8a96;--text3:#4a4a56;
  --chrome:#d8d8e0;--silver:#c0c0c8;--steel:#9898a4;
  --cyan:#5ce0d6;--cyan-dim:rgba(92,224,214,0.07);--cyan-mid:rgba(92,224,214,0.15);--cyan-glow:rgba(92,224,214,0.25);
  --green:#40d870;--green-dim:rgba(64,216,112,0.08);
  --amber:#e8b85a;--amber-dim:rgba(232,184,90,0.08);
  --violet:#8b5cf6;--violet-dim:rgba(139,92,246,0.06);
  --rose:#f43f5e;--rose-dim:rgba(244,63,94,0.06);
  --font:'Barlow',system-ui,sans-serif;--display:'Rajdhani',sans-serif;--mono:'Share Tech Mono',monospace;
  --ease:cubic-bezier(0.16,1,0.3,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.6}
a{color:inherit;text-decoration:none}
button,input,select{font-family:var(--font)}
::selection{background:var(--cyan);color:var(--bg)}
::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--border3);border-radius:2px}
.clip{clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px))}
.clip-sm{clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px))}
.mono{font-family:var(--mono)}

/* --- nav --- */
.topbar{position:sticky;top:0;z-index:100;background:rgba(5,5,7,0.9);backdrop-filter:blur(20px) saturate(150%);border-bottom:1px solid var(--border)}
.topbar-in{max-width:1300px;margin:0 auto;padding:0 22px;height:56px;display:flex;align-items:center;gap:16px}
.topbar-logo{display:flex;align-items:center;gap:9px;font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:0.04em;text-transform:uppercase;color:var(--chrome);white-space:nowrap}
.topbar-logo .hex{color:var(--cyan)}
.topbar-links{display:flex;gap:20px;margin-left:8px;flex:1}
.topbar-links a{font-family:var(--mono);font-size:11px;color:var(--text2);text-transform:uppercase;letter-spacing:0.08em;transition:color 0.2s}
.topbar-links a:hover,.topbar-links a.on{color:var(--cyan)}
.topbar-badge{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:0.1em;padding:3px 9px;border:1px solid;white-space:nowrap}
.badge-ext{color:var(--cyan);border-color:var(--cyan-mid);background:var(--cyan-dim)}
.badge-int{color:var(--amber);border-color:rgba(232,184,90,0.3);background:var(--amber-dim)}
@media(max-width:720px){.topbar-links{display:none}}

.wrap{max-width:1300px;margin:0 auto;padding:34px 22px 90px}
.page-head{margin-bottom:26px}
.page-label{font-family:var(--mono);font-size:10px;color:var(--cyan);text-transform:uppercase;letter-spacing:0.16em;margin-bottom:8px}
.page-label::before{content:'// '}
.page-title{font-family:var(--display);font-size:clamp(28px,4vw,42px);font-weight:700;text-transform:uppercase;color:var(--chrome);line-height:1.05}
.page-sub{font-size:14px;color:var(--text2);margin-top:8px;max-width:680px;line-height:1.7}

/* --- KPI strip --- */
.kstrip{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:22px}
@media(max-width:1000px){.kstrip{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.kstrip{grid-template-columns:repeat(2,1fr)}}
.kbox{background:var(--bg2);border:1px solid var(--border);padding:13px 15px}
.kbox .l{font-family:var(--mono);font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:6px}
.kbox .v{font-family:var(--display);font-size:24px;font-weight:700;color:var(--chrome);line-height:1}

/* --- filter bar --- */
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;background:var(--bg2);border:1px solid var(--border);padding:11px;margin-bottom:14px}
.filters input[type=search]{flex:1;min-width:180px;background:var(--bg3);border:1px solid var(--border2);color:var(--text);padding:9px 12px;font-size:13px;outline:none}
.filters input:focus,.filters select:focus{border-color:var(--cyan-mid)}
.filters select{background:var(--bg3);border:1px solid var(--border2);color:var(--text);padding:9px 10px;font-size:12px;outline:none}
.filters .count{font-family:var(--mono);font-size:10px;color:var(--text3);margin-left:auto;white-space:nowrap}

/* --- table --- */
.tbl-scroll{overflow-x:auto;border:1px solid var(--border);background:var(--bg2)}
table.tbl{width:100%;border-collapse:collapse;min-width:820px}
table.tbl th{font-family:var(--mono);font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:0.1em;text-align:left;padding:12px 14px;background:var(--bg3);border-bottom:1px solid var(--border2);white-space:nowrap;cursor:pointer;user-select:none;font-weight:400}
table.tbl th:hover{color:var(--cyan)}
table.tbl th.num,table.tbl td.num{text-align:right}
table.tbl td{padding:12px 14px;border-bottom:1px solid var(--border);font-size:13px;color:var(--text2);vertical-align:middle}
table.tbl tr:last-child td{border-bottom:none}
table.tbl tbody tr{cursor:pointer;transition:background 0.12s}
table.tbl tbody tr:hover td{background:var(--bg3)}
.t-name{display:flex;align-items:center;gap:10px;min-width:0}
.t-ico{width:32px;height:32px;min-width:32px;display:flex;align-items:center;justify-content:center;font-size:16px;border:1px solid var(--border2);background:var(--bg3);clip-path:polygon(0 0,calc(100% - 5px) 0,100% 5px,100% 100%,5px 100%,0 calc(100% - 5px))}
.t-title{font-family:var(--display);font-size:15px;font-weight:700;text-transform:uppercase;color:var(--chrome);letter-spacing:0.02em;white-space:nowrap}
.t-cat{font-family:var(--mono);font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:0.06em}

/* --- status + priority badges --- */
.st{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:0.08em;padding:3px 9px;border:1px solid;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.st::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}
.st-live{color:var(--green);border-color:rgba(64,216,112,0.25);background:var(--green-dim)}
.st-beta{color:var(--amber);border-color:rgba(232,184,90,0.25);background:var(--amber-dim)}
.st-dev{color:var(--violet);border-color:rgba(139,92,246,0.3);background:var(--violet-dim)}
.st-research{color:var(--silver);border-color:var(--border3);background:var(--bg3)}
.st-parked{color:var(--text2);border-color:var(--border2);background:var(--bg3)}
.st-active{color:var(--cyan);border-color:var(--cyan-mid);background:var(--cyan-dim)}
.pr{font-family:var(--mono);font-size:9px;letter-spacing:0.06em;padding:2px 7px;text-transform:uppercase;border:1px solid var(--border2);color:var(--text2)}
.pr-P0{color:var(--rose);border-color:rgba(244,63,94,0.3)}
.pr-P1{color:var(--amber);border-color:rgba(232,184,90,0.3)}
.pr-P2{color:var(--cyan);border-color:var(--cyan-mid)}

/* --- platform grid --- */
.pgrid{display:flex;gap:4px;flex-wrap:wrap}
.pcell{font-family:var(--mono);font-size:9px;letter-spacing:0.02em;padding:3px 6px;border:1px solid var(--border2);color:var(--text3);background:var(--bg3);white-space:nowrap;display:inline-flex;align-items:center;gap:4px}
.pcell.live{color:var(--green);border-color:rgba(64,216,112,0.3);background:var(--green-dim)}
.pcell.beta{color:var(--amber);border-color:rgba(232,184,90,0.3);background:var(--amber-dim)}
.pcell.planned{color:var(--cyan);border-color:var(--cyan-mid);background:var(--cyan-dim)}
.pcell.na{opacity:0.35}
.pcell .pdot{width:5px;height:5px;border-radius:50%;background:currentColor}
.pcell.na .pdot{background:var(--text3)}
.plat-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-family:var(--mono);font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:0.06em}
.plat-legend span{display:inline-flex;align-items:center;gap:5px}
.plat-legend i{width:8px;height:8px;border-radius:50%;display:inline-block}

/* --- detail page --- */
.dt-hero{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;margin-bottom:8px}
.dt-ico{width:64px;height:64px;min-width:64px;display:flex;align-items:center;justify-content:center;font-size:32px;border:1px solid var(--border2);background:var(--bg2);clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px))}
.dt-h-main{flex:1;min-width:240px}
.dt-name{font-family:var(--display);font-size:clamp(26px,4vw,40px);font-weight:700;text-transform:uppercase;color:var(--chrome);line-height:1.02}
.dt-tagline{font-size:15px;color:var(--text2);margin-top:6px;line-height:1.6;max-width:640px}
.dt-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;align-items:center}
.dt-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;margin-top:24px;align-items:start}
@media(max-width:900px){.dt-grid{grid-template-columns:1fr}}
.panel{background:var(--bg2);border:1px solid var(--border);padding:20px 22px;margin-bottom:16px}
.panel-t{font-family:var(--display);font-size:15px;font-weight:700;text-transform:uppercase;color:var(--chrome);letter-spacing:0.03em;margin-bottom:14px;display:flex;align-items:center;gap:9px}
.panel-t .tag{font-family:var(--mono);font-size:8px;letter-spacing:0.1em;padding:2px 7px;border:1px solid var(--cyan-mid);color:var(--cyan);text-transform:uppercase}
.panel-t .tag.ai{border-color:var(--violet);color:var(--violet)}
.panel p{font-size:13.5px;color:var(--text2);line-height:1.7}
.panel p+p{margin-top:10px}
.ai-note{font-family:var(--mono);font-size:9px;color:var(--text3);letter-spacing:0.05em;margin-top:12px;padding-top:10px;border-top:1px dashed var(--border2);text-transform:uppercase}

/* SWOT / analysis blocks */
.swot{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:560px){.swot{grid-template-columns:1fr}}
.swot-cell{background:var(--bg3);border:1px solid var(--border);border-left:2px solid var(--cyan);padding:12px 13px}
.swot-cell.s{border-left-color:var(--green)}.swot-cell.w{border-left-color:var(--rose)}
.swot-cell.o{border-left-color:var(--cyan)}.swot-cell.t{border-left-color:var(--amber)}
.swot-cell h5{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:0.1em;color:var(--text3);margin-bottom:7px}
.swot-cell ul{list-style:none;display:flex;flex-direction:column;gap:5px}
.swot-cell li{font-size:12px;color:var(--text2);line-height:1.45;padding-left:12px;position:relative}
.swot-cell li::before{content:'▪';position:absolute;left:0;color:var(--text3)}

/* timeline / roadmap */
.tl{list-style:none;position:relative;padding-left:20px}
.tl::before{content:'';position:absolute;left:5px;top:4px;bottom:4px;width:1px;background:var(--border2)}
.tl li{position:relative;padding:0 0 16px 6px}
.tl li:last-child{padding-bottom:0}
.tl li::before{content:'';position:absolute;left:-18px;top:4px;width:9px;height:9px;border-radius:50%;background:var(--bg);border:2px solid var(--text3)}
.tl li.done::before{border-color:var(--green);background:var(--green)}
.tl li.now::before{border-color:var(--cyan);background:var(--cyan);box-shadow:0 0 8px var(--cyan-glow)}
.tl li.next::before{border-color:var(--cyan)}
.tl-when{font-family:var(--mono);font-size:9px;color:var(--cyan);text-transform:uppercase;letter-spacing:0.08em}
.tl-what{font-size:13px;color:var(--text);margin-top:2px;line-height:1.5}
.tl-note{font-size:12px;color:var(--text3);margin-top:2px;line-height:1.5}

/* side facts */
.facts{list-style:none}
.facts li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--border);font-size:12.5px}
.facts li:last-child{border-bottom:none}
.facts .k{color:var(--text3);font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:0.06em}
.facts .v{color:var(--text);text-align:right}
.facts .v a{color:var(--cyan)}
.chips{display:flex;gap:5px;flex-wrap:wrap}
.chip{font-family:var(--mono);font-size:9px;color:var(--text2);border:1px solid var(--border2);background:var(--bg3);padding:3px 8px}
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;background:var(--chrome);color:var(--bg);font-family:var(--display);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:0.05em;border:none;cursor:pointer;transition:all 0.2s;clip-path:polygon(0 0,calc(100% - 5px) 0,100% 5px,100% 100%,5px 100%,0 calc(100% - 5px))}
.btn:hover{background:var(--cyan);box-shadow:0 0 18px var(--cyan-glow)}
.btn-ghost{background:0;border:1px solid var(--border2);color:var(--silver)}
.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan);background:var(--cyan-dim);box-shadow:none}
.back-link{font-family:var(--mono);font-size:11px;color:var(--text2);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:18px;display:inline-block}
.back-link:hover{color:var(--cyan)}
.empty{padding:60px 20px;text-align:center;font-family:var(--mono);font-size:12px;color:var(--text3);text-transform:uppercase;letter-spacing:0.1em}

/* login gate (internal) */
.gate{position:fixed;inset:0;z-index:500;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:20px}
.gate-card{width:100%;max-width:360px;background:var(--bg2);border:1px solid var(--border2);padding:30px 26px;text-align:center}
.gate-card h1{font-family:var(--display);font-size:22px;font-weight:700;text-transform:uppercase;color:var(--chrome);margin-bottom:6px}
.gate-card p{font-size:12px;color:var(--text3);margin-bottom:18px}
.gate-card input{width:100%;background:var(--bg3);border:1px solid var(--border2);color:var(--text);padding:11px 12px;font-size:14px;outline:none;margin-bottom:10px}
.gate-err{color:var(--rose);font-family:var(--mono);font-size:10px;min-height:14px;margin-bottom:8px}
footer.foot{border-top:1px solid var(--border);padding:26px 22px;text-align:center;font-family:var(--mono);font-size:10px;color:var(--text3);letter-spacing:0.04em}