:root {
  --bg: #0d0f11;
  --surface: #131619;
  --surface-2: #191d21;
  --text: #f3f0ea;
  --muted: #9d9a94;
  --line: rgba(255,255,255,.105);
  --line-strong: rgba(255,255,255,.18);
  --accent: #ff7b48;
  --accent-soft: rgba(255,123,72,.12);
  --header: rgba(13,15,17,.82);
  --shadow: 0 35px 90px rgba(0,0,0,.36);
  --shell: 1240px;
}
html[data-theme="light"] {
  --bg: #f3efe7;
  --surface: #faf8f3;
  --surface-2: #ebe5db;
  --text: #171819;
  --muted: #6f6b65;
  --line: rgba(23,24,25,.105);
  --line-strong: rgba(23,24,25,.18);
  --accent: #d94e1f;
  --accent-soft: rgba(217,78,31,.10);
  --header: rgba(243,239,231,.86);
  --shadow: 0 35px 90px rgba(58,44,31,.13);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.65 "Segoe UI", Inter, Arial, sans-serif; transition: background .25s,color .25s; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:-2; opacity:.18; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:48px 48px; mask-image:linear-gradient(to bottom,#000,transparent 68%); }
a { color: inherit; }
button { font: inherit; }
code { font-family: ui-monospace,SFMono-Regular,Menlo,monospace; color: var(--accent); }
.shell { width: min(calc(100% - 48px), var(--shell)); margin-inline:auto; }

.site-header { position:sticky; top:0; z-index:50; border-bottom:1px solid transparent; }
.site-header::before { content:""; position:absolute; inset:0; background:var(--header); backdrop-filter:blur(22px); border-bottom:1px solid var(--line); z-index:-1; }
.header-inner { height:82px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:28px; }
.logo { display:flex; align-items:center; gap:12px; text-decoration:none; }
.logo-mark { width:40px;height:40px;border:1px solid var(--line-strong);display:grid;place-items:center;font:700 13px "Segoe UI", Arial, sans-serif;letter-spacing:.06em;position:relative; }
.logo-mark::after { content:""; width:7px;height:7px;background:var(--accent);position:absolute;right:-4px;top:-4px; }
.logo-text { display:grid; line-height:1.1; }
.logo-text strong { font:600 14px "Segoe UI", Arial, sans-serif; }
.logo-text small { margin-top:5px;color:var(--muted);font-size:10px; }
.main-nav { display:flex;justify-content:center;gap:4px; }
.nav-link { text-decoration:none;color:var(--muted);font-size:13px;font-weight:600;padding:9px 11px;transition:.2s; }
.nav-link:hover,.nav-link.active { color:var(--text); }
.nav-link.active::after { content:"";display:block;height:2px;background:var(--accent);margin-top:4px; }
.theme-toggle { width:40px;height:40px;border:1px solid var(--line);background:transparent;color:var(--text);cursor:pointer;position:relative; }
.theme-icon::before { content:"◐";font-size:18px; }
html[data-theme="light"] .theme-icon::before { content:"☀";font-size:15px; }
.nav-toggle { display:none; }

.hero { min-height:calc(100vh - 82px); display:grid;grid-template-columns:1.2fr .8fr;gap:80px;align-items:center;padding:90px 0 100px; }
.hero-index,.section-no { font:600 11px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted);letter-spacing:.08em; }
.hero-kicker,.eyebrow { margin:22px 0 10px;color:var(--accent);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.16em; }
.hero h1,.project-hero h1 { margin:0;font:700 clamp(4.4rem,10vw,9.6rem)/.78 "Segoe UI", Arial, sans-serif;letter-spacing:-.075em;text-transform:uppercase; }
.hero h1 span { color:transparent;-webkit-text-stroke:1px var(--text);opacity:.5; }
.hero-statement { max-width:760px;margin:42px 0 0;font:600 clamp(1.4rem,2.4vw,2rem)/1.24 "Segoe UI", Arial, sans-serif;letter-spacing:-.03em; }
.hero-subline { max-width:720px;color:var(--muted);font-size:16px;margin:18px 0 0; }
.hero-actions { display:flex;gap:12px;flex-wrap:wrap;margin-top:30px; }
.button { min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:0 17px;border:1px solid var(--line);text-decoration:none;font-weight:700;font-size:13px;transition:.2s; }
.button:hover { transform:translateY(-2px);border-color:var(--line-strong); }
.button-primary { background:var(--accent);border-color:var(--accent);color:#fff; }
.button-quiet { background:var(--surface); }
.hero-chips { display:flex;flex-wrap:wrap;gap:8px;margin-top:24px; }
.hero-chips span,.case-tags span { padding:7px 10px;border:1px solid var(--line);font-size:10px;color:var(--muted);background:var(--surface); }
.portrait-wrap { position:relative;max-width:420px;justify-self:end; }
.portrait-grid { position:absolute;inset:-28px -28px 48px 38px;border:1px solid var(--line);background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:24px 24px; }
.portrait-frame { position:relative;aspect-ratio:148/195;overflow:hidden;background:#ddd;box-shadow:var(--shadow); }
.portrait-frame::before { content:"";position:absolute;left:0;top:0;width:72px;height:7px;background:var(--accent);z-index:2; }
.portrait-frame img { width:100%;height:100%;object-fit:cover;display:block; }
.portrait-caption { position:relative;display:flex;justify-content:space-between;gap:12px;margin-top:14px;font:600 10px ui-monospace,monospace;color:var(--muted);text-transform:uppercase; }

.section { display:grid;grid-template-columns:180px 1fr;gap:48px;padding:118px 0;border-top:1px solid var(--line); }
.section-side { display:flex;flex-direction:column;gap:8px;padding-top:8px; }
.section-label { color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.15em;writing-mode:vertical-rl;transform:rotate(180deg);margin-top:10px; }
.section-main h2 { max-width:910px;margin:0;font:600 clamp(2.5rem,5vw,5rem)/.98 "Segoe UI", Arial, sans-serif;letter-spacing:-.055em; }
.section-intro { max-width:760px;color:var(--muted);font-size:17px;margin:25px 0 0; }
.about-copy { max-width:900px;margin-top:38px;display:grid;grid-template-columns:1fr 1fr;gap:28px 44px; }
.about-copy p { margin:0;color:var(--muted);font-size:16px; }
.about-copy p:first-child { color:var(--text);font-size:19px; }
.principles { display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:54px; }
.principle { background:var(--bg);padding:28px;min-height:250px; }
.principle > span { color:var(--accent);font:600 11px ui-monospace,monospace; }
.principle h3 { margin:70px 0 9px;font:600 20px "Segoe UI", Arial, sans-serif; }
.principle p { margin:0;color:var(--muted);font-size:13px; }

.timeline { margin-top:58px;border-top:1px solid var(--line); }
.timeline-item { display:grid;grid-template-columns:210px 1fr;gap:32px;padding:30px 0;border-bottom:1px solid var(--line); }
.timeline-date { color:var(--accent);font:600 11px ui-monospace,monospace;padding-top:4px; }
.timeline-item h3 { margin:0;font:600 22px "Segoe UI", Arial, sans-serif;letter-spacing:-.02em; }
.timeline-org { margin:4px 0 12px!important;color:var(--text)!important;font-weight:600; }
.timeline-item p { max-width:800px;margin:0;color:var(--muted);font-size:14px; }

.skill-groups { margin-top:56px;border-top:1px solid var(--line); }
.skill-group { display:grid;grid-template-columns:280px 1fr;gap:28px;padding:26px 0;border-bottom:1px solid var(--line); }
.skill-head { display:grid; }
.skill-head span { font:600 17px "Segoe UI", Arial, sans-serif; }
.skill-head small { color:var(--muted);margin-top:5px; }
.skill-items { display:flex;flex-wrap:wrap;gap:8px; }
.skill-items span { border:1px solid var(--line);padding:8px 11px;color:var(--muted);font-size:12px; }
.heading-row { display:flex;justify-content:space-between;gap:30px;align-items:flex-end; }
.text-link { color:var(--accent);font-weight:700;font-size:13px;text-decoration:none;white-space:nowrap; }
.selected-projects { display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:50px; }
.selected-project { min-height:330px;border:1px solid var(--line);padding:26px;text-decoration:none;display:flex;flex-direction:column;background:var(--surface);position:relative;transition:.22s; }
.selected-project:hover { transform:translateY(-5px);border-color:var(--line-strong); }
.project-card-top { display:flex;justify-content:space-between;gap:12px;color:var(--muted);font:600 10px ui-monospace,monospace;text-transform:uppercase; }
.selected-project h3 { margin:auto 0 12px;font:600 31px "Segoe UI", Arial, sans-serif;letter-spacing:-.04em; }
.selected-project p { margin:0 0 32px;color:var(--muted);font-size:13px; }
.project-arrow { position:absolute;right:24px;bottom:20px;color:var(--accent);font-size:20px; }
.contact-section { padding-bottom:145px; }
.contact-row { display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:44px;padding-top:24px;border-top:1px solid var(--line); }
.contact-mail { font:600 clamp(1.1rem,2vw,1.5rem) "Segoe UI", Arial, sans-serif;text-decoration:none;color:var(--accent); }
.site-footer { min-height:110px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:20px;color:var(--muted);font-size:11px; }
.site-footer strong { color:var(--text); }
.footer-links { display:flex;gap:20px; }
.footer-links a { text-decoration:none; }

.project-hero { display:grid;grid-template-columns:1.1fr .9fr;gap:70px;padding:100px 0 90px;align-items:end;border-bottom:1px solid var(--line); }
.project-hero h1 { font-size:clamp(4.4rem,10vw,9rem); }
.project-hero-copy { max-width:650px;color:var(--muted);font-size:17px; }
.project-hero-copy strong { color:var(--text); }
.project-hero-copy .muted { font-size:13px;margin-top:20px; }
.project-layout { display:grid;grid-template-columns:260px 1fr;gap:52px;padding-top:70px;padding-bottom:130px; }
.project-sidebar { position:relative; }
.project-nav { position:sticky;top:112px;display:grid;gap:30px; }
.project-nav-group { display:grid;gap:7px; }
.project-nav-title { color:var(--muted);font:700 10px ui-monospace,monospace;text-transform:uppercase;letter-spacing:.11em;margin-bottom:5px; }
.project-nav a { border-left:1px solid var(--line);padding:5px 0 5px 14px;color:var(--muted);text-decoration:none;font-size:12px;transition:.2s; }
.project-nav a:hover,.project-nav a.active { color:var(--text);border-left-color:var(--accent); }
.project-menu-toggle { display:none; }
.project-content { min-width:0; }
.project-category + .project-category { margin-top:110px; }
.project-category-head { display:grid;grid-template-columns:60px 1fr;gap:20px;padding-bottom:24px;border-bottom:1px solid var(--line);margin-bottom:24px; }
.project-category-head > span { color:var(--accent);font:600 11px ui-monospace,monospace;padding-top:5px; }
.project-category-head p { margin:0;font:600 27px "Segoe UI", Arial, sans-serif;letter-spacing:-.035em; }
.project-category-head small { display:block;color:var(--muted);max-width:700px;margin-top:5px; }
.case-study { scroll-margin-top:110px;border-bottom:1px solid var(--line);padding:46px 0 72px; }
.case-meta { display:flex;gap:8px;flex-wrap:wrap; }
.case-meta span { border:1px solid var(--line);padding:6px 8px;color:var(--muted);font:600 9px ui-monospace,monospace;text-transform:uppercase;letter-spacing:.06em; }
.case-title-row { display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-top:26px; }
.case-title-row h2 { margin:0;font:600 clamp(2.8rem,6vw,5.8rem)/.9 "Segoe UI", Arial, sans-serif;letter-spacing:-.06em; }
.case-number { color:var(--line-strong);font:600 clamp(2.8rem,5vw,5rem)/1 "Segoe UI", Arial, sans-serif; }
.case-summary { max-width:760px;margin:22px 0 0;font:500 20px/1.45 "Segoe UI", Arial, sans-serif; }
.case-columns { display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-top:48px; }
.case-columns h3,.case-bottom h3 { margin:0 0 10px;color:var(--accent);font-size:10px;text-transform:uppercase;letter-spacing:.14em; }
.case-columns p { margin:0;color:var(--muted);font-size:14px; }
.case-bottom { display:grid;grid-template-columns:1.25fr .75fr;gap:34px;margin-top:38px;padding-top:30px;border-top:1px solid var(--line); }
.case-bottom ul { list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:7px 22px; }
.case-bottom li { position:relative;padding-left:15px;color:var(--muted);font-size:12px; }
.case-bottom li::before { content:"+";position:absolute;left:0;color:var(--accent); }
.case-tags { display:flex;flex-wrap:wrap;gap:6px; }

.reveal { opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease; }
.reveal.visible { opacity:1;transform:none; }

@media(max-width:980px){
  .header-inner { grid-template-columns:auto auto auto; }
  .logo-text { display:none; }
  .nav-toggle { display:grid;place-content:center;gap:5px;width:40px;height:40px;border:1px solid var(--line);background:transparent;margin-left:auto; }
  .nav-toggle span { width:17px;height:1px;background:var(--text);display:block; }
  .main-nav { display:none;position:absolute;top:82px;left:24px;right:24px;background:var(--surface);border:1px solid var(--line);padding:10px;flex-direction:column; }
  .main-nav.open { display:flex; }
  .hero { grid-template-columns:1fr .55fr;gap:34px; }
  .section { grid-template-columns:90px 1fr;gap:24px; }
  .principles,.selected-projects { grid-template-columns:1fr; }
  .principle { min-height:auto; }
  .principle h3 { margin-top:35px; }
  .project-layout { grid-template-columns:210px 1fr;gap:30px; }
}
@media(max-width:720px){
  .shell { width:min(calc(100% - 28px),var(--shell)); }
  .hero { grid-template-columns:1fr;padding-top:62px;gap:60px; }
  .hero h1 { font-size:clamp(4rem,21vw,6.3rem); }
  .portrait-wrap { justify-self:stretch;max-width:330px;margin-left:auto; }
  .section { grid-template-columns:1fr;padding:80px 0; }
  .section-side { flex-direction:row;align-items:center; }
  .section-label { writing-mode:horizontal-tb;transform:none;margin:0; }
  .about-copy { grid-template-columns:1fr; }
  .timeline-item,.skill-group { grid-template-columns:1fr;gap:12px; }
  .heading-row,.contact-row { align-items:flex-start;flex-direction:column; }
  .selected-project { min-height:260px; }
  .project-hero { grid-template-columns:1fr;padding:72px 0 65px;gap:40px; }
  .project-hero h1 { font-size:clamp(4rem,20vw,6rem); }
  .project-layout { display:block;padding-top:24px; }
  .project-sidebar { position:sticky;top:82px;z-index:30;background:var(--bg);padding:12px 0;border-bottom:1px solid var(--line); }
  .project-menu-toggle { display:flex;width:100%;justify-content:space-between;border:1px solid var(--line);background:var(--surface);color:var(--text);padding:12px 14px;font-weight:700; }
  .project-nav { display:none;position:absolute;top:64px;left:0;right:0;background:var(--surface);border:1px solid var(--line);padding:18px;max-height:65vh;overflow:auto; }
  .project-nav.open { display:grid; }
  .project-content { padding-top:38px; }
  .case-columns,.case-bottom { grid-template-columns:1fr; }
  .case-bottom ul { grid-template-columns:1fr; }
  .case-title-row h2 { font-size:clamp(2.8rem,15vw,4.3rem); }
  .site-footer { padding:30px 0;align-items:flex-start;flex-direction:column; }
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}.reveal{opacity:1;transform:none}}


/* v3: richer, more legible project portfolio */
.selected-projects{grid-template-columns:repeat(2,1fr)}
.selected-project{padding:0;min-height:420px;overflow:hidden;background:var(--surface)}
.selected-project-image{height:190px;overflow:hidden;border-bottom:1px solid var(--line);background:#0e1114}
.selected-project-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.selected-project:hover .selected-project-image img{transform:scale(1.025)}
.selected-project-body{padding:24px;display:flex;flex-direction:column;flex:1;position:relative}
.selected-project h3{margin:42px 0 12px}

.project-overview{padding:58px 0 22px;border-bottom:1px solid var(--line)}
.overview-head{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:end}
.overview-head h2{margin:0;max-width:760px;font:600 clamp(2.2rem,4vw,4rem)/1 "Segoe UI",Arial,sans-serif;letter-spacing:-.05em}
.overview-status{display:flex;flex-wrap:wrap;gap:9px;justify-content:flex-end}
.overview-status>span{display:flex;gap:8px;align-items:center;border:1px solid var(--line);padding:8px 10px;font-size:11px;color:var(--muted);background:var(--surface)}
.status-dot{display:inline-block;width:8px;height:8px;border-radius:99px;background:var(--muted);flex:none}
.status-dot.real,.case-state.real{--state:#62d68b}.status-dot.practice,.case-state.practice{--state:#6aa8ff}.status-dot.concept,.case-state.concept{--state:#ff7b48}.status-dot.study,.case-state.study{--state:#a985ff}
.status-dot.real,.status-dot.practice,.status-dot.concept,.status-dot.study{background:var(--state)}
.overview-categories{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:34px}
.overview-category{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:start;border:1px solid var(--line);padding:22px;text-decoration:none;background:var(--surface);transition:.22s}
.overview-category:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.overview-category>span{color:var(--accent);font:600 10px ui-monospace,monospace}.overview-category strong{display:block;font-size:17px}.overview-category small{display:block;color:var(--muted);font-size:12px;line-height:1.5;margin-top:6px}.overview-category b{font:600 28px "Segoe UI",Arial;color:var(--line-strong)}
.project-nav-title{font-weight:800!important;color:var(--text)!important;border-left:0!important;padding-left:0!important;text-transform:uppercase;letter-spacing:.08em;font-size:10px!important}
.project-nav-group>a:not(.project-nav-title){display:flex;align-items:center;justify-content:space-between;gap:8px}
.case-study{padding-top:56px;padding-bottom:96px}
.case-state{color:var(--state)!important;border-color:color-mix(in srgb,var(--state) 45%,transparent)!important;background:color-mix(in srgb,var(--state) 10%,transparent)!important}
.case-summary{font-size:22px;max-width:900px}
.case-visual{margin:42px 0 0;border:1px solid var(--line);background:#0d1013;position:relative;overflow:hidden}
.case-visual img{display:block;width:100%;aspect-ratio:16/8.6;object-fit:cover}
.case-visual figcaption{position:absolute;left:14px;bottom:14px;margin:0;padding:7px 10px;background:rgba(10,12,14,.78);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.12);color:#ddd;font:600 10px ui-monospace,monospace;text-transform:uppercase;letter-spacing:.07em}
.case-columns{margin-top:42px}
.case-columns>div,.case-business{padding:24px;border:1px solid var(--line);background:var(--surface)}
.case-business{display:grid;grid-template-columns:210px 1fr;gap:30px;margin-top:14px}
.case-business>span{color:var(--accent);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.14em}.case-business p{margin:0;color:var(--muted);font-size:14px}
.case-bottom{margin-top:14px;padding:26px;border:1px solid var(--line);background:var(--surface);}
.project-category-head{scroll-margin-top:110px}
@media(max-width:980px){.overview-head{grid-template-columns:1fr}.overview-status{justify-content:flex-start}.overview-categories{grid-template-columns:1fr}.selected-projects{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.selected-projects{grid-template-columns:1fr}.selected-project{min-height:auto}.selected-project-image{height:175px}.case-visual img{aspect-ratio:16/10;}.case-business{grid-template-columns:1fr;gap:8px}.overview-categories{grid-template-columns:1fr}}


/* v4 — project navigation, realistic visuals, extended portfolio */
.project-category-dock{
  position:sticky;
  top:82px;
  z-index:34;
  border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(18px);
}
.project-category-bar{
  min-height:58px;
  display:flex;
  align-items:center;
  gap:6px;
  overflow-x:auto;
  scrollbar-width:none;
}
.project-category-bar::-webkit-scrollbar{display:none}
.project-category-bar a{
  display:flex;
  align-items:center;
  gap:8px;
  flex:none;
  padding:9px 12px;
  border:1px solid transparent;
  text-decoration:none;
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
  transition:.2s ease;
}
.project-category-bar a span{color:var(--accent);font:700 9px ui-monospace,monospace}
.project-category-bar a b{
  display:grid;place-items:center;
  min-width:21px;height:21px;padding:0 6px;
  border-radius:99px;background:var(--surface);
  color:var(--muted);font-size:9px;
}
.project-category-bar a:hover,.project-category-bar a.active{
  color:var(--text);
  border-color:var(--line);
  background:var(--surface);
}

.project-layout{grid-template-columns:300px minmax(0,1fr);gap:56px;padding-top:54px}
.project-nav{top:158px;max-height:calc(100vh - 182px);overflow:auto;padding:3px;scrollbar-width:thin}
.project-nav-card{
  border:1px solid var(--line);
  background:color-mix(in srgb,var(--surface) 94%,transparent);
  box-shadow:0 18px 65px rgba(0,0,0,.16);
}
.project-nav-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 17px;border-bottom:1px solid var(--line);
}
.project-nav-head span{font:800 10px ui-monospace,monospace;text-transform:uppercase;letter-spacing:.14em;color:var(--accent)}
.project-nav-head small{font-size:10px;color:var(--muted)}
.project-nav-group{gap:0;padding:13px 12px;border-bottom:1px solid var(--line)}
.project-nav-group:last-child{border-bottom:0}
.project-nav-title{
  display:flex!important;align-items:center;justify-content:space-between;
  gap:10px;padding:7px 8px!important;margin:0 0 4px!important;
  color:var(--text)!important;
  border:0!important;
  border-radius:8px;
}
.project-nav-title span{line-height:1.25}
.project-nav-title b{font:700 9px ui-monospace,monospace;color:var(--muted)}
.project-nav-title.active-category{background:var(--accent-soft)}
.project-nav-group>a:not(.project-nav-title){
  border-left:1px solid var(--line);
  padding:6px 8px 6px 12px;
  margin-left:8px;
  border-radius:0 7px 7px 0;
  line-height:1.35;
}
.project-nav-group>a:not(.project-nav-title):hover,
.project-nav-group>a:not(.project-nav-title).active{
  background:var(--accent-soft);
  border-left-color:var(--accent);
}

.overview-categories{grid-template-columns:repeat(4,1fr)}
.overview-category{min-height:148px}
.project-category{scroll-margin-top:155px}
.project-category-head{scroll-margin-top:155px}
.case-study{scroll-margin-top:155px}
.case-title-row h2{max-width:900px}
.case-summary{line-height:1.55}

.case-visual{
  border-radius:18px;
  box-shadow:0 26px 75px rgba(0,0,0,.17);
}
.case-visual img{
  aspect-ratio:16/8.8;
  object-position:center;
}
.case-visual figcaption{
  border-radius:9px;
  max-width:calc(100% - 28px);
}
.detection-visual{background:#080b0f}
.detect-stage{position:relative;aspect-ratio:16/8.8;overflow:hidden}
.detect-stage>img{width:100%;height:100%;object-fit:cover;display:block}
.detect-stage::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(3,8,14,.08),rgba(3,8,14,.24));
  pointer-events:none;
}
.detect-box{
  position:absolute;
  border:3px solid #64f0a0;
  box-shadow:0 0 0 1px rgba(0,0,0,.45),0 0 22px rgba(100,240,160,.16);
  z-index:2;
}
.detect-box span{
  position:absolute;left:-3px;top:-28px;
  padding:4px 7px;
  background:#38c979;
  color:#07130b;
  font:800 10px ui-monospace,monospace;
  white-space:nowrap;
}
.detect-hud{
  position:absolute;z-index:3;left:18px;right:18px;top:16px;
  display:flex;justify-content:space-between;gap:10px;
  color:#c8ffe0;
  font:800 10px ui-monospace,monospace;
  text-shadow:0 2px 8px rgba(0,0,0,.7);
}
.detect-scanline{
  position:absolute;z-index:2;left:0;right:0;top:46%;
  height:1px;background:rgba(87,255,160,.6);
  box-shadow:0 0 14px rgba(87,255,160,.6);
}
.detect-scanline::after{
  content:"";
  position:absolute;left:0;top:-80px;width:100%;height:80px;
  background:linear-gradient(180deg,transparent,rgba(87,255,160,.045));
}

.public-sector{
  scroll-margin-top:155px;
  margin-top:120px;
  padding:70px 0 10px;
  border-top:1px solid var(--line);
}
.public-sector-head{
  display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:end;
  margin-bottom:36px;
}
.public-sector-head h2{
  margin:0;
  font:600 clamp(2.4rem,5vw,4.8rem)/.98 "Segoe UI",Arial,sans-serif;
  letter-spacing:-.055em;
  max-width:820px;
}
.public-sector-head>p{margin:0;color:var(--muted);font-size:14px;max-width:620px}
.public-sector-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:12px;
}
.idea-card{
  min-height:245px;
  padding:26px;
  border:1px solid var(--line);
  background:var(--surface);
  position:relative;
}
.idea-no{color:var(--accent);font:700 10px ui-monospace,monospace}
.idea-card h3{
  margin:34px 0 10px;
  font:650 22px/1.15 "Segoe UI",Arial,sans-serif;
  letter-spacing:-.025em;
}
.idea-card p{margin:0;color:var(--muted);font-size:13px}
.idea-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:22px}
.idea-tags span{
  padding:6px 8px;border:1px solid var(--line);
  color:var(--muted);font:700 9px ui-monospace,monospace;
  text-transform:uppercase;letter-spacing:.05em;
}

@media(max-width:1180px){
  .project-layout{grid-template-columns:245px minmax(0,1fr);gap:34px}
  .overview-categories{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:980px){
  .project-layout{grid-template-columns:210px minmax(0,1fr);gap:28px}
  .public-sector-head{grid-template-columns:1fr}
}
@media(max-width:720px){
  .project-category-dock{top:74px}
  .project-category-bar{width:100%;padding-left:14px;padding-right:14px}
  .project-category-bar a{padding:8px 10px}
  .project-layout{display:block;padding-top:16px}
  .project-sidebar{
    top:132px;
    padding:10px 0;
    background:color-mix(in srgb,var(--bg) 94%,transparent);
    backdrop-filter:blur(15px);
  }
  .project-nav{top:58px;max-height:67vh;padding:0}
  .project-nav-card{box-shadow:0 25px 70px rgba(0,0,0,.35)}
  .project-content{padding-top:28px}
  .overview-categories{grid-template-columns:1fr}
  .public-sector{margin-top:80px;padding-top:55px}
  .public-sector-grid{grid-template-columns:1fr}
  .detect-box span{font-size:7px;top:-22px;padding:3px 5px}
  .detect-hud{font-size:7px;left:9px;right:9px;top:9px}
}

/* v5 — right-side navigator, clearer categories, realistic project demos */
.project-layout{grid-template-columns:minmax(0,1fr) 310px;gap:58px;align-items:start;padding-top:54px}
.project-content{grid-column:1;grid-row:1}
.project-sidebar{grid-column:2;grid-row:1;position:relative}
.project-nav{position:sticky;top:104px;max-height:calc(100vh - 128px);overflow:auto;padding:3px;scrollbar-width:thin}
.project-nav-card{border-radius:18px;overflow:hidden;background:color-mix(in srgb,var(--surface) 96%,transparent);box-shadow:0 20px 70px rgba(0,0,0,.19)}
.project-nav-head{padding:17px 18px;background:linear-gradient(135deg,var(--surface),color-mix(in srgb,var(--accent) 7%,var(--surface)))}
.project-nav-group{display:block;padding:0;border-bottom:1px solid var(--line)}
.project-nav-group summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 15px;color:var(--text);font-size:11px;font-weight:800;transition:.2s}
.project-nav-group summary::-webkit-details-marker{display:none}
.project-nav-group summary span{display:flex;align-items:center;gap:9px;line-height:1.25}
.project-nav-group summary i{font-style:normal;font:800 9px ui-monospace,monospace;opacity:.75}
.project-nav-group summary b{display:grid;place-items:center;min-width:25px;height:25px;padding:0 7px;border-radius:99px;background:rgba(255,255,255,.06);font:800 9px ui-monospace,monospace}
.project-nav-group summary::after{content:'⌄';font-size:15px;opacity:.55;margin-left:auto}
.project-nav-group[open] summary::after{content:'⌃'}
.project-nav-group summary.active-category{background:color-mix(in srgb,var(--cat) 14%,transparent);color:var(--cat)}
.project-submenu{padding:5px 10px 12px}
.project-submenu a{display:block!important;margin:2px 0!important;padding:8px 10px!important;border-left:2px solid transparent!important;border-radius:8px!important;color:var(--muted)!important;font-size:11px!important;line-height:1.3!important}
.project-submenu a:hover,.project-submenu a.active{background:color-mix(in srgb,var(--cat) 10%,transparent)!important;border-left-color:var(--cat)!important;color:var(--text)!important}

.cat-software{--cat:#aa83ff}.cat-ai{--cat:#59d2ee}.cat-operations{--cat:#f2b45f}.cat-public{--cat:#66d39b}.cat-infrastructure{--cat:#6ea8ff}
.overview-categories{grid-template-columns:repeat(5,1fr)}
.overview-category{border-top:3px solid var(--cat);min-height:160px}
.overview-category>span{color:var(--cat)}
.project-category-head{border-top:3px solid var(--cat);padding-top:21px}
.project-category-head>span{color:var(--cat)}
.case-study .case-state{--state:var(--cat)}

.case-visual figcaption{position:static;max-width:none;border-radius:0;display:flex;align-items:center;justify-content:space-between;gap:16px;background:rgba(10,12,14,.94);padding:11px 14px;color:#dbe3ea}
.case-visual figcaption span{margin-left:auto;color:#93a2b4;text-transform:none;letter-spacing:0;font-weight:500}
.case-visual figcaption a{color:#bcd7ff;text-decoration:none}
.detect-stage{aspect-ratio:16/9;background:#05070a}
.detection-visual.fit-contain .detect-stage>img{object-fit:contain;background:#05070a}
.detection-visual.fit-contain .detect-stage::after{background:linear-gradient(180deg,rgba(3,8,14,.03),rgba(3,8,14,.08))}

/* Interactive A4 manufacturing board */
.orderboard-visual{background:#0c1118}
.orderboard-top{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:18px 20px;border-bottom:1px solid #2f3b4a;background:#121a24;color:#eef3f8}
.orderboard-top>div:first-child{display:grid;gap:3px}.orderboard-top strong{font:800 11px ui-monospace,monospace;letter-spacing:.12em}.orderboard-top span{font-size:11px;color:#95a4b7}
.traffic-legend{display:flex;gap:6px}.traffic-legend span{padding:6px 8px;border:1px solid #344151;border-radius:99px;font:700 9px ui-monospace,monospace}.traffic-legend .green{color:#6ed69c}.traffic-legend .yellow{color:#f2bd62}.traffic-legend .red{color:#ff8170}
.orderboard-stage{display:grid;grid-template-columns:minmax(0,1fr) 285px;gap:18px;padding:22px;min-height:560px;background:radial-gradient(circle at 10% 0%,rgba(87,137,180,.08),transparent 35%),#0c1118}
.orderboard-docs{display:grid;grid-template-columns:repeat(3,minmax(150px,1fr));gap:16px;align-content:start}
.work-order{aspect-ratio:210/297;background:#f5f2e9;color:#182028;border:0;border-top:8px solid #61d28f;border-radius:3px;padding:17px 15px;box-shadow:0 14px 32px rgba(0,0,0,.25);text-align:left;cursor:pointer;transition:transform .2s,box-shadow .2s;position:relative}
.work-order.yellow{border-top-color:#efb651}.work-order.red{border-top-color:#f06d5b}.work-order:hover,.work-order.active{transform:translateY(-5px);box-shadow:0 20px 42px rgba(0,0,0,.38)}.work-order.active{outline:3px solid color-mix(in srgb,var(--accent) 65%,white)}
.work-order-head{display:flex;justify-content:space-between;gap:8px;font:800 7px ui-monospace,monospace;color:#66717b;border-bottom:1px solid #c8c8c0;padding-bottom:9px}.work-order-head b{color:#1d2730}.work-order-title{font-size:14px;font-weight:800;line-height:1.15;margin-top:18px}.work-order-lines{display:grid;gap:9px;margin-top:24px}.work-order-lines span{height:5px;background:#d7d7cf;border-radius:3px}.work-order-lines span:nth-child(2){width:82%}.work-order-lines span:nth-child(3){width:65%}.work-order-meta{position:absolute;left:15px;right:15px;bottom:16px;border-top:1px solid #c8c8c0;padding-top:11px;display:flex;justify-content:space-between;gap:8px;font-size:9px}.work-order-meta strong{font-size:11px}
.order-detail{border:1px solid #354354;border-radius:15px;background:#151e29;padding:20px;color:#eaf0f5;align-self:start;position:sticky;top:12px}.detail-kicker{font:800 9px ui-monospace,monospace;letter-spacing:.12em;color:#7fd5eb}.order-detail h4{font-size:30px;margin:18px 0 4px}.order-detail>strong{font-size:14px;color:#b8c5d3}.order-detail dl{margin:24px 0;display:grid;gap:0}.order-detail dl div{padding:11px 0;border-top:1px solid #2d3947}.order-detail dt{font-size:9px;text-transform:uppercase;color:#8192a5;font-weight:800}.order-detail dd{margin:4px 0 0;font-size:12px}.order-detail button{width:100%;border:1px solid #415266;background:#1c2937;color:#eaf0f5;padding:11px;border-radius:9px;font-weight:800}

/* Skill toolkit denser but readable */
.skill-groups{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.skill-group{display:block;padding:22px;border:1px solid var(--line);background:var(--surface)}
.skill-head{display:grid;gap:4px;margin-bottom:16px}.skill-head span{font-size:16px}.skill-head small{font-size:10px}
.skill-items{justify-content:flex-start}.skill-items span{font-size:10px;padding:6px 8px}
.hero-chips{max-width:780px}

@media(max-width:1260px){.project-layout{grid-template-columns:minmax(0,1fr) 270px;gap:34px}.overview-categories{grid-template-columns:repeat(3,1fr)}}
@media(max-width:980px){.project-layout{grid-template-columns:minmax(0,1fr) 230px;gap:24px}.overview-categories{grid-template-columns:repeat(2,1fr)}.orderboard-stage{grid-template-columns:1fr}.order-detail{position:static}.orderboard-docs{grid-template-columns:repeat(3,1fr)}.skill-groups{grid-template-columns:1fr}}
@media(max-width:720px){.project-layout{display:block;padding-top:16px}.project-sidebar{position:sticky;top:74px;z-index:40;background:color-mix(in srgb,var(--bg) 94%,transparent);padding:10px 0;border-bottom:1px solid var(--line)}.project-nav{position:absolute;top:58px;left:0;right:0;max-height:70vh;display:none;padding:0}.project-nav.open{display:block}.project-menu-toggle{display:flex}.overview-categories{grid-template-columns:1fr}.orderboard-docs{grid-template-columns:repeat(2,1fr)}.orderboard-top{align-items:flex-start;flex-direction:column}.case-visual figcaption{align-items:flex-start;flex-direction:column}.case-visual figcaption span{margin-left:0}.detect-stage{aspect-ratio:4/3}}

/* v6 — left navigator, no internal scrolling, iPad/mobile adaptation */
.project-layout{
  grid-template-columns:280px minmax(0,1fr)!important;
  gap:46px!important;
  align-items:start!important;
}
.project-sidebar{grid-column:1!important;grid-row:1!important;position:relative!important;min-width:0}
.project-content{grid-column:2!important;grid-row:1!important;min-width:0}
.project-nav{
  position:sticky!important;
  top:96px!important;
  max-height:none!important;
  overflow:visible!important;
  padding:0!important;
  display:block!important;
}
.project-nav-card{
  overflow:visible!important;
  border:1px solid var(--line);
  box-shadow:0 18px 60px rgba(0,0,0,.16)!important;
}
.project-nav-head{display:grid!important;grid-template-columns:1fr auto auto;align-items:center;gap:8px;padding:13px 12px!important}
.project-nav-head>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.project-nav-collapse{
  width:30px;height:30px;border-radius:9px;border:1px solid var(--line);background:var(--surface-2,rgba(255,255,255,.035));
  color:var(--text);font-size:18px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:.2s
}
.project-nav-collapse:hover{border-color:var(--accent);color:var(--accent)}
.project-nav-group{--cat:var(--accent);overflow:visible}
.project-nav-group summary{min-height:38px;padding:9px 11px!important;border-left:3px solid var(--cat);background:color-mix(in srgb,var(--cat) 4%,transparent)}
.project-nav-group summary:hover{background:color-mix(in srgb,var(--cat) 9%,transparent)}
.project-nav-group summary.active-category{background:color-mix(in srgb,var(--cat) 15%,transparent)!important;color:var(--cat)!important}
.project-nav-group summary span{min-width:0}
.project-nav-group summary span em{font-style:normal;white-space:normal;line-height:1.15}
.project-nav-group summary span i{min-width:22px;color:var(--cat)}
.project-nav-group summary b{min-width:22px;height:22px;padding:0 6px!important}
.project-nav-group summary::after{font-size:12px!important}
.project-submenu{padding:4px 8px 8px!important;background:color-mix(in srgb,var(--cat) 2%,transparent)}
.project-submenu a{padding:6px 8px!important;margin:1px 0!important;font-size:10px!important;line-height:1.2!important;min-height:28px;display:flex!important;align-items:center!important}
.project-submenu a.active{background:color-mix(in srgb,var(--cat) 13%,transparent)!important;color:var(--text)!important}

.project-layout.nav-collapsed{grid-template-columns:68px minmax(0,1fr)!important;gap:30px!important}
.project-layout.nav-collapsed .project-nav-card{width:62px;border-radius:15px!important}
.project-layout.nav-collapsed .project-nav-head{grid-template-columns:1fr;padding:9px!important}
.project-layout.nav-collapsed .project-nav-head>span,
.project-layout.nav-collapsed .project-nav-head>small{display:none}
.project-layout.nav-collapsed .project-nav-collapse{width:42px;height:36px;margin:auto}
.project-layout.nav-collapsed .project-nav-group summary{padding:8px!important;justify-content:center!important;border-left-width:4px}
.project-layout.nav-collapsed .project-nav-group summary span{display:grid!important;place-items:center!important}
.project-layout.nav-collapsed .project-nav-group summary span em,
.project-layout.nav-collapsed .project-nav-group summary b,
.project-layout.nav-collapsed .project-nav-group summary::after,
.project-layout.nav-collapsed .project-submenu{display:none!important}
.project-layout.nav-collapsed .project-nav-group summary span i{font-size:10px!important;min-width:34px;height:30px;display:grid;place-items:center;border-radius:8px;background:color-mix(in srgb,var(--cat) 12%,transparent)}

.project-nav-backdrop{display:none;border:0;padding:0;background:rgba(2,5,9,.68);backdrop-filter:blur(4px)}
.project-menu-toggle{z-index:92}

/* Bounding boxes are category-coloured and remain readable on photographs. */
.detect-box{--box:#61e7ff;border-color:var(--box)!important;box-shadow:0 0 0 1px rgba(0,0,0,.45),0 0 18px color-mix(in srgb,var(--box) 34%,transparent)!important}
.detect-box span{background:var(--box)!important;color:#061014!important;border:0!important;font-weight:900!important;text-shadow:none!important;white-space:nowrap}
.detect-box.tone-1{--box:#51e59a}.detect-box.tone-2{--box:#5ec8ff}.detect-box.tone-3{--box:#ffbc55}.detect-box.tone-4{--box:#ff7285}
.detect-hud{background:rgba(4,10,16,.78)!important;border:1px solid rgba(255,255,255,.16);border-radius:8px;padding:5px 7px!important;backdrop-filter:blur(6px)}

/* iPad/tablet: real touch targets and a compact left rail when portrait mode is detected. */
@media (min-width:761px) and (max-width:1100px){
  .project-layout{grid-template-columns:220px minmax(0,1fr)!important;gap:24px!important}
  .project-nav{top:88px!important}
  .project-nav-group summary{min-height:44px!important}
  .project-submenu a{min-height:34px!important;font-size:10px!important}
  .device-touch .project-nav-group summary,.device-ipad .project-nav-group summary{min-height:46px!important}
  .device-touch .project-submenu a,.device-ipad .project-submenu a{min-height:38px!important}
  .project-layout.nav-collapsed{grid-template-columns:68px minmax(0,1fr)!important}
  .overview-categories{grid-template-columns:repeat(2,1fr)!important}
}

/* Phone: left-edge trigger + non-scrolling drawer. Only one submenu is open at once. */
@media (max-width:760px){
  .project-layout{display:block!important;padding-top:26px!important}
  .project-content{width:100%!important}
  .project-sidebar{position:static!important;padding:0!important;border:0!important;background:none!important}
  .project-menu-toggle{
    display:flex!important;position:fixed!important;left:10px;top:82px;width:auto;min-height:42px;padding:0 13px!important;
    border-radius:0 12px 12px 0!important;border:1px solid var(--line)!important;border-left:3px solid var(--accent)!important;
    background:color-mix(in srgb,var(--surface) 96%,transparent)!important;box-shadow:0 10px 34px rgba(0,0,0,.25);font-size:10px!important;
    align-items:center;gap:8px;backdrop-filter:blur(12px)
  }
  .project-menu-toggle span{font-size:15px;transform:rotate(-90deg)}
  .project-nav{
    display:block!important;position:fixed!important;left:0!important;top:0!important;bottom:0!important;right:auto!important;width:min(88vw,360px)!important;
    height:100dvh!important;max-height:none!important;overflow:visible!important;padding:12px!important;z-index:101!important;
    transform:translateX(-105%);transition:transform .26s cubic-bezier(.2,.8,.2,1);background:color-mix(in srgb,var(--bg) 97%,transparent)!important;
    box-shadow:20px 0 70px rgba(0,0,0,.35);backdrop-filter:blur(18px)
  }
  body.project-menu-open .project-nav{transform:translateX(0)}
  .project-nav-card{width:100%!important;max-height:none!important;overflow:visible!important;margin:0!important;box-shadow:none!important;background:transparent!important}
  .project-nav-head{padding:8px 8px 10px!important;grid-template-columns:1fr auto!important}
  .project-nav-head small{display:block}.project-nav-collapse{display:none!important}
  .project-nav-group summary{min-height:39px!important;padding:7px 9px!important;font-size:10px!important}
  .project-nav-group summary span em{font-size:10px!important}
  .project-nav-group summary span i{font-size:8px!important}
  .project-submenu{padding:2px 7px 6px!important}
  .project-submenu a{min-height:26px!important;padding:4px 7px!important;font-size:9px!important}
  .project-nav-group.cat-ai .project-submenu{display:grid;grid-template-columns:1fr 1fr;gap:1px 5px}
  .project-nav-group.cat-ai .project-submenu a{min-width:0}
  .project-nav-backdrop{display:block;position:fixed;inset:0;z-index:100;opacity:0;pointer-events:none;transition:opacity .22s}
  body.project-menu-open .project-nav-backdrop{opacity:1;pointer-events:auto}
  body.project-menu-open{overflow:hidden}
  .overview-categories{grid-template-columns:1fr!important}
  .case-visual figcaption{font-size:9px!important}
  .detect-box span{font-size:6.5px!important;top:-18px!important;padding:2px 4px!important}
  .detect-hud{font-size:6px!important;gap:5px!important}
}

@media (max-width:430px){
  .project-hero{padding-top:92px!important}
  .project-menu-toggle{top:76px;left:7px;min-height:38px;padding:0 10px!important}
  .project-nav{width:92vw!important;padding:8px!important}
  .project-nav-group summary{min-height:35px!important;padding:5px 7px!important}
  .project-submenu a{min-height:23px!important;font-size:8.5px!important}
  .project-nav-head{padding:6px 7px 8px!important}
  .orderboard-docs{grid-template-columns:1fr 1fr!important;gap:9px!important}
  .work-order{padding:11px 9px!important}.work-order-title{font-size:11px!important}.work-order-meta{left:9px!important;right:9px!important;bottom:10px!important}
}

/* v7 — fixed left project navigator, explicit title/toggle separation */
@media (min-width:761px){
  .project-layout{grid-template-columns:280px minmax(0,1fr)!important;gap:46px!important}
  .project-sidebar{grid-column:1!important;grid-row:1!important;position:relative!important;min-width:0!important}
  .project-content{grid-column:2!important;grid-row:1!important}
  .project-nav{
    position:fixed!important;
    top:94px!important;
    left:max(24px,calc((100vw - var(--shell))/2))!important;
    width:280px!important;
    max-height:none!important;
    overflow:visible!important;
    z-index:55!important;
    transform:none!important;
    padding:0!important;
  }
  .project-nav-card{
    transform:scale(var(--nav-scale,1));
    transform-origin:top left;
    width:280px!important;
    overflow:visible!important;
  }
  .project-layout.nav-collapsed{grid-template-columns:68px minmax(0,1fr)!important;gap:30px!important}
  .project-layout.nav-collapsed .project-nav{width:62px!important}
  .project-layout.nav-collapsed .project-nav-card{transform:none!important;width:62px!important}
}

.project-nav-group{--cat:var(--accent);border-top:1px solid color-mix(in srgb,var(--line) 80%,transparent)}
.project-nav-group-head{display:grid;grid-template-columns:minmax(0,1fr) 30px;align-items:stretch;background:color-mix(in srgb,var(--cat) 4%,transparent);border-left:3px solid var(--cat)}
.project-category-link{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;padding:7px 7px 7px 8px;color:var(--text);text-decoration:none}
.project-category-link:hover,.project-category-link.active-category{background:color-mix(in srgb,var(--cat) 13%,transparent);color:var(--cat)}
.project-category-link>span{display:flex;align-items:center;gap:7px;min-width:0}
.project-category-link i{font-style:normal;font-size:8px;font-weight:900;color:var(--cat);min-width:18px}
.project-category-link em{font-style:normal;font-size:9.5px;font-weight:850;line-height:1.05;white-space:normal}
.project-category-link b{font-size:8px;display:grid;place-items:center;min-width:20px;height:20px;border:1px solid color-mix(in srgb,var(--cat) 35%,var(--line));border-radius:7px;color:var(--cat)}
.project-category-toggle{border:0;border-left:1px solid var(--line);background:transparent;color:var(--muted);font-size:14px;cursor:pointer;display:grid;place-items:center;padding:0}
.project-category-toggle:hover{background:color-mix(in srgb,var(--cat) 10%,transparent);color:var(--cat)}
.project-submenu{display:none;padding:2px 5px 4px 7px!important;background:color-mix(in srgb,var(--cat) 1.5%,transparent)}
.project-nav-group.is-open .project-submenu{display:block}
.project-submenu a{min-height:18px!important;padding:2px 6px!important;margin:0!important;font-size:8.3px!important;line-height:1.12!important;border-radius:5px!important;display:flex!important;align-items:center!important;color:var(--muted)!important}
.project-submenu a:hover,.project-submenu a.active{background:color-mix(in srgb,var(--cat) 12%,transparent)!important;color:var(--text)!important}
.project-nav-head{min-height:38px!important;padding:7px 8px!important}
.project-nav-head>span{font-size:10px!important}.project-nav-head>small{font-size:8px!important}

.project-layout.nav-collapsed .project-nav-group-head{grid-template-columns:1fr!important;border-left-width:4px}
.project-layout.nav-collapsed .project-category-link{justify-content:center!important;padding:7px!important}
.project-layout.nav-collapsed .project-category-link em,
.project-layout.nav-collapsed .project-category-link b,
.project-layout.nav-collapsed .project-category-toggle,
.project-layout.nav-collapsed .project-submenu{display:none!important}
.project-layout.nav-collapsed .project-category-link i{min-width:34px;height:30px;display:grid;place-items:center;border-radius:8px;background:color-mix(in srgb,var(--cat) 12%,transparent);font-size:10px!important}

@media (min-width:761px) and (max-width:1100px){
  .project-layout{grid-template-columns:220px minmax(0,1fr)!important;gap:24px!important}
  .project-nav{left:24px!important;width:220px!important;top:86px!important}
  .project-nav-card{width:220px!important}
  .project-category-link{padding:5px 5px 5px 6px}
  .project-category-link em{font-size:8.6px}
  .project-submenu a{font-size:7.6px!important;min-height:16px!important;padding:1px 5px!important}
  .project-nav-group-head{grid-template-columns:minmax(0,1fr) 27px}
  .project-nav-head{min-height:34px!important}
  .project-layout.nav-collapsed{grid-template-columns:62px minmax(0,1fr)!important}
  .project-layout.nav-collapsed .project-nav{width:56px!important}
  .project-layout.nav-collapsed .project-nav-card{width:56px!important}
}

/* Phone: fixed left drawer, only one submenu at a time for legibility. */
@media (max-width:760px){
  .project-nav-group-head{grid-template-columns:minmax(0,1fr) 42px}
  .project-category-link{min-height:42px;padding:8px 8px 8px 10px}
  .project-category-link em{font-size:10px}
  .project-category-toggle{font-size:17px}
  .project-submenu{padding:4px 7px 8px!important}
  .project-submenu a{font-size:9.2px!important;min-height:27px!important;padding:4px 7px!important}
  .project-nav-group.cat-ai .project-submenu{display:none!important}
  .project-nav-group.cat-ai.is-open .project-submenu{display:grid!important;grid-template-columns:1fr 1fr;gap:2px 5px}
  .project-nav{overflow:hidden!important}
}

/* =========================================================
   v8 — detached project rail + responsive solution journey
   ========================================================= */

/* The project navigator lives outside the scrolling content canvas. */
body[data-page="projects"]{
  --project-rail-width:280px;
  --project-rail-gap:44px;
}
body[data-page="projects"] .projects-main{
  padding-left:calc(var(--project-rail-width) + var(--project-rail-gap));
  transition:padding-left .24s ease;
}
body[data-page="projects"] .projects-main .shell{
  width:min(calc(100% - 48px),var(--shell));
  margin-inline:auto;
}
body[data-page="projects"] .project-layout{
  display:block!important;
  grid-template-columns:none!important;
  gap:0!important;
  padding-top:54px!important;
  padding-bottom:130px!important;
}
body[data-page="projects"] .project-content{
  grid-column:auto!important;
  grid-row:auto!important;
  width:100%!important;
  min-width:0!important;
}
body[data-page="projects"] .project-sidebar{
  position:fixed!important;
  left:24px!important;
  top:94px!important;
  z-index:70!important;
  width:var(--project-rail-width)!important;
  min-width:0!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  background:transparent!important;
}
body[data-page="projects"] .project-nav{
  position:static!important;
  inset:auto!important;
  width:100%!important;
  max-height:none!important;
  overflow:visible!important;
  padding:0!important;
  display:block!important;
  transform:none;
  background:transparent!important;
  box-shadow:none!important;
}
body[data-page="projects"] .project-nav-card{
  width:var(--project-rail-width)!important;
  transform:scale(var(--nav-scale,1));
  transform-origin:top left;
  border-radius:16px;
  background:color-mix(in srgb,var(--surface) 96%,transparent);
  backdrop-filter:blur(18px);
}
body[data-page="projects"].project-nav-collapsed{
  --project-rail-width:62px;
  --project-rail-gap:26px;
}
body[data-page="projects"].project-nav-collapsed .project-nav-card{width:62px!important;transform:none!important}
body[data-page="projects"].project-nav-collapsed .project-nav-head{grid-template-columns:1fr!important;padding:9px!important}
body[data-page="projects"].project-nav-collapsed .project-nav-head>span,
body[data-page="projects"].project-nav-collapsed .project-nav-head>small{display:none!important}
body[data-page="projects"].project-nav-collapsed .project-nav-collapse{width:42px;height:36px;margin:auto}
body[data-page="projects"].project-nav-collapsed .project-nav-group-head{grid-template-columns:1fr!important;border-left-width:4px}
body[data-page="projects"].project-nav-collapsed .project-category-link{justify-content:center!important;padding:7px!important}
body[data-page="projects"].project-nav-collapsed .project-category-link em,
body[data-page="projects"].project-nav-collapsed .project-category-link b,
body[data-page="projects"].project-nav-collapsed .project-category-toggle,
body[data-page="projects"].project-nav-collapsed .project-submenu{display:none!important}
body[data-page="projects"].project-nav-collapsed .project-category-link i{
  min-width:34px;height:30px;display:grid;place-items:center;border-radius:8px;
  background:color-mix(in srgb,var(--cat) 12%,transparent);font-size:10px!important
}

/* Home: requirement -> productive solution */
.solution-section{position:relative}
.solution-intro{max-width:900px!important;margin-bottom:34px!important}
.solution-flow{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:34px;
}
.solution-step{
  position:relative;min-height:250px;padding:22px;border:1px solid var(--line);background:var(--surface);overflow:hidden;
}
.solution-step::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--accent);opacity:.72;
}
.solution-step-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.solution-step-top span{font:800 10px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--accent);letter-spacing:.12em}
.solution-step-top i{font-style:normal;color:var(--line-strong);font-size:19px}
.solution-step h3{margin:58px 0 10px;font-size:20px;letter-spacing:-.025em}
.solution-step p{margin:0;color:var(--muted);font-size:12px;line-height:1.62}
.solution-economy{
  margin-top:12px;padding:30px;border:1px solid var(--line);background:
  linear-gradient(120deg,color-mix(in srgb,var(--accent) 8%,transparent),transparent 52%),var(--surface);
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);gap:42px;align-items:center;
}
.solution-economy-copy>span{font:800 10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.13em;color:var(--accent)}
.solution-economy-copy h3{font-size:clamp(1.7rem,3vw,2.8rem);line-height:1.02;letter-spacing:-.045em;margin:12px 0}
.solution-economy-copy p{margin:0;color:var(--muted);font-size:14px;max-width:790px}
.solution-economy-points{display:grid;gap:7px}
.solution-economy-points span{position:relative;padding:9px 11px 9px 29px;border:1px solid var(--line);font-size:11px;background:color-mix(in srgb,var(--bg) 36%,transparent)}
.solution-economy-points span::before{content:"+";position:absolute;left:11px;color:var(--accent);font-weight:900}

/* Large desktop: keep the navigation in its own viewport rail. */
@media (min-width:1101px){
  body[data-page="projects"] .project-menu-toggle{display:none!important}
}

/* Tablet landscape / smaller desktop. */
@media (min-width:901px) and (max-width:1100px){
  body[data-page="projects"]{--project-rail-width:220px;--project-rail-gap:28px}
  body[data-page="projects"] .project-sidebar{left:18px!important;top:88px!important}
  body[data-page="projects"] .project-nav-card{width:220px!important}
  body[data-page="projects"].project-nav-collapsed{--project-rail-width:56px;--project-rail-gap:22px}
  body[data-page="projects"].project-nav-collapsed .project-nav-card{width:56px!important}
  body[data-page="projects"] .project-hero{grid-template-columns:1fr!important;gap:28px!important;padding-top:70px!important}
  body[data-page="projects"] .case-columns,body[data-page="projects"] .case-bottom{grid-template-columns:1fr!important}
  body[data-page="projects"] .case-bottom ul{grid-template-columns:1fr 1fr!important}
  .solution-flow{grid-template-columns:1fr 1fr}
}

/* iPad portrait and phone: content gets the full canvas; navigation becomes a drawer. */
@media (max-width:900px){
  body[data-page="projects"] .projects-main{padding-left:0!important}
  body[data-page="projects"] .projects-main .shell{width:min(calc(100% - 32px),var(--shell))!important}
  body[data-page="projects"] .project-sidebar{
    position:static!important;width:auto!important;inset:auto!important;
  }
  body[data-page="projects"] .project-menu-toggle{
    display:flex!important;position:fixed!important;left:10px!important;top:86px!important;z-index:96!important;
    width:auto!important;min-height:44px;padding:0 14px!important;align-items:center;gap:9px;
    border-radius:0 12px 12px 0!important;border:1px solid var(--line)!important;border-left:3px solid var(--accent)!important;
    background:color-mix(in srgb,var(--surface) 97%,transparent)!important;color:var(--text)!important;
    box-shadow:0 10px 34px rgba(0,0,0,.28);backdrop-filter:blur(14px);font-size:10px!important;font-weight:800;
  }
  body[data-page="projects"] .project-menu-toggle span{font-size:15px!important;transform:none!important}
  body[data-page="projects"] .project-nav{
    position:fixed!important;left:0!important;top:0!important;bottom:0!important;right:auto!important;
    width:min(88vw,370px)!important;height:100dvh!important;padding:12px!important;z-index:101!important;
    transform:translateX(-105%)!important;transition:transform .25s cubic-bezier(.2,.8,.2,1)!important;
    background:color-mix(in srgb,var(--bg) 98%,transparent)!important;box-shadow:20px 0 70px rgba(0,0,0,.38)!important;
    backdrop-filter:blur(20px)!important;overflow:hidden!important;
  }
  body.project-menu-open .project-nav{transform:translateX(0)!important}
  body[data-page="projects"] .project-nav-card{
    width:100%!important;transform:scale(var(--nav-scale,1));transform-origin:top left;background:transparent!important;border:0!important;box-shadow:none!important
  }
  body[data-page="projects"] .project-nav-head{padding:8px 8px 10px!important;grid-template-columns:1fr auto!important}
  body[data-page="projects"] .project-nav-collapse{display:none!important}
  body[data-page="projects"] .project-category-link{min-height:43px!important;padding:8px 8px 8px 10px!important}
  body[data-page="projects"] .project-category-link em{font-size:10px!important}
  body[data-page="projects"] .project-category-toggle{font-size:17px!important;min-width:42px!important}
  body[data-page="projects"] .project-submenu{padding:4px 7px 8px!important}
  body[data-page="projects"] .project-submenu a{font-size:9.2px!important;min-height:27px!important;padding:4px 7px!important}
  body[data-page="projects"] .project-nav-group.cat-ai .project-submenu{display:none!important}
  body[data-page="projects"] .project-nav-group.cat-ai.is-open .project-submenu{display:grid!important;grid-template-columns:1fr 1fr;gap:2px 5px}
  body[data-page="projects"] .project-hero{grid-template-columns:1fr!important;gap:34px!important;padding-top:92px!important}
  body[data-page="projects"] .project-overview{padding-top:44px!important}
  body[data-page="projects"] .case-columns,body[data-page="projects"] .case-bottom{grid-template-columns:1fr!important}
  body[data-page="projects"] .case-bottom ul{grid-template-columns:1fr!important}
  .solution-flow{grid-template-columns:1fr 1fr}
  .solution-step{min-height:210px}
  .solution-economy{grid-template-columns:1fr;gap:24px}
}

@media (max-width:600px){
  .solution-flow{grid-template-columns:1fr}
  .solution-step{min-height:0;padding:20px}
  .solution-step h3{margin-top:34px}
  .solution-economy{padding:22px}
  body[data-page="projects"] .project-hero h1{font-size:clamp(3.7rem,19vw,5.6rem)!important}
  body[data-page="projects"] .project-menu-toggle{top:76px!important;left:7px!important;min-height:40px!important;padding:0 11px!important}
  body[data-page="projects"] .project-nav{width:94vw!important;padding:8px!important}
}

/* v8.1 responsive polish after viewport checks */
@media (min-width:1101px) and (max-width:1250px){
  body[data-page="projects"]{--project-rail-width:220px;--project-rail-gap:28px}
  body[data-page="projects"] .project-sidebar{left:18px!important;top:88px!important}
  body[data-page="projects"] .project-nav-card{width:220px!important}
  body[data-page="projects"] .project-hero{grid-template-columns:1fr!important;gap:28px!important;padding-top:70px!important}
  body[data-page="projects"] .project-hero-copy{max-width:780px!important}
  body[data-page="projects"] .case-columns,body[data-page="projects"] .case-bottom{grid-template-columns:1fr!important}
  body[data-page="projects"] .case-bottom ul{grid-template-columns:1fr 1fr!important}
}
@media (max-width:900px){
  body[data-page="projects"] .project-menu-toggle{top:94px!important}
  body[data-page="projects"] .project-hero{padding-top:142px!important}
}
@media (max-width:600px){
  body[data-page="projects"] .project-menu-toggle{top:92px!important;left:7px!important}
  body[data-page="projects"] .project-hero{padding-top:138px!important}
}

/* v8.2 — mobile drawer stacking fix: move the fixed layer to the sidebar itself. */
@media (max-width:900px){
  body[data-page="projects"] .project-sidebar{
    position:fixed!important;left:0!important;top:0!important;bottom:0!important;right:auto!important;
    width:min(88vw,370px)!important;height:100dvh!important;padding:12px!important;margin:0!important;
    z-index:101!important;transform:translateX(-105%)!important;transition:transform .25s cubic-bezier(.2,.8,.2,1)!important;
    background:color-mix(in srgb,var(--bg) 98%,transparent)!important;box-shadow:20px 0 70px rgba(0,0,0,.38)!important;
    backdrop-filter:blur(20px)!important;overflow:hidden!important;
  }
  body.project-menu-open .project-sidebar{transform:translateX(0)!important}
  body[data-page="projects"] .project-nav{
    position:static!important;inset:auto!important;width:100%!important;height:auto!important;max-height:none!important;
    padding:0!important;transform:none!important;background:transparent!important;box-shadow:none!important;overflow:visible!important;
  }
  body[data-page="projects"] .project-nav-card{width:100%!important}
}
@media (max-width:600px){
  body[data-page="projects"] .project-sidebar{width:94vw!important;padding:8px!important}
}

/* =========================================================
   v11 — readable fixed navigator + credible interactive demo lab
   ========================================================= */
.heading-links{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px 22px}

/* Project rail: bigger type, compact two-column submenus where it helps. */
@media (min-width:1101px){
  body[data-page="projects"]{--project-rail-width:360px;--project-rail-gap:48px}
  body[data-page="projects"] .project-sidebar{left:22px!important;top:92px!important}
  body[data-page="projects"] .project-nav-card{width:360px!important;transform:none!important}
  body[data-page="projects"] .project-nav-head{min-height:46px!important;padding:8px 10px!important}
  body[data-page="projects"] .project-nav-head>span{font-size:11px!important;letter-spacing:.11em}
  body[data-page="projects"] .project-nav-head>small{font-size:10px!important}
  body[data-page="projects"] .project-nav-group-head{grid-template-columns:minmax(0,1fr) 38px!important}
  body[data-page="projects"] .project-category-link{min-height:40px!important;padding:7px 8px 7px 10px!important}
  body[data-page="projects"] .project-category-link i{font-size:9px!important;min-width:22px!important}
  body[data-page="projects"] .project-category-link em{font-size:11.5px!important;line-height:1.15!important;color:var(--cat)!important}
  body[data-page="projects"] .project-category-link b{font-size:9px!important;min-width:23px!important;height:23px!important}
  body[data-page="projects"] .project-category-toggle{min-width:38px!important;width:38px!important;font-size:0!important;overflow:visible!important;color:var(--cat)!important}
  body[data-page="projects"] .project-submenu{padding:5px 8px 8px!important;gap:2px 8px!important}
  body[data-page="projects"] .project-nav-group.cat-ai .project-submenu,
  body[data-page="projects"] .project-nav-group.cat-operations .project-submenu{display:grid!important;grid-template-columns:1fr 1fr!important}
  body[data-page="projects"] .project-submenu a{position:relative;font-size:10.3px!important;line-height:1.18!important;min-height:22px!important;padding:4px 6px 4px 15px!important;color:color-mix(in srgb,var(--cat) 30%,var(--muted))!important}
  body[data-page="projects"] .project-submenu a::before{content:"";position:absolute;left:5px;top:50%;width:4px;height:4px;border-radius:50%;background:var(--cat);transform:translateY(-50%);opacity:.68}
  body[data-page="projects"] .project-submenu a:hover,
  body[data-page="projects"] .project-submenu a.active{color:var(--text)!important}
}

/* Real chevrons – no cropped glyphs. */
.rail-chevron,.collapse-chevron{display:block;width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transition:transform .2s ease;transform-origin:50% 50%}
.rail-chevron{transform:rotate(45deg) translate(-1px,-1px)}
.project-category-toggle[aria-expanded="false"] .rail-chevron{transform:rotate(-45deg) translate(-1px,1px)}
.project-category-toggle{overflow:visible!important}
.project-nav-collapse{overflow:visible!important}
.collapse-chevron{transform:rotate(135deg)}
body.project-nav-collapsed .collapse-chevron,body.demo-nav-collapsed .collapse-chevron{transform:rotate(-45deg)}

@media (min-width:901px) and (max-width:1100px){
  body[data-page="projects"]{--project-rail-width:270px;--project-rail-gap:30px}
  body[data-page="projects"] .project-sidebar{left:14px!important;top:88px!important}
  body[data-page="projects"] .project-nav-card{width:270px!important;transform:none!important}
  body[data-page="projects"] .project-category-link em{font-size:10px!important;color:var(--cat)!important}
  body[data-page="projects"] .project-submenu a{font-size:8.8px!important;min-height:20px!important;padding:3px 5px 3px 12px!important;position:relative}
  body[data-page="projects"] .project-submenu a::before{content:"";position:absolute;left:4px;top:50%;width:3px;height:3px;border-radius:50%;background:var(--cat);transform:translateY(-50%)}
  body[data-page="projects"] .project-nav-group.cat-ai .project-submenu,
  body[data-page="projects"] .project-nav-group.cat-operations .project-submenu{display:grid!important;grid-template-columns:1fr 1fr!important;gap:1px 5px!important}
}

/* ---------------- Demo page rail ---------------- */
.demo-cat-vision{--cat:#59d2ee}.demo-cat-ml{--cat:#f2b45f}.demo-cat-automation{--cat:#aa83ff}
body[data-page="demos"]{--project-rail-width:330px;--project-rail-gap:48px}
body[data-page="demos"] .projects-main{padding-left:calc(var(--project-rail-width) + var(--project-rail-gap));transition:padding-left .24s ease}
body[data-page="demos"] .projects-main .shell{width:min(calc(100% - 48px),var(--shell));margin-inline:auto}
body[data-page="demos"] .project-layout{display:block!important;padding-top:54px!important;padding-bottom:130px!important}
body[data-page="demos"] .project-content{width:100%!important;min-width:0!important}
body[data-page="demos"] .project-sidebar{position:fixed!important;left:22px!important;top:94px!important;z-index:70!important;width:var(--project-rail-width)!important;padding:0!important;margin:0!important;background:transparent!important;border:0!important}
body[data-page="demos"] .project-nav{position:static!important;width:100%!important;max-height:none!important;overflow:visible!important;padding:0!important;display:block!important;background:transparent!important;box-shadow:none!important}
body[data-page="demos"] .project-nav-card{width:var(--project-rail-width)!important;overflow:visible!important;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--surface) 96%,transparent);backdrop-filter:blur(18px);box-shadow:0 18px 60px rgba(0,0,0,.18)}
body[data-page="demos"] .project-nav-head{display:grid!important;grid-template-columns:1fr auto auto;align-items:center;gap:8px;min-height:48px!important;padding:9px 10px!important}
body[data-page="demos"] .project-nav-head>span{font:800 11px ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
body[data-page="demos"] .project-nav-head>small{font:800 10px ui-monospace,monospace;color:var(--muted)}
body[data-page="demos"] .project-nav-group{display:block!important;padding:0!important;border-bottom:1px solid var(--line)}
body[data-page="demos"] .project-nav-group-head{display:grid;grid-template-columns:minmax(0,1fr) 40px;align-items:stretch;border-left:3px solid var(--cat);background:color-mix(in srgb,var(--cat) 4%,transparent)}
body[data-page="demos"] .project-category-link{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:42px;padding:8px 9px;color:var(--text);text-decoration:none}
body[data-page="demos"] .project-category-link>span{display:flex;align-items:center;gap:8px;min-width:0}
body[data-page="demos"] .project-category-link i{font-style:normal;font-size:9px;font-weight:900;color:var(--cat);min-width:22px}
body[data-page="demos"] .project-category-link em{font-style:normal;font-size:11.5px;font-weight:850;line-height:1.15;color:var(--cat)}
body[data-page="demos"] .project-category-link b{font-size:9px;display:grid;place-items:center;min-width:23px;height:23px;border:1px solid color-mix(in srgb,var(--cat) 35%,var(--line));border-radius:7px;color:var(--cat)}
body[data-page="demos"] .project-category-link:hover,body[data-page="demos"] .project-category-link.active-category{background:color-mix(in srgb,var(--cat) 12%,transparent)}
body[data-page="demos"] .project-category-toggle{border:0;border-left:1px solid var(--line);background:transparent;color:var(--cat);cursor:pointer;display:grid;place-items:center;min-width:40px}
body[data-page="demos"] .project-submenu{display:none;padding:6px 9px 9px!important}
body[data-page="demos"] .project-nav-group.is-open .project-submenu{display:grid!important;gap:2px}
body[data-page="demos"] .project-submenu a{position:relative;display:flex!important;align-items:center!important;min-height:29px!important;padding:5px 8px 5px 18px!important;margin:0!important;border:0!important;border-radius:6px!important;text-decoration:none;color:var(--muted)!important;font-size:10.5px!important;line-height:1.2!important}
body[data-page="demos"] .project-submenu a::before{content:"";position:absolute;left:7px;top:50%;width:4px;height:4px;border-radius:50%;background:var(--cat);transform:translateY(-50%)}
body[data-page="demos"] .project-submenu a:hover,body[data-page="demos"] .project-submenu a.active{background:color-mix(in srgb,var(--cat) 12%,transparent)!important;color:var(--text)!important}
body[data-page="demos"].demo-nav-collapsed{--project-rail-width:62px;--project-rail-gap:26px}
body[data-page="demos"].demo-nav-collapsed .project-nav-card{width:62px!important}
body[data-page="demos"].demo-nav-collapsed .project-nav-head{grid-template-columns:1fr!important;padding:9px!important}
body[data-page="demos"].demo-nav-collapsed .project-nav-head>span,body[data-page="demos"].demo-nav-collapsed .project-nav-head>small{display:none!important}
body[data-page="demos"].demo-nav-collapsed .project-nav-collapse{width:42px;height:36px;margin:auto}
body[data-page="demos"].demo-nav-collapsed .project-nav-group-head{grid-template-columns:1fr!important}
body[data-page="demos"].demo-nav-collapsed .project-category-link{justify-content:center!important;padding:7px!important}
body[data-page="demos"].demo-nav-collapsed .project-category-link em,body[data-page="demos"].demo-nav-collapsed .project-category-link b,body[data-page="demos"].demo-nav-collapsed .project-category-toggle,body[data-page="demos"].demo-nav-collapsed .project-submenu{display:none!important}
body[data-page="demos"].demo-nav-collapsed .project-category-link i{min-width:34px;height:30px;display:grid;place-items:center;border-radius:8px;background:color-mix(in srgb,var(--cat) 12%,transparent)}
.demo-overview-categories{grid-template-columns:repeat(3,1fr)!important}
.demo-overview-categories .overview-category{border-top:3px solid var(--cat);min-height:150px}
.demo-category .project-category-head{border-top:3px solid var(--cat);padding-top:21px}
.demo-category .project-category-head>span{color:var(--cat)}

/* ---------------- Interactive demo cards ---------------- */
.demo-case{padding-bottom:88px!important}
.demo-widget{margin-top:38px;border:1px solid var(--line);background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 92%,transparent),var(--surface));box-shadow:0 24px 70px rgba(0,0,0,.14);overflow:hidden}
.demo-controls{padding:14px 16px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--surface-2) 72%,transparent)}
.demo-controls-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.demo-controls label,.forecast-controls label{display:grid;gap:5px;color:var(--muted);font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.07em}
.demo-controls label{grid-template-columns:auto minmax(110px,180px) auto;align-items:center;gap:10px}
.demo-controls input[type="range"],.forecast-controls input[type="range"]{accent-color:var(--accent);width:100%}
.demo-controls output,.forecast-controls output{color:var(--text);font:800 10px ui-monospace,monospace;min-width:42px;text-align:right}
.demo-control-button{border:1px solid var(--line);background:var(--surface);color:var(--muted);min-height:36px;padding:0 12px;cursor:pointer;font-size:10px;font-weight:800;transition:.2s}
.demo-control-button:hover,.demo-control-button.active{border-color:color-mix(in srgb,var(--accent) 65%,var(--line));color:var(--text);background:var(--accent-soft)}
.demo-metric{margin-left:auto;display:grid;gap:1px;text-align:right}.demo-metric span{font-size:8px;text-transform:uppercase;color:var(--muted)}.demo-metric strong{font-size:17px}
.demo-explain{display:flex;gap:10px;padding:13px 16px;border-top:1px solid var(--line);color:var(--muted);font-size:11px}.demo-explain strong{color:var(--text);white-space:nowrap}
.demo-canvas{display:block;width:100%;height:auto;aspect-ratio:760/360;background:var(--surface);cursor:crosshair}

.demo-camera-frame{position:relative;aspect-ratio:16/9;background:#05070a;overflow:hidden}.demo-camera-frame>img{width:100%;height:100%;object-fit:cover;display:block}.demo-camera-frame::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.14))}
.demo-camera-hud{position:absolute;z-index:3;left:12px;right:12px;top:11px;display:flex;justify-content:space-between;color:#e9f3f8;font:800 9px ui-monospace,monospace;text-shadow:0 1px 5px #000}
.demo-bbox{position:absolute;z-index:4;border:2px solid #59d2ee;transition:opacity .18s,transform .18s}.demo-bbox.hidden{opacity:0;transform:scale(.96);pointer-events:none}.demo-bbox>span{position:absolute;left:-2px;top:-22px;padding:3px 5px;background:#59d2ee;color:#071116;font:800 8px ui-monospace,monospace;white-space:nowrap}.demo-bbox.box-2{border-color:#f2b45f}.demo-bbox.box-2>span{background:#f2b45f}.demo-bbox.box-3{border-color:#aa83ff}.demo-bbox.box-3>span{background:#aa83ff;color:#fff}.demo-bbox.box-4{border-color:#66d39b}.demo-bbox.box-4>span{background:#66d39b}

.neural-layout{display:grid;grid-template-columns:280px 1fr;gap:30px;padding:24px}.demo-mini-label{font:800 9px ui-monospace,monospace;color:var(--muted);letter-spacing:.1em;margin-bottom:9px}.neural-pixels{display:grid;grid-template-columns:repeat(8,1fr);gap:3px;aspect-ratio:1;max-width:248px}.neural-pixel{border:1px solid var(--line);background:var(--surface-2);cursor:pointer;padding:0}.neural-pixel.on{background:#59d2ee;box-shadow:0 0 16px rgba(89,210,238,.25)}.demo-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.neural-network{display:grid;grid-template-columns:1fr auto 1fr auto minmax(150px,.8fr);gap:16px;align-items:center}.network-layer{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.network-layer>span{grid-column:1/-1;font:800 9px ui-monospace,monospace;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}.network-layer i{height:46px;border:1px solid var(--line);background:linear-gradient(to top,#59d2ee var(--act,0%),var(--surface-2) 0);opacity:.45;transition:.45s}.network-layer i.active{opacity:1;box-shadow:0 0 22px color-mix(in srgb,#59d2ee 16%,transparent)}.network-layer.compact i{background:linear-gradient(to top,#aa83ff var(--act,0%),var(--surface-2) 0)}.network-arrow{color:var(--muted);font-size:24px}.network-output{min-height:160px;border:1px solid var(--line);display:grid;place-items:center;align-content:center;text-align:center;background:color-mix(in srgb,var(--accent) 5%,var(--surface))}.network-output span{font:800 9px ui-monospace,monospace;color:var(--muted)}.network-output strong{font-size:64px;line-height:1;color:var(--accent);margin:8px 0}.network-output small{color:var(--muted);font-size:9px}

.class-picker{display:flex;gap:5px}.class-a.active{border-color:#59d2ee!important;background:color-mix(in srgb,#59d2ee 12%,var(--surface))!important}.class-b.active{border-color:#f2b45f!important;background:color-mix(in srgb,#f2b45f 12%,var(--surface))!important}
.anomaly-canvas{aspect-ratio:760/300}

.forecast-controls{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:18px;border-bottom:1px solid var(--line)}.forecast-controls label{padding:12px;border:1px solid var(--line);background:color-mix(in srgb,var(--surface-2) 68%,transparent)}.forecast-controls label span{min-height:28px}.forecast-result-grid,.roi-results{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}.forecast-result-grid>div,.roi-results>div{padding:20px;border-right:1px solid var(--line);display:grid;gap:4px}.forecast-result-grid>div:last-child,.roi-results>div:last-child{border-right:0}.forecast-result-grid span,.roi-results span{font-size:9px;color:var(--muted);text-transform:uppercase;font-weight:800}.forecast-result-grid strong,.roi-results strong{font-size:32px}.accent-result{background:var(--accent-soft)}.accent-result strong{color:var(--accent)}
.forecast-bars{height:230px;display:grid;grid-template-columns:repeat(7,1fr);gap:10px;align-items:end;padding:28px 22px 22px}.forecast-bars div{height:100%;display:grid;grid-template-rows:1fr auto auto;gap:5px;align-items:end;text-align:center}.forecast-bars i{display:block;width:70%;justify-self:center;background:linear-gradient(to top,var(--accent),color-mix(in srgb,var(--accent) 35%,#59d2ee));min-height:8px}.forecast-bars span{font-size:9px;color:var(--muted)}.forecast-bars b{font-size:10px}

.routing-tabs{display:flex;gap:1px;background:var(--line);border-bottom:1px solid var(--line)}.routing-tabs button{flex:1;border:0;background:var(--surface);color:var(--muted);padding:12px;cursor:pointer;font-size:10px;font-weight:800}.routing-tabs button.active{background:var(--accent-soft);color:var(--accent)}.routing-layout{display:grid;grid-template-columns:270px 1fr;gap:28px;padding:24px}.routing-document{aspect-ratio:210/270;background:#f4f1e8;color:#192027;padding:18px;display:flex;flex-direction:column;box-shadow:0 14px 30px rgba(0,0,0,.18)}.routing-document>span{font:800 8px ui-monospace,monospace;color:#777}.routing-document strong{font-size:19px;line-height:1.1;margin-top:28px}.routing-document p{font:500 10px/1.8 ui-monospace,monospace;margin:18px 0;color:#4d555c}.routing-document .demo-control-button{margin-top:auto;color:#fff;background:#242c34}.routing-pipeline{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:10px;align-items:center}.routing-pipeline>div{min-height:125px;border:1px solid var(--line);padding:14px;display:grid;align-content:center;gap:5px;background:var(--surface-2);transition:.25s}.routing-pipeline>div.done{border-color:#66d39b;box-shadow:inset 0 0 0 1px #66d39b;background:color-mix(in srgb,#66d39b 8%,var(--surface-2))}.routing-pipeline i{font-style:normal;color:var(--accent);font:800 9px ui-monospace,monospace}.routing-pipeline span{font-size:9px;color:var(--muted);text-transform:uppercase}.routing-pipeline b{font-size:13px}.routing-pipeline>em{font-style:normal;color:var(--muted);font-size:21px}.routing-fields{display:flex;flex-wrap:wrap;gap:7px;padding:0 24px 24px}.routing-fields span{padding:7px 9px;border:1px solid var(--line);font-size:10px;color:var(--muted);background:var(--surface-2)}

.roi-inputs{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border-bottom:1px solid var(--line)}.roi-inputs label{display:grid;gap:8px;padding:16px;background:var(--surface)}.roi-inputs span{font-size:8px;color:var(--muted);text-transform:uppercase;font-weight:800}.roi-inputs input{width:100%;border:1px solid var(--line);background:var(--surface-2);color:var(--text);padding:10px;font:800 14px ui-monospace,monospace}.roi-flow{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;padding:26px}.roi-flow>div{min-height:120px;border:1px solid var(--line);display:grid;align-content:center;padding:20px;gap:6px}.roi-flow span{font:800 9px ui-monospace,monospace;color:var(--muted)}.roi-flow strong{font-size:24px}.roi-flow>i{font-style:normal;font-size:25px;color:var(--accent)}.roi-flow .roi-auto{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));background:var(--accent-soft)}

@media (min-width:1101px){body[data-page="demos"] .project-menu-toggle{display:none!important}}
@media (min-width:901px) and (max-width:1100px){
  body[data-page="demos"]{--project-rail-width:250px;--project-rail-gap:28px}
  body[data-page="demos"] .project-sidebar{left:14px!important;top:88px!important}
  body[data-page="demos"] .project-nav-card{width:250px!important}
  body[data-page="demos"] .project-category-link em{font-size:10px}
  body[data-page="demos"] .project-submenu a{font-size:9px!important}
  body[data-page="demos"] .project-hero{grid-template-columns:1fr!important;gap:28px!important;padding-top:70px!important}
  .neural-layout{grid-template-columns:230px 1fr}.forecast-controls{grid-template-columns:1fr 1fr}.roi-inputs{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  body[data-page="demos"] .projects-main{padding-left:0!important}
  body[data-page="demos"] .projects-main .shell{width:min(calc(100% - 32px),var(--shell))!important}
  body[data-page="demos"] .project-menu-toggle{display:flex!important;position:fixed!important;left:10px!important;top:94px!important;z-index:96!important;min-height:44px;padding:0 14px!important;align-items:center;gap:9px;border-radius:0 12px 12px 0!important;border:1px solid var(--line)!important;border-left:3px solid var(--accent)!important;background:color-mix(in srgb,var(--surface) 97%,transparent)!important;color:var(--text)!important;box-shadow:0 10px 34px rgba(0,0,0,.28);backdrop-filter:blur(14px);font-size:10px!important;font-weight:800}
  body[data-page="demos"] .project-sidebar{position:fixed!important;left:0!important;top:0!important;bottom:0!important;width:min(88vw,370px)!important;height:100dvh!important;padding:12px!important;z-index:101!important;transform:translateX(-105%)!important;transition:transform .25s cubic-bezier(.2,.8,.2,1)!important;background:color-mix(in srgb,var(--bg) 98%,transparent)!important;box-shadow:20px 0 70px rgba(0,0,0,.38)!important;backdrop-filter:blur(20px)!important;overflow:hidden!important}
  body.demo-menu-open .project-sidebar{transform:translateX(0)!important}
  body[data-page="demos"] .project-nav{position:static!important;width:100%!important;padding:0!important;overflow:visible!important}
  body[data-page="demos"] .project-nav-card{width:100%!important;background:transparent!important;border:0!important;box-shadow:none!important}
  body[data-page="demos"] .project-nav-collapse{display:none!important}
  body[data-page="demos"] .project-category-link{min-height:46px;padding:9px 10px}
  body[data-page="demos"] .project-category-link em{font-size:11px}
  body[data-page="demos"] .project-category-toggle{min-width:44px}
  body[data-page="demos"] .project-submenu a{font-size:10px!important;min-height:31px!important}
  body[data-page="demos"] .project-hero{grid-template-columns:1fr!important;gap:34px!important;padding-top:142px!important}
  body[data-page="demos"] .project-overview{padding-top:44px!important}
  .demo-overview-categories{grid-template-columns:1fr!important}
  .neural-layout{grid-template-columns:1fr}.neural-pixels{max-width:260px}.neural-network{grid-template-columns:1fr;gap:8px}.network-arrow{transform:rotate(90deg);justify-self:center}.network-layer{grid-template-columns:repeat(4,1fr)}.network-output{min-height:120px}.network-output strong{font-size:46px}
  .forecast-controls{grid-template-columns:1fr 1fr}.routing-layout{grid-template-columns:1fr}.routing-document{max-width:280px}.routing-pipeline{grid-template-columns:1fr}.routing-pipeline>em{transform:rotate(90deg);justify-self:center}.roi-inputs{grid-template-columns:1fr 1fr}.roi-flow{grid-template-columns:1fr}.roi-flow>i{transform:rotate(90deg);justify-self:center}.demo-controls label{grid-template-columns:1fr;gap:4px;min-width:160px}.demo-metric{margin-left:0;text-align:left}
}
@media (max-width:600px){
  body[data-page="demos"] .project-menu-toggle{top:92px!important;left:7px!important;min-height:40px!important;padding:0 11px!important}
  body[data-page="demos"] .project-sidebar{width:94vw!important;padding:8px!important}
  body[data-page="demos"] .project-hero{padding-top:138px!important}
  .forecast-controls,.roi-inputs{grid-template-columns:1fr}.forecast-result-grid,.roi-results{grid-template-columns:1fr}.forecast-result-grid>div,.roi-results>div{border-right:0;border-bottom:1px solid var(--line)}.forecast-result-grid>div:last-child,.roi-results>div:last-child{border-bottom:0}.forecast-bars{height:190px;padding:20px 12px 18px;gap:5px}.routing-tabs{display:grid;grid-template-columns:1fr 1fr}.demo-explain{display:grid}.demo-explain strong{white-space:normal}
}
@media (max-width:900px){body.demo-menu-open .project-nav-backdrop{opacity:1;pointer-events:auto}}
@media (max-width:900px){
  body[data-page="projects"] .project-nav-backdrop,body[data-page="demos"] .project-nav-backdrop{display:block;position:fixed;inset:0;z-index:100;opacity:0;pointer-events:none;transition:opacity .22s}
  body.project-menu-open .project-nav-backdrop,body.demo-menu-open .project-nav-backdrop{opacity:1;pointer-events:auto}
  body.project-menu-open,body.demo-menu-open{overflow:hidden}
}

/* ================= Portfolio v11 · Expanded interactive demos ================= */
.demo-cat-vision{--cat:#59d2ee}
.demo-cat-operations{--cat:#f2b45f}
.demo-cat-infrastructure{--cat:#6aa8ff}
.demo-cat-automation{--cat:#aa83ff}
.demo-cat-adminml{--cat:#66d39b}
body[data-page="demos"]{--project-rail-width:350px;--project-rail-gap:44px}
body[data-page="demos"] .project-nav-card{width:350px!important}
body[data-page="demos"] .project-category-link em{font-size:11.7px!important}
body[data-page="demos"] .project-submenu{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:2px 7px!important}
body[data-page="demos"] .project-submenu a{font-size:9.8px!important;min-height:27px!important;padding:4px 6px 4px 16px!important}
body[data-page="demos"] .project-submenu a::before{left:5px}
.demo-overview-categories{grid-template-columns:repeat(5,1fr)!important}

.demo-widget select,.demo-widget input[type="number"]{border:1px solid var(--line);background:var(--surface-2);color:var(--text);min-height:38px;padding:0 10px}
.demo-widget button:disabled{opacity:.38;cursor:not-allowed}
.demo-control-button.danger{border-color:#ff6d60;color:#ff9188;background:rgba(255,109,96,.08)}
.challenge-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.75fr)}
.challenge-image{position:relative;min-height:410px;background:#080c0f;overflow:hidden}.challenge-image>img{width:100%;height:100%;object-fit:cover;display:block}.challenge-hud{position:absolute;inset:14px 15px auto;display:flex;justify-content:space-between;font:800 9px ui-monospace,monospace;color:#eef7fa;text-shadow:0 2px 8px #000;z-index:4}.challenge-panel{padding:28px;display:grid;align-content:center;gap:18px;border-left:1px solid var(--line)}.challenge-panel h3{font-size:24px;line-height:1.15;margin:0}.big-range{display:grid;gap:9px}.big-range output{font:850 32px ui-monospace,monospace;color:var(--accent)}.big-range input{width:100%;accent-color:var(--accent)}.challenge-result{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}.challenge-result>div{padding:12px;background:var(--surface-2);display:grid;gap:4px}.challenge-result span{font-size:8px;text-transform:uppercase;color:var(--muted);font-weight:800}.challenge-result strong{font-size:17px}.challenge-result p{grid-column:1/-1;margin:0;padding:12px;background:var(--surface);font-size:10px;color:var(--muted);line-height:1.6}
.inventory-ai-layer{position:absolute;inset:0;z-index:3}.inventory-ai-layer i{position:absolute;border:2px solid #59d2ee;background:rgba(89,210,238,.04)}.inventory-ai-layer i:nth-child(2){border-color:#f2b45f}.inventory-ai-layer i:nth-child(3){border-color:#66d39b}.inventory-ai-layer i:nth-child(4){border-color:#aa83ff}.inventory-ai-layer span{position:absolute;left:-2px;top:-20px;background:#0c141a;color:#eef7fa;padding:3px 5px;font:800 8px ui-monospace,monospace;white-space:nowrap}

.quality-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:13px 16px;border-bottom:1px solid var(--line);background:var(--surface-2)}.quality-toolbar>span{font-size:10px;color:var(--muted)}.quality-toolbar b{color:var(--accent)}.quality-stage{position:relative;aspect-ratio:3/2;background:#080b0e;cursor:crosshair;overflow:hidden}.quality-stage>img{width:100%;height:100%;display:block;object-fit:cover}.human-mark{position:absolute;width:18px;height:18px;border:2px solid #fff;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 4px rgba(0,0,0,.4);z-index:5}.human-mark::after,.human-mark::before{content:"";position:absolute;background:#fff}.human-mark::after{width:24px;height:1px;left:-5px;top:7px}.human-mark::before{width:1px;height:24px;top:-5px;left:7px}.human-mark span{position:absolute;left:14px;top:-12px;background:#fff;color:#111;padding:2px 4px;font:800 7px ui-monospace,monospace}.quality-ai-layer{position:absolute;inset:0;z-index:4;pointer-events:none}.quality-box{position:absolute;border:2px solid #59d2ee}.quality-box span{position:absolute;left:-2px;top:-21px;padding:3px 5px;font:800 8px ui-monospace,monospace;color:#071116;background:#59d2ee;white-space:nowrap}.quality-box.dent{border-color:#f2b45f}.quality-box.dent span{background:#f2b45f}.quality-box.corrosion{border-color:#66d39b}.quality-box.corrosion span{background:#66d39b}.quality-results{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line)}.quality-results>div{padding:14px;border-right:1px solid var(--line);display:grid;gap:4px}.quality-results>div:last-child{border-right:0}.quality-results span{font-size:8px;color:var(--muted);text-transform:uppercase;font-weight:800}.quality-results strong{font-size:12px}

.machine-fleet{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-bottom:1px solid var(--line)}.machine-card{border:0;background:var(--surface);color:var(--text);padding:15px;text-align:left;display:grid;grid-template-columns:auto 1fr;gap:3px 9px;cursor:pointer}.machine-card.active{background:var(--accent-soft)}.machine-card .machine-status-dot{width:10px;height:10px;border-radius:50%;background:#66d39b;grid-row:1/4;margin-top:4px}.machine-card.warn .machine-status-dot{background:#f2b45f}.machine-card.danger .machine-status-dot{background:#ff6d60;box-shadow:0 0 14px rgba(255,109,96,.35)}.machine-card small{color:var(--muted);font-size:9px}.machine-card strong{font-size:14px}.machine-card em{font-style:normal;color:var(--muted);font-size:9px}.machine-workbench{display:grid;grid-template-columns:1.25fr .75fr}.machine-controls{padding:24px;display:grid;gap:13px}.machine-controls label,.supplier-controls label,.pq-controls label{display:grid;grid-template-columns:150px 1fr 70px;align-items:center;gap:12px;font-size:9px;color:var(--muted);font-weight:800;text-transform:uppercase}.machine-controls input,.supplier-controls input,.pq-controls input{width:100%;accent-color:var(--accent)}.machine-controls output,.supplier-controls output,.pq-controls output{text-align:right;color:var(--text);font:800 10px ui-monospace,monospace}.machine-diagnosis{border-left:1px solid var(--line);padding:28px;display:grid;align-content:center;gap:10px;background:var(--surface-2)}.machine-light{display:flex;gap:8px}.machine-light i{width:19px;height:19px;border-radius:50%;background:#293036}.machine-light.normal i:first-child{background:#66d39b;box-shadow:0 0 20px rgba(102,211,155,.35)}.machine-light.warn i:nth-child(2){background:#f2b45f;box-shadow:0 0 20px rgba(242,180,95,.35)}.machine-light.danger i:nth-child(3){background:#ff6d60;box-shadow:0 0 20px rgba(255,109,96,.35)}.machine-diagnosis h3{font-size:29px;margin:5px 0 0}.machine-diagnosis>strong{color:var(--accent)}.machine-diagnosis p{color:var(--muted);font-size:11px;line-height:1.6;margin:0}.machine-delta{padding:10px;border:1px solid var(--line);font:800 10px ui-monospace,monospace}

.supplier-layout,.pq-layout{display:grid;grid-template-columns:1.2fr .8fr}.supplier-controls,.pq-controls{padding:26px;display:grid;gap:17px}.supplier-output,.pq-output{border-left:1px solid var(--line);background:var(--surface-2);padding:30px;display:grid;align-content:center;gap:13px}.risk-ring,.pq-ring{--risk:0deg;width:170px;aspect-ratio:1;border-radius:50%;background:conic-gradient(#ff6d60 0 var(--risk),#293036 var(--risk) 360deg);display:grid;place-content:center;text-align:center;position:relative}.risk-ring::after,.pq-ring::after{content:"";position:absolute;inset:13px;border-radius:50%;background:var(--surface-2)}.risk-ring>* ,.pq-ring>*{position:relative;z-index:2}.risk-ring span,.pq-ring span{font-size:8px;color:var(--muted);font-weight:800}.risk-ring strong,.pq-ring strong{font-size:34px}.supplier-output h3,.pq-output h3{font-size:24px;margin:0}.supplier-output p{color:var(--muted);margin:0}.supplier-factors,.pq-factor-list{display:flex;flex-wrap:wrap;gap:6px}.supplier-factors span,.pq-factor-list span{font-size:9px;border:1px solid var(--line);padding:6px 8px;background:var(--surface)}

.network-faults{display:flex;gap:7px;align-items:center;flex-wrap:wrap;padding:14px 16px;border-bottom:1px solid var(--line);background:var(--surface-2)}.network-faults .demo-mini-label{margin:0 8px 0 0}.network-topology{display:grid;grid-template-columns:repeat(11,auto);justify-content:center;align-items:center;gap:9px;padding:34px 20px}.network-node{width:110px;min-height:110px;border:1px solid var(--line);display:grid;place-items:center;align-content:center;gap:4px;background:var(--surface);transition:.25s}.network-node i{font-style:normal;font-size:27px;color:#66d39b}.network-node span{font-size:9px;font-weight:800;text-align:center}.network-node small{font:800 8px ui-monospace,monospace;color:#66d39b}.network-node.affected{border-color:#ff6d60;background:rgba(255,109,96,.08)}.network-node.affected i,.network-node.affected small{color:#ff6d60}.network-topology>em{font-style:normal;color:var(--muted);font-size:18px}.network-diagnosis{display:grid;grid-template-columns:1fr 1fr 1.35fr;border-top:1px solid var(--line)}.network-diagnosis>div,.network-diagnosis>ol{padding:18px;border-right:1px solid var(--line);margin:0}.network-diagnosis>div span{display:block;font-size:8px;text-transform:uppercase;color:var(--muted);font-weight:800;margin-bottom:5px}.network-diagnosis>div strong{font-size:13px}.network-diagnosis ol{list-style:none;display:grid;gap:6px}.network-diagnosis li{font-size:9px;color:var(--muted)}.network-diagnosis li b{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--accent-soft);color:var(--accent);margin-right:6px}

.wifi-controls{display:flex;gap:9px;align-items:end;flex-wrap:wrap;padding:14px 16px;border-bottom:1px solid var(--line);background:var(--surface-2)}.wifi-controls label{display:grid;gap:5px;font-size:8px;color:var(--muted);text-transform:uppercase;font-weight:800;min-width:130px}.wifi-controls input{accent-color:var(--accent)}.wifi-canvas-wrap{position:relative;background:#0b1115}.wifi-canvas-wrap canvas{display:block;width:100%;height:auto;touch-action:none;cursor:grab}.wifi-legend{position:absolute;right:12px;bottom:12px;display:flex;gap:10px;padding:7px 9px;background:rgba(7,10,12,.72);backdrop-filter:blur(8px);font-size:8px;color:#dce7ed}.wifi-legend span{display:flex;align-items:center;gap:4px}.wifi-legend i{width:8px;height:8px;border-radius:50%}.wifi-legend .excellent{background:#4ad68c}.wifi-legend .good{background:#59d2ee}.wifi-legend .weak{background:#f2b45f}.wifi-metrics{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}.wifi-metrics>div{padding:14px;border-right:1px solid var(--line);display:grid;gap:4px}.wifi-metrics span{font-size:8px;color:var(--muted);text-transform:uppercase}.wifi-metrics strong{font-size:14px}

.recovery-topology{display:flex;justify-content:center;align-items:center;gap:20px;padding:38px}.recovery-node{width:220px;min-height:150px;border:1px solid var(--line);display:grid;place-items:center;align-content:center;gap:6px;background:var(--surface);transition:.3s}.recovery-node i{font-style:normal;font-size:34px;color:#66d39b}.recovery-node span{font-size:10px}.recovery-node strong{font:800 9px ui-monospace,monospace;color:#66d39b}.recovery-node.compromised{border-color:#ff6d60;background:rgba(255,109,96,.08)}.recovery-node.compromised i,.recovery-node.compromised strong{color:#ff6d60}.recovery-node.safe,.recovery-node.restored{border-color:#66d39b;background:rgba(102,211,155,.07)}.recovery-topology>em{font-style:normal;color:var(--muted);font-size:25px}.recovery-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap;padding:14px 16px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.recovery-actions label{font-size:9px;color:var(--muted);margin-left:auto}.restore-progress{height:50px;position:relative;background:var(--surface-2);display:flex;align-items:center;padding:0 15px;overflow:hidden}.restore-progress i{position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(102,211,155,.15);transition:.3s}.restore-progress span{position:relative;z-index:2;font-size:10px}.recovery-log{display:flex;gap:10px;flex-wrap:wrap;padding:13px 16px}.recovery-log span{font-size:9px;border:1px solid var(--line);padding:5px 8px}

.pbx-controls{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:15px;border-bottom:1px solid var(--line);background:var(--surface-2)}.pbx-controls label{font-size:9px;color:var(--muted);display:flex;align-items:center;gap:6px}.pbx-route{display:grid;grid-template-columns:repeat(11,auto);align-items:center;justify-content:center;gap:8px;padding:38px 20px}.pbx-node{width:108px;min-height:105px;border:1px solid var(--line);display:grid;place-items:center;align-content:center;text-align:center;gap:4px;opacity:.65;transition:.25s}.pbx-node i{font-style:normal;font-size:26px}.pbx-node span{font-size:9px;font-weight:800}.pbx-node small{font-size:8px;color:var(--muted)}.pbx-node.active{opacity:1;border-color:var(--accent);box-shadow:0 0 24px var(--accent-soft);transform:translateY(-3px)}.pbx-node.done{opacity:1;background:var(--accent-soft)}.pbx-node.skipped{opacity:.18}.pbx-route>em{font-style:normal;color:var(--muted)}.pbx-result{padding:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px}.pbx-result span{font-size:9px;color:var(--muted);text-transform:uppercase}.pbx-result strong{font-size:14px}

.automation-builder{display:grid;grid-template-columns:220px 1fr}.builder-palette{padding:18px;border-right:1px solid var(--line);display:grid;align-content:start;gap:7px;background:var(--surface-2)}.builder-palette button{border:1px solid var(--line);background:var(--surface);color:var(--text);min-height:46px;padding:0 11px;display:flex;align-items:center;gap:9px;cursor:pointer;text-align:left}.builder-palette button:hover{border-color:var(--accent);background:var(--accent-soft)}.builder-palette i{font-style:normal;color:var(--accent);font-size:18px}.builder-palette span{font-size:10px;font-weight:800}.builder-workspace{padding:20px;min-width:0}.builder-head{display:flex;justify-content:space-between;align-items:center;gap:10px;border-bottom:1px solid var(--line);padding-bottom:15px}.builder-head>span{font:800 9px ui-monospace,monospace;color:var(--muted)}.builder-head>div{display:flex;gap:6px;flex-wrap:wrap}.builder-flow{min-height:200px;display:flex;align-items:center;gap:8px;overflow-x:auto;padding:25px 2px}.builder-flow>p{color:var(--muted);font-size:11px}.builder-node{min-width:116px;min-height:100px;border:1px solid var(--line);display:grid;place-items:center;align-content:center;gap:5px;position:relative;background:var(--surface);transition:.25s}.builder-node i{font-style:normal;font-size:25px;color:var(--accent)}.builder-node span{font-size:9px;font-weight:800}.builder-node button{position:absolute;right:4px;top:4px;border:0;background:transparent;color:var(--muted);cursor:pointer}.builder-node.running{border-color:var(--accent);box-shadow:0 0 22px var(--accent-soft);transform:translateY(-4px)}.builder-node.done{border-color:#66d39b;background:rgba(102,211,155,.06)}.builder-flow>em{font-style:normal;color:var(--muted);font-size:19px}.builder-status{padding:10px 12px;border:1px solid var(--line);background:var(--surface-2);font:800 9px ui-monospace,monospace;color:var(--muted)}.automation-builder>.demo-explain{grid-column:1/-1}

.goods-tabs,.application-tabs{display:flex;background:var(--line);gap:1px;border-bottom:1px solid var(--line)}.goods-tabs button,.application-tabs button{flex:1;border:0;background:var(--surface);color:var(--muted);min-height:42px;cursor:pointer;font-size:9px;font-weight:800}.goods-tabs button.active,.application-tabs button.active{background:var(--accent-soft);color:var(--accent)}.goods-grid{display:grid;grid-template-columns:1.55fr .45fr}.goods-camera{position:relative;min-height:360px;overflow:hidden}.goods-camera img{width:100%;height:100%;object-fit:cover}.goods-detection{position:absolute;inset:0;border:3px solid #59d2ee;pointer-events:none}.goods-detection>span{position:absolute;left:12px;top:12px;padding:5px 7px;background:#59d2ee;color:#071116;font:800 9px ui-monospace,monospace}.goods-detection i{position:absolute;border:2px solid #ff6d60;color:#fff;font:800 8px ui-monospace,monospace;padding:3px;background:rgba(255,109,96,.12)}.goods-document{margin:26px;background:#f4f1e8;color:#192027;padding:20px;display:flex;flex-direction:column;box-shadow:0 14px 30px rgba(0,0,0,.18)}.goods-document>span{font:800 8px ui-monospace,monospace;color:#777}.goods-document h3{font-size:25px}.goods-document p{font:500 10px/1.8 ui-monospace,monospace;color:#4d555c}.goods-document button{margin-top:auto;background:#212b32;color:#fff}.goods-pipeline{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:center;gap:7px;padding:18px;border-top:1px solid var(--line)}.goods-pipeline>div{min-height:100px;border:1px solid var(--line);padding:12px;display:grid;align-content:center;gap:4px;transition:.25s}.goods-pipeline>div.done{border-color:#66d39b;background:rgba(102,211,155,.06)}.goods-pipeline>div.warn{border-color:#f2b45f;background:rgba(242,180,95,.07)}.goods-pipeline span{font:800 8px ui-monospace,monospace;color:var(--accent)}.goods-pipeline b{font-size:11px}.goods-pipeline small{font-size:9px;color:var(--muted)}.goods-pipeline>em{font-style:normal;color:var(--muted)}

.application-grid{display:grid;grid-template-columns:340px 1fr;gap:32px;padding:26px}.application-paper{background:#f4f1e8;color:#1d252b;padding:22px;box-shadow:0 16px 34px rgba(0,0,0,.18);min-height:420px;display:flex;flex-direction:column}.application-paper>span{font:800 8px ui-monospace,monospace;color:#777}.application-paper h3{font-size:23px;line-height:1.2}.application-paper dl{display:grid;gap:8px}.application-paper dl div{border-bottom:1px solid #d6d0c4;padding-bottom:6px}.application-paper dt{font-size:8px;color:#777;text-transform:uppercase}.application-paper dd{font-size:11px;margin:3px 0 0}.paper-attachments{display:grid;gap:6px;margin:20px 0}.paper-attachments span{font-size:10px}.application-paper button{margin-top:auto;background:#202830;color:#fff}.application-results{display:grid;align-content:center;gap:8px}.application-results>small{color:var(--muted);font-size:9px;margin-top:14px}.application-check{display:flex;align-items:center;gap:9px;border:1px solid var(--line);padding:11px;background:var(--surface-2)}.application-check i{font-style:normal;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:rgba(102,211,155,.12);color:#66d39b}.application-check.warn i{background:rgba(242,180,95,.12);color:#f2b45f}.application-check span{font-size:11px}

.anomaly-game-head{display:flex;justify-content:space-between;align-items:center;padding:15px 17px;border-bottom:1px solid var(--line)}.anomaly-game-head h3{font-size:22px;margin:3px 0}.anomaly-score{text-align:right}.anomaly-score span{display:block;font-size:8px;color:var(--muted);text-transform:uppercase}.anomaly-score strong{font-size:26px;color:var(--accent)}.anomaly-game-actions{display:flex;justify-content:center;gap:8px;padding:14px}.anomaly-feedback{min-height:52px;padding:13px 17px;border-top:1px solid var(--line);display:flex;gap:9px;align-items:center;font-size:10px;color:var(--muted)}.anomaly-feedback strong.ok{color:#66d39b}.anomaly-feedback strong.bad{color:#ff6d60}

.roi-flow small{font-size:9px;color:var(--muted)}

@media (min-width:901px) and (max-width:1200px){
  body[data-page="demos"]{--project-rail-width:285px;--project-rail-gap:30px}
  body[data-page="demos"] .project-nav-card{width:285px!important}
  body[data-page="demos"] .project-category-link em{font-size:10.5px!important}
  body[data-page="demos"] .project-submenu a{font-size:8.5px!important;min-height:24px!important}
  .demo-overview-categories{grid-template-columns:repeat(3,1fr)!important}
  .network-node,.pbx-node{width:90px}.network-topology,.pbx-route{gap:5px}.quality-results{grid-template-columns:repeat(3,1fr)}.quality-results>div{border-bottom:1px solid var(--line)}
}
@media (max-width:900px){
  body[data-page="demos"] .project-submenu{grid-template-columns:1fr!important}
  .demo-overview-categories{grid-template-columns:1fr!important}
  .challenge-grid,.machine-workbench,.supplier-layout,.pq-layout,.goods-grid,.application-grid{grid-template-columns:1fr}
  .challenge-panel,.machine-diagnosis,.supplier-output,.pq-output{border-left:0;border-top:1px solid var(--line)}
  .quality-results{grid-template-columns:1fr 1fr}.quality-results>div{border-bottom:1px solid var(--line)}
  .machine-fleet{grid-template-columns:1fr 1fr}.machine-controls label,.supplier-controls label,.pq-controls label{grid-template-columns:115px 1fr 60px}
  .network-topology,.pbx-route{display:flex;overflow-x:auto;justify-content:flex-start;padding:24px 14px}.network-node,.pbx-node{min-width:100px}.network-diagnosis{grid-template-columns:1fr}.network-diagnosis>div,.network-diagnosis>ol{border-right:0;border-bottom:1px solid var(--line)}
  .recovery-topology{overflow-x:auto;justify-content:flex-start;padding:24px 14px}.recovery-node{min-width:190px}.automation-builder{grid-template-columns:1fr}.builder-palette{border-right:0;border-bottom:1px solid var(--line);grid-template-columns:repeat(4,1fr)}.builder-palette .demo-mini-label{grid-column:1/-1}.builder-palette button{min-height:42px}.builder-flow{min-height:160px}.goods-pipeline{display:flex;overflow-x:auto}.goods-pipeline>div{min-width:150px}.goods-pipeline>em{min-width:12px}.application-paper{max-width:400px;width:100%;justify-self:center}.wifi-metrics{grid-template-columns:1fr}.wifi-metrics>div{border-right:0;border-bottom:1px solid var(--line)}
}
@media (max-width:600px){
  .challenge-image{min-height:260px}.challenge-panel{padding:20px}.challenge-result{grid-template-columns:1fr}.challenge-result p{grid-column:auto}.quality-toolbar{align-items:flex-start}.quality-stage{aspect-ratio:4/3}.quality-results{grid-template-columns:1fr}.machine-fleet{grid-template-columns:1fr}.machine-controls{padding:18px}.machine-controls label,.supplier-controls label,.pq-controls label{grid-template-columns:1fr;gap:5px}.machine-controls output,.supplier-controls output,.pq-controls output{text-align:left}.risk-ring,.pq-ring{width:140px}.network-faults{align-items:flex-start}.wifi-controls{align-items:stretch}.wifi-controls label{width:100%}.recovery-actions label{margin-left:0;width:100%}.pbx-controls{align-items:flex-start}.builder-palette{grid-template-columns:1fr 1fr}.builder-head{align-items:flex-start;flex-direction:column}.goods-document{margin:14px}.application-grid{padding:16px}.application-paper{min-height:380px}.anomaly-game-actions{display:grid;grid-template-columns:1fr 1fr}.anomaly-game-actions [data-ag-next]{grid-column:1/-1}
}

/* ================= Portfolio v11 · Demo logic & credibility pass ================= */
.demo-model-note{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;border-top:1px solid var(--line);background:color-mix(in srgb,var(--surface-2) 82%,transparent)}
.demo-model-note>span{flex:0 0 auto;font:900 8px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.12em;color:var(--accent);padding-top:3px}
.demo-model-note>p{margin:0;color:var(--muted);font-size:9.5px;line-height:1.55}
.detector-metrics{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.detector-metrics>div{padding:14px 16px;border-right:1px solid var(--line)}.detector-metrics>div:last-child{border-right:0}.detector-metrics span,.supplier-subrisks span,.recovery-metrics span{display:block;font-size:8px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:5px}.detector-metrics strong{font-size:18px}

.feature-explorer-grid{display:grid;grid-template-columns:220px 1fr 1fr 1.08fr;gap:14px;padding:20px;align-items:start}.feature-map-card,.feature-summary{border:1px solid var(--line);background:var(--surface-2);padding:14px;min-height:230px}.feature-map-card>span,.feature-summary>span{display:block;font:800 8px ui-monospace,monospace;letter-spacing:.08em;color:var(--muted);margin-bottom:12px}.feature-map{display:grid;grid-template-columns:repeat(6,1fr);gap:3px;aspect-ratio:1}.feature-map i{display:block;background:var(--accent);opacity:.08;transition:opacity .22s,transform .22s}.feature-map-card>strong{display:block;margin-top:10px;font-size:11px;color:var(--accent)}.feature-summary{display:flex;flex-direction:column;justify-content:center}.feature-summary strong{font-size:20px;line-height:1.12;margin-bottom:10px}.feature-summary small{font-size:10px;line-height:1.55;color:var(--muted)}

.routing-confidence{display:grid;grid-template-columns:auto 70px 1fr auto;gap:10px;align-items:center;padding:12px 16px;border-top:1px solid var(--line);background:var(--surface-2)}.routing-confidence>span{font-size:8px;text-transform:uppercase;color:var(--muted);font-weight:800}.routing-confidence>strong{font-size:13px}.routing-confidence>i{display:block;height:7px;background:var(--accent);width:0;transition:width .35s}.routing-confidence>small{font-size:9px;color:var(--muted)}

.quality-class-picker{display:flex;gap:5px;flex-wrap:wrap}.quality-class-picker button{min-height:28px;border:1px solid var(--line);background:var(--surface-2);color:var(--muted);font-size:8px;font-weight:800;padding:0 8px;cursor:pointer}.quality-class-picker button.active{color:var(--text);border-color:var(--accent);background:var(--accent-soft)}.human-mark span{white-space:nowrap}.human-mark.mark-corrosion{--mark:#f2b45f}.human-mark.mark-scratch{--mark:#59d2ee}.human-mark.mark-dent{--mark:#aa83ff}.human-mark.mark-missing{--mark:#ff6d60}.human-mark{border-color:var(--mark,var(--accent))!important}.human-mark>span{background:var(--mark,var(--accent))!important}

.machine-factor-list{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}.machine-factor-list span{font-size:8.5px;padding:5px 7px;border:1px solid var(--line);background:var(--surface-2);color:var(--muted)}
.supplier-subrisks{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);margin:14px 0}.supplier-subrisks>div{padding:10px;border-right:1px solid var(--line)}.supplier-subrisks>div:last-child{border-right:0}.supplier-subrisks strong{font-size:14px}

.network-node.degraded{border-color:#f2b45f;background:rgba(242,180,95,.08)}.network-node.degraded i,.network-node.degraded small{color:#f2b45f}.network-node.down{border-color:#ff6d60;background:rgba(255,109,96,.09)}.network-node.down i,.network-node.down small{color:#ff6d60}

.wifi-metrics{grid-template-columns:repeat(4,1fr)!important}.wifi-metrics strong b{font:inherit;color:inherit}.wifi-legend span{font-size:8px}

.recovery-actions label:has(select){display:flex;align-items:center;gap:8px}.recovery-actions select{min-height:34px;border:1px solid var(--line);background:var(--surface-2);color:var(--text);padding:0 8px}.recovery-node.unavailable{opacity:.45;border-style:dashed}.recovery-metrics{display:grid;grid-template-columns:1.6fr .7fr .7fr;border-top:1px solid var(--line)}.recovery-metrics>div{padding:12px 16px;border-right:1px solid var(--line)}.recovery-metrics>div:last-child{border-right:0}.recovery-metrics strong{font-size:12px}

.pbx-route{position:relative}.pbx-branch{display:grid;grid-template-columns:auto 1fr 1fr;align-items:center;gap:8px;grid-column:1/-1;margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}.pbx-branch>span{font:800 8px ui-monospace,monospace;color:var(--muted);text-transform:uppercase}.pbx-node.skipped{opacity:.22}.pbx-node.active{border-color:var(--accent);box-shadow:0 0 20px var(--accent-soft)}.pbx-node.done{border-color:#66d39b}.pbx-node.done i{color:#66d39b}

.builder-palette button small{margin-left:auto;font:700 7px ui-monospace,monospace;text-transform:uppercase;color:var(--muted)}.builder-validation{margin:10px 0;padding:9px 11px;border:1px solid rgba(102,211,155,.28);background:rgba(102,211,155,.06);display:flex;gap:5px;flex-wrap:wrap}.builder-validation span{font-size:8.5px;color:#8ee4b6}.builder-validation.invalid{border-color:rgba(255,109,96,.3);background:rgba(255,109,96,.06)}.builder-validation.invalid span{color:#ff9188}

.pq-output>small{display:block;margin-top:10px;color:var(--muted);font-size:9px;line-height:1.5}

.demo-case .case-summary{max-width:900px}.demo-case .demo-widget{box-shadow:0 18px 60px rgba(0,0,0,.12)}
body[data-page="demos"] .case-state.real{background:rgba(102,211,155,.08);color:#8ee4b6}

@media (max-width:1180px){.feature-explorer-grid{grid-template-columns:200px 1fr 1fr}.feature-summary{grid-column:2/4;min-height:auto}.wifi-metrics{grid-template-columns:repeat(2,1fr)!important}}
@media (max-width:900px){.feature-explorer-grid{grid-template-columns:1fr 1fr}.feature-explorer-grid>div:first-child{grid-column:1/-1}.feature-summary{grid-column:1/-1}.detector-metrics,.recovery-metrics{grid-template-columns:1fr}.detector-metrics>div,.recovery-metrics>div{border-right:0;border-bottom:1px solid var(--line)}.supplier-subrisks{grid-template-columns:1fr}.supplier-subrisks>div{border-right:0;border-bottom:1px solid var(--line)}.routing-confidence{grid-template-columns:1fr auto}.routing-confidence>i{grid-column:1/-1}.routing-confidence>small{grid-column:1/-1}.pbx-branch{grid-template-columns:1fr}.pbx-branch>span{margin-bottom:2px}}
@media (max-width:560px){.feature-explorer-grid{grid-template-columns:1fr;padding:12px}.feature-explorer-grid>div:first-child,.feature-summary{grid-column:auto}.feature-map-card{min-height:auto}.wifi-metrics{grid-template-columns:1fr!important}.quality-class-picker{width:100%}.quality-class-picker button{flex:1 1 calc(50% - 5px)}.demo-model-note{display:grid}}
@media (max-width:600px){
  body[data-page="demos"] .project-sidebar{background:var(--bg)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  body[data-page="demos"] .project-nav-card{background:var(--bg)!important}
}
@media (max-width:900px){
  body[data-page="demos"] .project-nav{transform:none!important;left:auto!important;right:auto!important;top:auto!important;height:auto!important;max-height:none!important}
}

/* ================= Portfolio v12 · Clear demo scenarios ================= */
.detector-v12 .demo-bbox{transition:.25s opacity,.25s transform}.detector-v12 .demo-bbox.hidden{opacity:0;transform:scale(.9)}.detector-v12 .demo-bbox>i{display:none;position:absolute;right:-24px;top:50%;font-style:normal;font-size:22px;color:#fff;text-shadow:0 2px 7px #000}.detector-v12 .demo-bbox.tracking>i{display:block}.drone-critical-zone{position:absolute;right:4%;top:25%;width:22%;height:52%;border:1px dashed rgba(255,109,96,.7);background:rgba(255,109,96,.035);pointer-events:none}.drone-critical-zone span{position:absolute;right:0;bottom:0;background:#ff6d60;color:#101318;padding:4px 6px;font:800 8px ui-monospace,monospace}.detector-metrics-v12{grid-template-columns:repeat(4,1fr)}.tracking-table{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line)}.tracking-table>div{padding:12px;border-right:1px solid var(--line);display:grid;gap:3px}.tracking-table>div:last-child{border-right:0}.tracking-table b{color:var(--accent);font:800 9px ui-monospace,monospace}.tracking-table span{font-size:10px;font-weight:800}.tracking-table small{font-size:8px;color:var(--muted)}

.vision-demo-toolbar{display:flex;align-items:end;gap:10px;flex-wrap:wrap;padding:16px;border-bottom:1px solid var(--line);background:var(--surface-2)}.vision-demo-toolbar label{display:grid;gap:5px}.vision-demo-toolbar label span{font-size:8px;color:var(--muted);text-transform:uppercase;font-weight:800}.vision-pipeline-grid{display:grid;grid-template-columns:1.15fr 1fr 1fr 1.05fr;gap:1px;background:var(--line)}.vision-pipeline-grid>div{background:var(--surface);padding:15px;min-height:280px;display:flex;flex-direction:column;gap:10px}.vision-pipeline-grid>div>span{font:800 8px ui-monospace,monospace;color:var(--accent)}.vision-input-card img{width:100%;height:150px;object-fit:cover;border:1px solid var(--line)}.vision-pipeline-grid strong{font-size:12px}.vision-pipeline-grid small{font-size:9px;color:var(--muted);line-height:1.55}.feature-stack{display:grid;grid-template-columns:1fr 1fr;gap:5px;height:150px}.feature-stack i{background:linear-gradient(135deg,#111,#2b3943);opacity:.45;transition:.45s}.feature-stack i:nth-child(2){background:linear-gradient(45deg,#10171d,#5a6e7b)}.feature-stack i:nth-child(3){background:radial-gradient(circle at 70% 30%,#8d68ff,#111 50%)}.feature-stack i:nth-child(4){background:linear-gradient(90deg,#111 20%,#59d2ee 48%,#111 70%)}.feature-stack.active i{opacity:1;filter:contrast(1.25)}.region-preview{height:150px;display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:10px;background:#0b1014}.region-preview em{margin:auto;color:var(--muted)}.region-preview i{border:1px solid #59d2ee;background:rgba(89,210,238,.09);min-height:52px}.region-preview i:nth-child(2n){border-color:#f2b45f;background:rgba(242,180,95,.08)}.vision-probs{display:grid;gap:7px}.vision-probs>div{display:grid;grid-template-columns:70px 1fr 34px;align-items:center;gap:6px;font-size:9px}.vision-probs i{height:6px;background:var(--line);overflow:hidden}.vision-probs b{display:block;height:100%;background:var(--accent)}.vision-probs strong{text-align:right;font-size:9px}

.nn-lab-controls{display:flex;gap:12px;align-items:end;flex-wrap:wrap;padding:16px;background:var(--surface-2);border-bottom:1px solid var(--line)}.nn-lab-controls label{display:grid;gap:5px;min-width:170px}.nn-lab-controls label span{font-size:8px;color:var(--muted);text-transform:uppercase;font-weight:800}.nn-lab-controls input{accent-color:var(--accent)}.nn-lab-controls output{font:800 10px ui-monospace,monospace;color:var(--accent)}.nn-lab-grid{display:grid;grid-template-columns:1.45fr .55fr}.nn-boundary-wrap{padding:16px;border-right:1px solid var(--line)}.nn-boundary-wrap canvas{width:100%;height:auto;border:1px solid var(--line);background:#10151a}.nn-legend{display:flex;gap:14px;padding-top:10px;font-size:8px;color:var(--muted)}.nn-legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px}.nn-legend .a{background:#59d2ee}.nn-legend .b{background:#f2b45f}.nn-legend .region{border-radius:0;background:linear-gradient(90deg,rgba(89,210,238,.5),rgba(242,180,95,.5))}.nn-training-panel{padding:22px;display:grid;align-content:start;gap:12px}.nn-architecture{padding:13px;border:1px solid var(--line);background:var(--surface-2);font:800 13px ui-monospace,monospace;color:var(--accent)}.nn-progress{height:8px;background:var(--line);overflow:hidden}.nn-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#59d2ee,#aa83ff);transition:width .5s}.nn-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}.nn-kpis>div{background:var(--surface-2);padding:9px;display:grid;gap:4px}.nn-kpis span{font-size:7px;color:var(--muted);text-transform:uppercase}.nn-kpis strong{font-size:12px}.nn-training-panel canvas{width:100%;height:auto;border:1px solid var(--line)}.nn-training-panel p{font-size:9px;color:var(--muted);line-height:1.55;margin:0}

.inventory-v12 .challenge-image{min-height:360px}.inventory-v12 .challenge-image img{object-fit:cover}.inventory-estimates{display:grid;grid-template-columns:1fr 1fr;gap:8px}.inventory-estimates label{display:grid;grid-template-columns:34px 1fr;align-items:center;gap:7px}.inventory-estimates label span{font:800 10px ui-monospace,monospace;color:var(--accent)}.inventory-estimates select{min-height:34px}.inventory-comparison{border-top:1px solid var(--line);padding:14px}.inventory-comparison>p{margin:0;color:var(--muted);font-size:10px}.inventory-score{display:flex;align-items:center;gap:14px;padding:12px;border:1px solid var(--line);background:var(--surface-2);margin-bottom:10px}.inventory-score span{font-size:9px;color:var(--muted)}.inventory-score strong{font-size:20px;color:var(--accent)}.inventory-score small{margin-left:auto;font-size:9px;color:var(--muted)}.inventory-rows{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.inventory-rows>div{border:1px solid var(--line);padding:9px;display:grid;grid-template-columns:auto 1fr;gap:3px 7px;font-size:8px}.inventory-rows b{color:var(--accent);grid-row:1/3}.inventory-rows strong{grid-column:1/-1}.inventory-rows strong.ok{color:#66d39b}.inventory-rows strong.warn{color:#f2b45f}

.quality-v12 .quality-box.paint{border-color:#aa83ff}.quality-v12 .quality-box.paint span{background:#aa83ff}.quality-results-v12{grid-template-columns:repeat(4,1fr)}.quality-findings{display:flex;flex-wrap:wrap;gap:6px;padding:12px 15px;border-top:1px solid var(--line)}.quality-findings span{font-size:8px;padding:5px 7px;border:1px solid var(--line);background:var(--surface-2);color:var(--muted)}

.routing-v12-grid{display:grid;grid-template-columns:290px .8fr 1fr;gap:1px;background:var(--line)}.routing-v12-grid>div{background:var(--surface)}.routing-v12 .routing-document{padding:20px;display:flex;flex-direction:column;min-height:420px}.routing-v12 .routing-document>span{font:800 8px ui-monospace,monospace;color:var(--accent)}.routing-v12 .routing-document h3{font-size:24px}.routing-v12 .routing-document p{font-size:10px;line-height:1.75;color:var(--muted)}.route-attachment{display:flex;align-items:center;gap:9px;padding:10px;border:1px solid var(--line);margin:10px 0 20px}.route-attachment i{font-style:normal;background:#ff6d60;color:#fff;padding:6px;font:800 8px ui-monospace,monospace}.route-attachment span{font-size:9px}.route-processing{display:grid;padding:18px;align-content:center;gap:7px}.route-step{border:1px solid var(--line);padding:12px;display:grid;grid-template-columns:28px 1fr;gap:3px 7px;transition:.25s}.route-step span{grid-row:1/3;color:var(--accent);font:800 9px ui-monospace,monospace}.route-step b{font-size:10px}.route-step small{font-size:8px;color:var(--muted)}.route-step.active{border-color:var(--accent);box-shadow:0 0 16px var(--accent-soft)}.route-step.done{background:rgba(102,211,155,.05);border-color:#66d39b}.route-result-panel{padding:20px;display:grid;align-content:start;gap:12px}.route-result-panel h3{font-size:18px}.route-probs{display:grid;gap:6px}.route-probs>div{display:grid;grid-template-columns:86px 1fr 32px;gap:6px;align-items:center;font-size:8px}.route-probs i{height:6px;background:var(--line)}.route-probs i b{display:block;height:100%;background:#66d39b}.route-fields{display:grid;gap:5px}.route-fields span{font-size:9px;padding:7px;border:1px solid var(--line);background:var(--surface-2)}.route-destination{padding:12px;border:1px solid var(--accent);background:var(--accent-soft);display:grid;gap:4px}.route-destination span{font-size:7px;color:var(--muted);text-transform:uppercase}.route-destination strong{font-size:12px}.route-destination small{font-size:8px;color:var(--muted)}

.network-map-v12{padding:18px;background:linear-gradient(180deg,var(--surface),var(--surface-2));border-bottom:1px solid var(--line)}.net-tier{display:flex;justify-content:center;align-items:center;gap:10px;padding-bottom:18px}.net-tier>em{font-style:normal;color:var(--muted);font-size:18px}.net-branches{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.net-branch{border:1px solid var(--line);padding:10px;display:grid;justify-items:center;gap:9px;background:rgba(0,0,0,.08)}.net-branch>b{font:800 8px ui-monospace,monospace;color:var(--muted)}.client-row{display:flex;gap:7px}.network-v12 .network-node{min-width:105px}.network-v12 .network-node.client{min-width:88px}.network-diagnosis-v12{grid-template-columns:1fr 1fr 1fr 1.5fr}.network-diagnosis-v12>ol{grid-column:auto}.network-diagnosis-v12>div,.network-diagnosis-v12>ol{min-height:110px}

.wifi-v12 .wifi-legend{display:flex;flex-wrap:wrap;gap:8px 12px}.wifi-legend .ring-yellow,.wifi-legend .ring-red{background:transparent!important;border:2px dashed #f0d54e!important;border-radius:50%}.wifi-legend .ring-red{border-color:#ff665c!important}

.ransomware-v12 .recovery-node small{font-size:7px;color:var(--muted)}.recovery-topology-v12{grid-template-columns:1fr auto 1fr auto 1fr auto 1fr}.recovery-timeline{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.recovery-timeline>div{background:var(--surface);padding:10px;min-height:86px;display:grid;align-content:center;gap:3px;transition:.25s}.recovery-timeline span{font:800 8px ui-monospace,monospace;color:var(--accent)}.recovery-timeline b{font-size:9px}.recovery-timeline small{font-size:7px;color:var(--muted)}.recovery-timeline>div.active{box-shadow:inset 0 -3px var(--accent);background:var(--accent-soft)}.recovery-timeline>div.done{border-color:#66d39b}.recovery-node.bad{border-color:#ff6d60!important;background:rgba(255,109,96,.07)}.recovery-node.good{border-color:#66d39b!important}.recovery-node.warn{border-color:#f2b45f!important}

.automation-template-tabs{display:flex;gap:1px;background:var(--line);border-bottom:1px solid var(--line)}.automation-template-tabs button{flex:1;border:0;background:var(--surface);color:var(--muted);min-height:44px;font-weight:800;font-size:9px;cursor:pointer}.automation-template-tabs button.active{color:var(--accent);background:var(--accent-soft)}.automation-mail-grid{display:grid;grid-template-columns:300px 1fr 330px;gap:1px;background:var(--line)}.automation-mail-grid>div{background:var(--surface)}.demo-mail-card{padding:20px;display:flex;flex-direction:column;gap:12px}.demo-mail-card>span{font:800 8px ui-monospace,monospace;color:var(--accent)}.mail-meta{display:grid;grid-template-columns:52px 1fr;gap:6px;font-size:9px}.mail-meta b{color:var(--muted)}.mail-meta em{font-style:normal}.demo-mail-card p{font-size:10px;line-height:1.6;color:var(--muted);border:1px solid var(--line);padding:10px;background:var(--surface-2)}.mail-attachment{display:flex;align-items:center;gap:9px;padding:10px;border:1px solid var(--line)}.mail-attachment i{font-style:normal;background:#ff6d60;color:#fff;padding:6px;font:800 8px ui-monospace,monospace}.mail-attachment div{display:grid}.mail-attachment strong{font-size:9px}.mail-attachment small{font-size:7px;color:var(--muted)}.automation-flow-v12{padding:18px;display:grid;align-content:center;gap:6px}.automation-flow-v12>div{border:1px solid var(--line);padding:10px;display:grid;grid-template-columns:30px 1fr auto;gap:3px 7px}.automation-flow-v12 span{grid-row:1/3;font:800 9px ui-monospace,monospace;color:var(--accent)}.automation-flow-v12 b{font-size:10px}.automation-flow-v12 small{font-size:8px;color:var(--muted)}.automation-flow-v12 em{grid-column:3;grid-row:1/3;align-self:center;font-style:normal;font-size:8px;color:var(--muted)}.automation-flow-v12>div.active{border-color:var(--accent);background:var(--accent-soft)}.automation-flow-v12>div.done em{color:#66d39b}.automation-live-panel{padding:18px}.automation-live-panel>div{display:grid;gap:6px;margin-top:10px}.automation-live-panel p{font-size:9px;color:var(--muted)}.automation-live-panel [data-auto-log]>div{display:grid;grid-template-columns:28px 1fr;gap:7px;padding:8px;border:1px solid var(--line);font-size:8px}.automation-live-panel [data-auto-log] b{color:var(--accent)}

.goods-v12-layout{display:grid;grid-template-columns:1.3fr .7fr}.goods-v12 .goods-camera{min-height:380px}.goods-v12 .goods-camera img{object-fit:cover}.goods-doc-stack{padding:14px;display:grid;grid-template-columns:1fr 1fr;gap:10px;background:var(--surface-2)}.goods-v12 .goods-document{margin:0;min-height:230px}.erp-order-card{background:#19242c;color:#eef7fa;padding:20px;display:flex;flex-direction:column}.erp-order-card>span{font:800 8px ui-monospace,monospace;color:#59d2ee}.erp-order-card h3{font-size:24px}.erp-order-card p{font:500 10px/1.8 ui-monospace,monospace;color:#b8c5cc}.goods-doc-stack>button{grid-column:1/-1}.goods-decision{padding:14px;border-top:1px solid var(--line);text-align:center}.goods-decision strong{font-size:12px}.goods-decision strong.ok{color:#66d39b}.goods-decision strong.warn{color:#f2b45f}

.application-v12-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 20px;border-bottom:1px solid var(--line);background:var(--surface-2)}.application-v12-head>div{display:grid;gap:3px}.application-v12-head span{font:800 8px ui-monospace,monospace;color:var(--muted)}.application-v12-head strong{font-size:12px}.application-check-main{min-height:42px}.application-empty-state{padding:20px;border:1px dashed var(--line);display:grid;gap:4px}.application-empty-state b{font-size:12px}.application-empty-state span{font-size:9px;color:var(--muted)}.application-loading{display:flex;gap:10px;align-items:center;padding:16px;border:1px solid var(--line)}.application-loading i{width:16px;height:16px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}.application-check.info i{background:rgba(89,210,238,.12);color:#59d2ee}

.anomaly-inspector-tabs{display:flex;gap:1px;background:var(--line);border-bottom:1px solid var(--line)}.anomaly-inspector-tabs button{flex:1;border:0;background:var(--surface);color:var(--muted);min-height:44px;font-size:9px;font-weight:800;cursor:pointer}.anomaly-inspector-tabs button.active{background:var(--accent-soft);color:var(--accent)}.anomaly-inspector-grid{display:grid;grid-template-columns:1.55fr .45fr}.anomaly-inspector-grid>div:first-child{padding:16px;border-right:1px solid var(--line)}.anomaly-analysis-panel{padding:22px;display:grid;align-content:center;gap:12px}.anomaly-analysis-panel h3{font-size:20px;margin:0}.anomaly-analysis-panel p{font-size:9px;color:var(--muted);line-height:1.6}.anomaly-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}.anomaly-kpis>div{background:var(--surface-2);padding:8px;display:grid;gap:3px}.anomaly-kpis span{font-size:7px;color:var(--muted)}.anomaly-kpis strong{font-size:11px}.anomaly-band-legend{display:flex;gap:12px;font-size:8px;color:var(--muted);padding-top:8px}

@keyframes spin{to{transform:rotate(360deg)}}

@media(max-width:1050px){
  .vision-pipeline-grid{grid-template-columns:1fr 1fr}.nn-lab-grid,.routing-v12-grid,.automation-mail-grid{grid-template-columns:1fr}.nn-boundary-wrap{border-right:0;border-bottom:1px solid var(--line)}.network-diagnosis-v12{grid-template-columns:1fr 1fr}.recovery-timeline{grid-template-columns:repeat(4,1fr)}.goods-v12-layout{grid-template-columns:1fr}.goods-doc-stack{grid-template-columns:1fr 1fr}.tracking-table{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:700px){
  .detector-metrics-v12,.quality-results-v12{grid-template-columns:1fr 1fr}.tracking-table{grid-template-columns:1fr 1fr}.vision-pipeline-grid{grid-template-columns:1fr}.vision-pipeline-grid>div{min-height:auto}.nn-lab-controls{display:grid}.nn-lab-controls label{min-width:0}.inventory-estimates,.inventory-rows{grid-template-columns:1fr}.inventory-score{display:grid}.inventory-score small{margin-left:0}.net-branches{grid-template-columns:1fr}.net-tier{overflow-x:auto;justify-content:flex-start}.network-diagnosis-v12{grid-template-columns:1fr}.recovery-timeline{grid-template-columns:1fr 1fr}.goods-doc-stack{grid-template-columns:1fr}.goods-doc-stack>button{grid-column:auto}.application-v12-head{align-items:stretch;flex-direction:column}.anomaly-inspector-grid{grid-template-columns:1fr}.anomaly-inspector-grid>div:first-child{border-right:0;border-bottom:1px solid var(--line)}.anomaly-inspector-tabs{display:grid;grid-template-columns:1fr 1fr}.automation-template-tabs{display:grid;grid-template-columns:1fr}.routing-tabs{grid-template-columns:1fr 1fr!important}
}


/* v13 project navigation: same strong category treatment as demo rail */
body[data-page="projects"] .project-nav-group-head{background:linear-gradient(90deg,color-mix(in srgb,var(--cat) 15%,var(--surface)),color-mix(in srgb,var(--cat) 3%,var(--surface)))!important;border-left:4px solid var(--cat)!important}
body[data-page="projects"] .project-category-link em{color:var(--cat)!important;font-size:11.5px!important}
body[data-page="projects"] .project-category-link i{display:grid;place-items:center;min-width:25px;height:23px;border-radius:6px;background:color-mix(in srgb,var(--cat) 14%,transparent);font-size:9px!important}
body[data-page="projects"] .project-category-link b{background:color-mix(in srgb,var(--cat) 10%,transparent)!important}
body[data-page="projects"] .project-category-toggle{color:var(--cat)!important;min-width:38px}
body[data-page="projects"] .project-submenu{background:color-mix(in srgb,var(--cat) 3%,transparent)!important;padding:5px 9px 8px!important}
body[data-page="projects"] .project-submenu a{font-size:10.4px!important;min-height:27px!important;padding:5px 7px 5px 18px!important}
body[data-page="projects"] .project-submenu a.active{background:color-mix(in srgb,var(--cat) 16%,transparent)!important;box-shadow:inset 3px 0 0 var(--cat)}

/* Drone multi-sensor project */
.sensor-fusion-visual .fusion-primary{display:grid;gap:12px}.infra-zone.accurate{position:absolute;left:62.2%;top:37.7%;width:14.4%;height:50.2%;border:2px dashed rgba(255,98,86,.78);pointer-events:none}.infra-zone.accurate span{position:absolute;right:3px;bottom:3px;background:#ff6256;color:#111;padding:4px 7px;font:800 9px ui-monospace,monospace}.fusion-status{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:8px}.fusion-status span,.fusion-status strong{padding:9px 10px;border:1px solid var(--line);background:var(--surface-2);font-size:10px}.fusion-status b{color:var(--accent)}.fusion-status strong{color:#72e2a5}.fusion-view-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}.fusion-view{border:1px solid var(--line);background:var(--surface-2);overflow:hidden}.fusion-view>div{position:relative;aspect-ratio:3/2;overflow:hidden}.fusion-view img{width:100%;height:100%;object-fit:cover}.fusion-view>div span{position:absolute;left:8px;bottom:8px;background:rgba(5,9,12,.82);padding:5px 7px;font:800 9px ui-monospace,monospace;color:#fff}.fusion-view p{margin:0;padding:9px 10px;font-size:10px;color:var(--muted);line-height:1.45}

/* Accurate demo infrastructure zone */
.detector-v12 .drone-critical-zone{left:62.2%!important;top:37.7%!important;width:14.4%!important;height:50.2%!important;border-color:#ff6256!important}.detector-v12 .drone-critical-zone span{right:2px!important;bottom:2px!important;top:auto!important}

/* Sensor fusion demo */
.sensor-fusion-toolbar{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}.sensor-fusion-toolbar button{border:1px solid var(--line);background:var(--surface-2);color:var(--muted);padding:9px 12px;cursor:pointer}.sensor-fusion-toolbar button.active{border-color:var(--accent);color:var(--text);background:var(--accent-soft)}.sensor-fusion-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,.8fr);gap:12px}.sensor-main{position:relative;border:1px solid var(--line);background:#071015;min-height:360px;overflow:hidden}.sensor-main img{width:100%;height:100%;min-height:360px;object-fit:cover}.sensor-view-label{position:absolute;left:12px;bottom:12px;background:rgba(4,8,11,.85);border:1px solid rgba(255,255,255,.16);padding:7px 10px;font:800 10px ui-monospace,monospace}.sensor-contribution{border:1px solid var(--line);background:var(--surface-2);padding:18px}.sensor-contribution h3{font-size:24px;margin:7px 0 8px}.sensor-contribution p{color:var(--muted);line-height:1.55}.sensor-kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0}.sensor-kpis>div{padding:10px;border:1px solid var(--line)}.sensor-kpis span{display:block;color:var(--muted);font-size:9px}.sensor-kpis strong{display:block;margin-top:4px}.fusion-result{padding:12px;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));background:color-mix(in srgb,var(--accent) 7%,var(--surface))}.fusion-result span,.fusion-result small{display:block;color:var(--muted);font-size:9px}.fusion-result strong{display:block;margin:5px 0}.fusion-source-strip{display:grid;grid-template-columns:repeat(4,1fr) 1.6fr;gap:7px;margin-top:10px}.fusion-source-strip article,.fusion-source-strip>strong{padding:10px;border:1px solid var(--line);background:var(--surface-2);font-size:10px}.fusion-source-strip article b{display:block;color:var(--accent);margin-bottom:4px}.fusion-source-strip article span{color:var(--muted)}.fusion-source-strip>strong{color:#72e2a5}

/* Transparent-bin inventory challenge */
.inventory-v13 .inventory-camera{position:relative;background:#0c1215}.inventory-v13 .inventory-camera img{width:100%;height:100%;object-fit:contain;background:#11181b}.inventory-ai-overlay{position:absolute;inset:0;pointer-events:none}.inventory-ai-overlay span{position:absolute;transform:translate(-10%,-10%);display:flex;gap:4px;align-items:center;background:rgba(5,14,17,.9);border:1px solid #59d2ee;padding:4px 6px;font:800 9px ui-monospace,monospace;color:#fff}.inventory-ai-overlay em{font-style:normal;color:#72e2a5}.inventory-v13 .challenge-image{min-height:520px}

/* Corporate PBX demo */
.pbx-corporate-layout{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(270px,.75fr);gap:12px}.pbx-route.corporate{display:grid;grid-template-columns:repeat(6,minmax(105px,1fr));gap:8px;align-items:center}.pbx-route.corporate>em{display:none}.pbx-route.corporate .pbx-branch{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr 1fr;gap:8px;align-items:center}.pbx-live{border:1px solid var(--line);background:var(--surface-2);padding:14px;min-height:250px}.pbx-live [data-pbx-trace]{display:grid;gap:5px;margin:10px 0}.pbx-live [data-pbx-trace]>div{display:grid;grid-template-columns:26px 1fr;gap:7px;padding:7px;border-left:2px solid var(--accent);background:var(--surface)}.pbx-live [data-pbx-trace] b{color:var(--accent);font:800 9px ui-monospace,monospace}.pbx-live [data-pbx-trace] span{font-size:10px}.pbx-live .pbx-result{margin-top:14px}

@media(max-width:900px){.fusion-status{grid-template-columns:1fr 1fr}.fusion-status strong{grid-column:1/-1}.fusion-view-grid{grid-template-columns:1fr}.sensor-fusion-grid,.pbx-corporate-layout{grid-template-columns:1fr}.fusion-source-strip{grid-template-columns:1fr 1fr}.fusion-source-strip>strong{grid-column:1/-1}.pbx-route.corporate{grid-template-columns:1fr 1fr}.inventory-v13 .challenge-image{min-height:340px}}

/* ================= Portfolio v14 · Precision & clearer demo flows ================= */
/* Detection: preserve source aspect ratio so percentage boxes align with the image */
.detector-v14 .drone-camera-3x2{aspect-ratio:3/2!important}
.detector-v14 .drone-camera-3x2>img{object-fit:cover!important}
.detector-v14 .drone-critical-zone.v14{left:63.0%!important;top:37.8%!important;width:12.5%!important;height:49.5%!important;background:rgba(255,98,86,.025)!important}
.detector-v14 .drone-critical-zone.v14 span{font-size:7px!important}

/* Project sensor-fusion explanation */
.fusion-pipeline-v14{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:8px;align-items:center;margin-top:2px}
.fusion-pipeline-v14>div{border:1px solid var(--line);background:var(--surface-2);padding:10px;min-height:86px;display:grid;align-content:start;gap:4px}
.fusion-pipeline-v14>div span{font:800 8px ui-monospace,monospace;color:var(--accent)}
.fusion-pipeline-v14>div b{font-size:10px}.fusion-pipeline-v14>div small{font-size:8px;line-height:1.45;color:var(--muted)}
.fusion-pipeline-v14>i{font-style:normal;color:var(--muted)}
.sensor-fusion-visual .infra-zone.accurate{left:63%!important;top:37.8%!important;width:12.5%!important;height:49.5%!important}

/* Interactive sensor fusion */
.fusion-v14-head{display:grid;grid-template-columns:1fr 240px;gap:16px;padding:18px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.fusion-v14-head h3{margin:3px 0 5px;font-size:22px}.fusion-v14-head p{margin:0;color:var(--muted);font-size:10px;line-height:1.55;max-width:840px}
.fusion-score-card{border:1px solid var(--line);background:var(--surface);padding:12px;display:grid;align-content:center;gap:4px}.fusion-score-card span,.fusion-score-card small{font-size:8px;color:var(--muted)}.fusion-score-card strong{color:#72e2a5}
.fusion-v14-controls{display:grid;grid-template-columns:repeat(5,minmax(115px,1fr)) auto;gap:7px;padding:12px;border-bottom:1px solid var(--line)}
.fusion-v14-controls button{min-height:48px;border:1px solid var(--line);background:var(--surface-2);color:var(--muted);padding:8px 10px;text-align:left;cursor:pointer;display:grid;gap:2px}
.fusion-v14-controls button b{font-size:9px}.fusion-v14-controls button span{font-size:7px}.fusion-v14-controls button.active{border-color:var(--accent);background:var(--accent-soft);color:var(--text)}
.fusion-v14-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,.6fr);gap:1px;background:var(--line)}
.fusion-stage-v14{position:relative;aspect-ratio:3/2;background:#04080b;overflow:hidden}.fusion-stage-v14>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.fusion-thermal-layer{opacity:.72;mix-blend-mode:screen}
.fusion-box-layer,.fusion-radar-layer,.fusion-lidar-layer,.fusion-zone-layer{position:absolute;inset:0;pointer-events:none}.fusion-box-layer[hidden],.fusion-radar-layer[hidden],.fusion-lidar-layer[hidden],.fusion-zone-layer[hidden],.fusion-thermal-layer[hidden]{display:none!important}
.fusion-radar-layer>i{position:absolute;width:32px;height:32px;border:2px solid #44e4dc;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 8px rgba(68,228,220,.08)}
.fusion-radar-layer>i::after{content:"";position:absolute;inset:50% auto auto 50%;width:56px;height:1px;background:#44e4dc;transform-origin:left;transform:rotate(-28deg)}
.fusion-radar-layer>i span{position:absolute;left:30px;top:-15px;color:#69fff5;font:800 8px ui-monospace,monospace;white-space:nowrap}
.fusion-lidar-layer>i{position:absolute;width:4px;height:4px;border-radius:50%;background:#55ff9f;box-shadow:0 0 7px #55ff9f;transform:translate(-50%,-50%)}
.fusion-zone-layer{left:63%;top:37.8%;width:12.5%;height:49.5%;border:2px dashed #ff6256;background:rgba(255,98,86,.035)}.fusion-zone-layer span{position:absolute;right:3px;bottom:3px;background:#ff6256;color:#111;padding:4px 6px;font:800 7px ui-monospace,monospace}
.fusion-stage-hud{position:absolute;left:12px;right:12px;top:10px;z-index:8;display:flex;justify-content:space-between;color:white;font:800 8px ui-monospace,monospace;text-shadow:0 2px 6px #000}
.fusion-v14-side{background:var(--surface);padding:16px;display:grid;align-content:start;gap:12px}.fusion-contrib-list{display:grid;gap:5px}.fusion-contrib-list>div{border:1px solid var(--line);padding:9px;display:grid;gap:3px;opacity:.45}.fusion-contrib-list>div.on{opacity:1;border-color:color-mix(in srgb,var(--accent) 55%,var(--line));background:var(--accent-soft)}.fusion-contrib-list b{font-size:9px;color:var(--accent)}.fusion-contrib-list span{font-size:8px;color:var(--muted);line-height:1.4}
.fusion-track-card{border:1px solid var(--line);padding:12px;background:var(--surface-2)}.fusion-track-card span{font-size:7px;color:var(--muted)}.fusion-track-card strong{display:block;margin:5px 0}.fusion-track-card p{font-size:9px;color:var(--muted);line-height:1.5;margin:0}
.fusion-v14-thumbnails{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line)}.fusion-v14-thumbnails article{background:var(--surface);display:grid;grid-template-columns:150px 1fr;min-height:110px}.fusion-v14-thumbnails img{width:100%;height:100%;object-fit:cover}.fusion-v14-thumbnails div{padding:10px}.fusion-v14-thumbnails b{display:block;font-size:9px}.fusion-v14-thumbnails span{font-size:8px;color:var(--muted);line-height:1.4}

/* Inventory challenge */
.inventory-v14 .challenge-image{min-height:470px}.inventory-v14 .inventory-camera img{object-fit:contain!important;background:#11181b}.inventory-v14-grid{grid-template-columns:minmax(0,1.55fr) minmax(300px,.55fr)}
.inventory-v14 .inventory-ai-overlay span{transform:translate(0,0);font-size:8px;padding:4px 6px}.inventory-v14 .inventory-ai-overlay em{white-space:nowrap}
.inventory-table-head{display:grid;grid-template-columns:72px 1fr 1.2fr 1.2fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:8px}.inventory-table-head span{background:var(--surface-2);padding:7px;font-size:7px;color:var(--muted);text-transform:uppercase}
.inventory-rows-v14{display:grid;gap:5px;margin-top:6px}.inventory-row-v14{border:1px solid var(--line);padding:8px;display:grid;grid-template-columns:55px 75px 50px 75px 50px 75px 50px 75px 50px;gap:6px;align-items:center;font-size:8px}.inventory-row-v14>b{color:var(--accent);font:800 10px ui-monospace,monospace}.inventory-row-v14>span{color:var(--muted)}.inventory-row-v14>strong{font-size:9px}.inventory-row-v14>em{grid-column:1/-1;font-style:normal;color:#72e2a5;border-top:1px dashed var(--line);padding-top:5px}

/* Quality: more categories / smaller boxes */
.quality-v14 .quality-box{border-width:2px}.quality-v14 .quality-box span{font-size:7px;top:-19px}.quality-v14 .quality-box.paint{border-color:#aa83ff}.quality-v14 .quality-box.paint span{background:#aa83ff;color:#fff}.quality-v14 .quality-box.dent{border-color:#f2b45f}.quality-v14 .quality-box.scratch{border-color:#59d2ee}.quality-v14 .quality-box.corrosion{border-color:#66d39b}

/* Advanced routing replaces duplicate automation builder */
.routing-v14-grid{display:grid;grid-template-columns:300px .72fr 1fr;gap:1px;background:var(--line)}.routing-v14-grid>div{background:var(--surface)}.route-processing.v14{grid-template-columns:1fr;align-content:stretch;padding:14px}.route-processing.v14 .route-step{min-height:65px}.route-system-check,.route-action-log{display:grid;gap:5px}.route-system-check span,.route-action-log div,.route-action-log>span{padding:7px 8px;border:1px solid var(--line);background:var(--surface-2);font-size:8px;color:var(--muted)}.route-action-log div{display:grid;grid-template-columns:26px 1fr;gap:6px}.route-action-log b{color:var(--accent);font:800 8px ui-monospace,monospace}

/* Goods receipt: image and count must agree */
.goods-v14-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(330px,.65fr);gap:1px;background:var(--line)}.goods-v14-layout>div{background:var(--surface)}.goods-v14 .goods-camera{min-height:500px}.goods-v14 .goods-camera img{width:100%;height:100%;object-fit:contain;background:#202629}.goods-doc-stack.v14{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);padding:0}.goods-doc-stack.v14>*{background:var(--surface);margin:0}.open-carton-check{grid-column:1/-1;padding:14px;border-top:1px solid var(--line);display:grid;gap:4px}.open-carton-check span{font:800 8px ui-monospace,monospace;color:var(--accent)}.open-carton-check strong{font-size:18px}.open-carton-check small{font-size:8px;color:var(--muted)}.goods-doc-stack.v14>button{grid-column:1/-1;margin:12px;min-height:48px}.goods-process.v14{grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr auto 1fr}.goods-process.v14>div{min-width:0}

/* WLAN: leave enough space around the building for almost complete reference rings */
.wifi-v14 .wifi-canvas-wrap{background:#071015;padding:6px}.wifi-v14 canvas{width:100%;height:auto;max-height:none!important}.wifi-v14 .wifi-legend{position:static!important;margin:6px 8px 2px;padding:7px;background:var(--surface-2);border:1px solid var(--line)}

/* Anomaly Inspector: visual highlight legend */
.anomaly-inspector .anomaly-band-legend span:last-child::after{content:" · rote Fläche/Punkte = markierte Anomalie";color:#ff776d}

/* Projects navigator: make category colors as obvious as the demo navigator */
body[data-page="projects"] .project-nav-card{border-color:rgba(255,255,255,.12)!important}
body[data-page="projects"] .project-nav-group{border-bottom:1px solid color-mix(in srgb,var(--cat) 24%,var(--line))!important}
body[data-page="projects"] .project-nav-group-head{background:linear-gradient(90deg,color-mix(in srgb,var(--cat) 24%,var(--surface)),color-mix(in srgb,var(--cat) 5%,var(--surface)))!important;border-left:5px solid var(--cat)!important}
body[data-page="projects"] .project-category-link em{color:color-mix(in srgb,var(--cat) 82%,#fff)!important;font-size:12px!important;font-weight:850!important}
body[data-page="projects"] .project-category-link i{background:var(--cat)!important;color:#071015!important;font-weight:900!important;box-shadow:0 0 16px color-mix(in srgb,var(--cat) 24%,transparent)}
body[data-page="projects"] .project-category-link b{border:1px solid color-mix(in srgb,var(--cat) 55%,var(--line))!important;color:var(--cat)!important}
body[data-page="projects"] .project-submenu{background:linear-gradient(90deg,color-mix(in srgb,var(--cat) 7%,var(--surface)),var(--surface))!important}
body[data-page="projects"] .project-submenu a::before{content:"";position:absolute;left:7px;width:5px;height:5px;border-radius:50%;background:color-mix(in srgb,var(--cat) 55%,transparent)}
body[data-page="projects"] .project-submenu a{position:relative!important;color:color-mix(in srgb,var(--muted) 88%,var(--cat))!important}
body[data-page="projects"] .project-submenu a:hover{color:#fff!important;background:color-mix(in srgb,var(--cat) 10%,transparent)!important}
body[data-page="projects"] .project-submenu a.active{color:#fff!important;background:color-mix(in srgb,var(--cat) 20%,transparent)!important;box-shadow:inset 4px 0 0 var(--cat)!important}

@media(max-width:1050px){
  .fusion-v14-head,.fusion-v14-grid,.inventory-v14-grid,.routing-v14-grid,.goods-v14-layout{grid-template-columns:1fr}
  .fusion-v14-controls{grid-template-columns:1fr 1fr 1fr}.fusion-v14-thumbnails{grid-template-columns:1fr}.fusion-v14-thumbnails article{grid-template-columns:120px 1fr}
  .fusion-pipeline-v14{grid-template-columns:1fr 1fr}.fusion-pipeline-v14>i{display:none}
  .goods-process.v14{grid-template-columns:1fr 1fr 1fr}.goods-process.v14>em{display:none}
}
@media(max-width:700px){
  .fusion-v14-controls{grid-template-columns:1fr 1fr}.fusion-v14-head{padding:14px}.fusion-v14-grid{grid-template-columns:1fr}.fusion-v14-thumbnails article{grid-template-columns:100px 1fr}
  .inventory-v14 .challenge-image{min-height:300px}.inventory-row-v14{grid-template-columns:46px 1fr 55px;gap:4px}.inventory-row-v14>span:nth-of-type(n){grid-column:2}.inventory-row-v14>strong{grid-column:3}.inventory-table-head{display:none}
  .goods-v14 .goods-camera{min-height:300px}.goods-doc-stack.v14{grid-template-columns:1fr}.open-carton-check,.goods-doc-stack.v14>button{grid-column:auto}.goods-process.v14{grid-template-columns:1fr 1fr}
  .routing-v14-grid{grid-template-columns:1fr}.route-processing.v14{padding:10px}
}
.inventory-v14-grid{align-items:start}.inventory-v14 .challenge-image{aspect-ratio:40/21;min-height:0!important}.fusion-rgb-base{transition:opacity .2s}


/* =========================
   v15 precision demo pass
   ========================= */

/* Project navigator: force per-category colors after generic --cat declarations. */
body[data-page="projects"] .project-nav-group.cat-software{--cat:#aa83ff!important}
body[data-page="projects"] .project-nav-group.cat-ai{--cat:#59d2ee!important}
body[data-page="projects"] .project-nav-group.cat-operations{--cat:#f2b45f!important}
body[data-page="projects"] .project-nav-group.cat-public{--cat:#66d39b!important}
body[data-page="projects"] .project-nav-group.cat-infrastructure{--cat:#6ea8ff!important}
body[data-page="projects"] .project-nav-group-head{
  background:linear-gradient(90deg,color-mix(in srgb,var(--cat) 25%,#15181b),color-mix(in srgb,var(--cat) 6%,#15181b))!important;
  border-left:5px solid var(--cat)!important;
}
body[data-page="projects"] .project-category-link em{color:color-mix(in srgb,var(--cat) 88%,#fff)!important}
body[data-page="projects"] .project-category-link i{background:var(--cat)!important;color:#071015!important}
body[data-page="projects"] .project-submenu{
  background:linear-gradient(90deg,color-mix(in srgb,var(--cat) 7%,#121519),#121519)!important;
}
body[data-page="projects"] .project-submenu a::before{background:var(--cat)!important;opacity:.85!important}
body[data-page="projects"] .project-submenu a.active{
  background:color-mix(in srgb,var(--cat) 19%,transparent)!important;
  box-shadow:inset 4px 0 0 var(--cat)!important
}

/* Drone tracking trajectories. */
.detector-v15 .demo-camera-frame{position:relative}
.detector-v15 .demo-bbox{z-index:7}
.detector-v15 .drone-critical-zone.v15{
  left:63.0%!important;top:37.8%!important;width:12.5%!important;height:49.5%!important;
  background:rgba(255,98,86,.025)!important;z-index:4
}
.tracking-trajectories{position:absolute;inset:0;width:100%;height:100%;z-index:6;pointer-events:none;overflow:visible}
.tracking-trajectories path{fill:none;stroke:#5ee6ff;stroke-width:.22;stroke-dasharray:1.1 1.15;vector-effect:non-scaling-stroke;animation:v15-track-dash 1.15s linear infinite;filter:drop-shadow(0 0 2px rgba(94,230,255,.8))}
.tracking-trajectories marker path{fill:#5ee6ff;stroke:none;animation:none}
.tracking-trajectories circle{fill:#fff;stroke:#5ee6ff;stroke-width:.15;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 3px #5ee6ff)}
.tracking-trajectories text{fill:rgba(255,255,255,.82);font:700 1.05px ui-monospace,monospace;letter-spacing:.08em}
@keyframes v15-track-dash{to{stroke-dashoffset:-4.5}}

/* Inventory challenge: two independent guesses. */
.inventory-estimates-v15{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.inventory-guess{border:1px solid var(--line);background:var(--surface-2);padding:9px;display:grid;grid-template-columns:32px 1fr 1fr;gap:8px;align-items:end}
.inventory-guess>b{color:var(--accent);font:900 11px ui-monospace,monospace;align-self:center}
.inventory-guess label{display:grid!important;grid-template-columns:1fr!important;gap:4px!important}
.inventory-guess label span{font-size:7px!important;color:var(--muted)!important;text-transform:uppercase}
.inventory-guess input,.inventory-guess select{width:100%;min-height:34px;background:var(--surface);border:1px solid var(--line);color:var(--text);padding:6px 8px}
.inventory-score-v15{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);padding:0;margin-bottom:10px}
.inventory-score-v15>div{background:var(--surface-2);padding:10px;display:grid;gap:4px}
.inventory-score-v15 span{font-size:8px;color:var(--muted);text-transform:uppercase}
.inventory-score-v15 strong{font-size:14px;color:var(--accent)}
.inventory-row-v15{display:grid;grid-template-columns:42px 35px 1fr 35px 1fr 35px 1fr;gap:7px;align-items:center;border:1px solid var(--line);padding:8px 9px;margin-bottom:5px;font-size:8px;background:var(--surface-2)}
.inventory-row-v15>b{color:var(--accent);font:900 10px ui-monospace,monospace}
.inventory-row-v15>span{color:var(--muted);text-transform:uppercase;font-size:7px}
.inventory-row-v15>strong{font-size:9px}
.inventory-row-v15>em{grid-column:2/-1;color:var(--muted);font-style:normal;font-size:7px}

/* Quality demo refinements. */
.quality-v15 .quality-box{border-width:2px}
.quality-v15 .quality-box span{font-size:7px;top:-19px}
.quality-v15 .quality-box.paint{border-color:#aa83ff}.quality-v15 .quality-box.paint span{background:#aa83ff;color:#fff}
.quality-v15 .quality-box.dent{border-color:#f2b45f}.quality-v15 .quality-box.dent span{background:#f2b45f}
.quality-v15 .quality-box.scratch{border-color:#59d2ee}.quality-v15 .quality-box.scratch span{background:#59d2ee}
.quality-v15 .quality-box.corrosion{border-color:#66d39b}.quality-v15 .quality-box.corrosion span{background:#66d39b}
.quality-process-v15{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:stretch;gap:6px;padding:12px;border-top:1px solid var(--line);background:var(--surface-2)}
.quality-process-v15>div{border:1px solid var(--line);padding:10px;display:grid;gap:3px;min-height:65px}
.quality-process-v15 b{color:var(--accent);font:900 8px ui-monospace,monospace}
.quality-process-v15 span{font-size:10px;font-weight:800}
.quality-process-v15 small{font-size:8px;color:var(--muted)}
.quality-process-v15>i{align-self:center;color:var(--muted);font-style:normal}

/* Wi-Fi planner: true free-space canvas and drawing modes. */
.wifi-v15 .wifi-canvas-wrap{background:#071015;padding:6px}
.wifi-v15 canvas{width:100%;height:auto;touch-action:none;cursor:crosshair}
.wifi-v15 .wifi-legend{position:static!important;margin:6px 8px 2px;padding:7px;background:var(--surface-2);border:1px solid var(--line)}
.wifi-action-hint{align-self:center;padding:8px 10px;border:1px dashed var(--line);color:var(--muted);font-size:8px;min-width:220px}

/* Enterprise PBX + AI reception. */
.pbx-controls-v15{display:grid;grid-template-columns:repeat(5,minmax(140px,1fr));align-items:end}
.pbx-controls-v15 label{display:grid;gap:5px;min-height:40px}
.pbx-controls-v15 label:has(input[type="checkbox"]){display:flex;align-items:center}
.pbx-controls-v15 select{min-height:34px;background:var(--surface);border:1px solid var(--line);color:var(--text);padding:6px 8px}
.pbx-enterprise-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(280px,.65fr);gap:12px}
.pbx-main{display:grid;gap:10px}
.enterprise-route{display:grid!important;grid-template-columns:repeat(7,minmax(92px,1fr))!important;gap:7px!important;padding:18px!important}
.enterprise-route>em{display:none}
.enterprise-route .pbx-node{width:auto!important;min-width:0;min-height:94px}
.enterprise-route .ai-node{border-color:color-mix(in srgb,#aa83ff 55%,var(--line))}
.pbx-ai-services{border:1px solid var(--line);background:var(--surface-2);padding:12px;display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.pbx-ai-services>.demo-mini-label{grid-column:1/-1}
.pbx-ai-services>div{border:1px solid var(--line);background:var(--surface);padding:9px;display:grid;grid-template-columns:42px 1fr;gap:2px 7px;opacity:.42;transition:.2s}
.pbx-ai-services>div i{grid-row:1/3;font:900 8px ui-monospace,monospace;color:#aa83ff;border:1px solid color-mix(in srgb,#aa83ff 45%,var(--line));display:grid;place-items:center}
.pbx-ai-services>div b{font-size:9px}
.pbx-ai-services>div small{font-size:7px;color:var(--muted)}
.pbx-ai-services>div.planned{opacity:.78;border-color:color-mix(in srgb,#aa83ff 38%,var(--line))}
.pbx-ai-services>div.active{opacity:1;background:color-mix(in srgb,#aa83ff 12%,var(--surface));box-shadow:0 0 18px rgba(170,131,255,.12)}
.pbx-ai-services>div.done{opacity:1;border-color:#66d39b}.pbx-ai-services>div.done i{color:#66d39b;border-color:#66d39b}
.enterprise-fallback{display:grid!important;grid-template-columns:auto 1fr 1fr!important;padding:10px 14px!important;margin:0!important}
.pbx-live{max-height:560px;overflow:auto}
.pbx-live [data-pbx-trace]>div.ai-trace{border-left-color:#aa83ff;background:color-mix(in srgb,#aa83ff 8%,var(--surface))}
.pbx-result{display:grid!important;grid-template-columns:1fr!important}
.pbx-result small{color:var(--muted);font-size:8px;line-height:1.45}

@media(max-width:1100px){
  .pbx-controls-v15{grid-template-columns:repeat(3,minmax(140px,1fr))}
  .pbx-enterprise-layout{grid-template-columns:1fr}
  .enterprise-route{grid-template-columns:repeat(4,minmax(100px,1fr))!important}
}
@media(max-width:700px){
  .inventory-estimates-v15,.inventory-score-v15{grid-template-columns:1fr}
  .inventory-guess{grid-template-columns:30px 1fr}
  .inventory-guess label:last-child{grid-column:2}
  .inventory-row-v15{grid-template-columns:40px 1fr 1fr;gap:5px}
  .inventory-row-v15>span{display:none}
  .inventory-row-v15>strong{font-size:8px}
  .inventory-row-v15>em{grid-column:2/-1}
  .quality-process-v15{display:flex;overflow-x:auto}
  .quality-process-v15>div{min-width:150px}.quality-process-v15>i{min-width:15px}
  .pbx-controls-v15{grid-template-columns:1fr 1fr}
  .enterprise-route{display:flex!important;overflow-x:auto;padding:14px!important}
  .enterprise-route .pbx-node{min-width:130px}
  .pbx-ai-services{grid-template-columns:1fr 1fr}
}


/* =========================
   v15.1 visual precision & routing polish
   ========================= */
.detector-v15 .drone-camera-3x2{aspect-ratio:3/2!important}
.detector-v15 .drone-camera-3x2>img{object-fit:cover!important}
@media(max-width:600px){.quality-stage{aspect-ratio:3/2!important}}

/* Project navigator: intentionally vivid category separation, equal to demo navigator. */
body[data-page="projects"] .project-nav-group.cat-software{--cat:#a978ff!important}
body[data-page="projects"] .project-nav-group.cat-ai{--cat:#42d6f2!important}
body[data-page="projects"] .project-nav-group.cat-operations{--cat:#ffb24f!important}
body[data-page="projects"] .project-nav-group.cat-public{--cat:#5ee09a!important}
body[data-page="projects"] .project-nav-group.cat-infrastructure{--cat:#5a9cff!important}
body[data-page="projects"] .project-nav-group-head{
  background:linear-gradient(90deg,color-mix(in srgb,var(--cat) 34%,#15181b),color-mix(in srgb,var(--cat) 9%,#15181b))!important;
  border-left:6px solid var(--cat)!important;
}
body[data-page="projects"] .project-category-link i{
  background:var(--cat)!important;color:#071015!important;
  box-shadow:0 0 18px color-mix(in srgb,var(--cat) 38%,transparent)!important
}
body[data-page="projects"] .project-category-link em{color:color-mix(in srgb,var(--cat) 93%,#fff)!important}
body[data-page="projects"] .project-category-link b{color:var(--cat)!important;border-color:color-mix(in srgb,var(--cat) 70%,#333)!important}
body[data-page="projects"] .project-category-toggle .rail-chevron{border-color:var(--cat)!important}
body[data-page="projects"] .project-submenu{
  background:linear-gradient(90deg,color-mix(in srgb,var(--cat) 11%,#111519),#111519 72%)!important
}
body[data-page="projects"] .project-submenu a::before{background:var(--cat)!important;box-shadow:0 0 7px color-mix(in srgb,var(--cat) 50%,transparent)!important}
body[data-page="projects"] .project-submenu a.active{
  color:#fff!important;background:color-mix(in srgb,var(--cat) 23%,transparent)!important;
  box-shadow:inset 4px 0 0 var(--cat)!important
}

/* More readable quality labels while using smaller, more precise regions. */
.quality-v15 .quality-box span{font-size:7px;max-width:170px;overflow:hidden;text-overflow:ellipsis}
.quality-v15 .quality-box{box-shadow:0 0 0 1px rgba(0,0,0,.28),0 0 12px rgba(0,0,0,.18)}

/* Corporate AI PBX governance panel */
.pbx-audit{margin-top:12px;border:1px solid color-mix(in srgb,#aa83ff 35%,var(--line));background:color-mix(in srgb,#aa83ff 7%,var(--surface-2));padding:10px;display:grid;gap:4px}
.pbx-audit span{font:900 8px ui-monospace,monospace;color:#aa83ff;letter-spacing:.08em}
.pbx-audit small{font-size:8px;color:var(--muted);line-height:1.45}

/* =========================
   v16 clarity + interaction pass
   ========================= */
/* Project navigator: inline --cat from JS is authoritative. */
body[data-page="projects"] .project-nav-group{--cat:#ff7143}
body[data-page="projects"] .project-nav-group-head{border-left-color:var(--cat)!important;background:linear-gradient(90deg,color-mix(in srgb,var(--cat) 32%,#16181b),color-mix(in srgb,var(--cat) 7%,#121519))!important}
body[data-page="projects"] .project-category-link i{background:var(--cat)!important;color:#071015!important}
body[data-page="projects"] .project-category-link em,body[data-page="projects"] .project-category-link b{color:var(--cat)!important}
body[data-page="projects"] .project-submenu{background:linear-gradient(90deg,color-mix(in srgb,var(--cat) 10%,#111519),#111519 76%)!important}
body[data-page="projects"] .project-submenu a::before{background:var(--cat)!important}

/* Drone flight prediction appears only after user activates tracking. */
.tracking-trajectories .track-flight-path{fill:none;stroke:#55e6ff;stroke-width:.32;vector-effect:non-scaling-stroke;stroke-linecap:round;filter:drop-shadow(0 0 3px rgba(85,230,255,.85));stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.tracking-trajectories.is-animating .track-flight-path{animation:v16-flight-draw .85s cubic-bezier(.2,.8,.2,1) forwards,v16-flight-flow 1.5s linear .85s infinite}
.tracking-trajectories .track-flight-label{fill:#e8fbff;font:800 1.05px ui-monospace,monospace;paint-order:stroke;stroke:#071015;stroke-width:.35;opacity:0}
.tracking-trajectories.is-animating .track-flight-label{animation:v16-flight-label .25s ease .7s forwards}
.tracking-trajectories .track-caption{fill:rgba(255,255,255,.82);font:800 1.05px ui-monospace,monospace;letter-spacing:.07em}
@keyframes v16-flight-draw{0%{stroke-dashoffset:1;opacity:.25}100%{stroke-dashoffset:0;opacity:1}}
@keyframes v16-flight-flow{0%,100%{filter:drop-shadow(0 0 2px rgba(85,230,255,.65))}50%{filter:drop-shadow(0 0 6px rgba(85,230,255,1))}}
@keyframes v16-flight-label{to{opacity:1}}

/* Inventory challenge: calm two-part layout and readable result cards. */
.inventory-v16-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(320px,.65fr);gap:1px;background:var(--line)}
.inventory-v16-layout>*{background:var(--surface)}
.inventory-v16-camera{aspect-ratio:16/9;min-height:0!important}
.inventory-v16-camera img{width:100%;height:100%;object-fit:contain;background:#11181b}
.inventory-focus-layer{position:absolute;inset:0;pointer-events:none}
.inventory-focus-layer>span{position:absolute;transform:translate(-2px,-2px);display:grid;place-items:center;min-width:28px;height:22px;padding:0 6px;border:1px solid rgba(255,255,255,.45);background:rgba(7,15,20,.82);color:#fff;font:900 9px ui-monospace,monospace;box-shadow:0 4px 14px rgba(0,0,0,.24)}
.inventory-v16-panel{padding:22px;display:flex;flex-direction:column;gap:14px}
.inventory-v16-panel h3{font-size:21px;margin:0}.inventory-v16-panel p{font-size:10px;line-height:1.6;color:var(--muted);margin:0}
.inventory-v16-inputs{display:grid;gap:7px}
.inventory-v16-guess{display:grid;grid-template-columns:46px 1fr 1fr;gap:8px;align-items:end;border:1px solid var(--line);background:var(--surface-2);padding:9px}
.inventory-v16-guess>strong{height:38px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 14%,transparent);border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));color:var(--accent);font:900 11px ui-monospace,monospace}
.inventory-v16-guess label{display:grid;gap:4px}.inventory-v16-guess label span{font-size:7px;color:var(--muted);text-transform:uppercase}.inventory-v16-guess select,.inventory-v16-guess input{width:100%;min-height:38px;background:var(--surface);border:1px solid var(--line);color:var(--text);padding:6px 8px}
.inventory-v16-results{padding:14px;border-top:1px solid var(--line);background:var(--surface-2)}
.inventory-v16-empty{min-height:64px;border:1px dashed var(--line);display:grid;place-content:center;text-align:center;gap:4px;color:var(--muted)}.inventory-v16-empty b{color:var(--text)}
.inventory-result-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);margin-bottom:10px}.inventory-result-summary>div{background:var(--surface);padding:10px;display:grid;gap:3px}.inventory-result-summary span{font-size:7px;color:var(--muted);text-transform:uppercase}.inventory-result-summary strong{font-size:12px;color:var(--accent)}
.inventory-result-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.inventory-result-card{border:1px solid var(--line);background:var(--surface);padding:9px;display:grid;gap:6px}.inventory-result-card header{display:flex;align-items:center;justify-content:space-between}.inventory-result-card header b{color:var(--accent);font:900 11px ui-monospace,monospace}.inventory-result-card header span{font-size:7px;color:#66d39b}.inventory-result-card>div{display:grid;gap:2px;padding-top:5px;border-top:1px solid var(--line)}.inventory-result-card>div span{font-size:7px;color:var(--muted);text-transform:uppercase}.inventory-result-card>div strong{font-size:10px}.inventory-result-card>div.ai strong{color:#59d2ee}.inventory-result-card>div.actual strong{color:#66d39b}.inventory-result-card small{font-size:7px;color:var(--muted)}

/* Quality: new crack class + cleaner grouped regions. */
.quality-v15 .quality-box.crack{border-color:#ff665c}.quality-v15 .quality-box.crack span{background:#ff665c;color:#fff}

/* Goods receipt: true modern pipeline instead of unstyled free-flow text. */
.goods-process.v16{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;padding:18px;background:linear-gradient(180deg,var(--surface-2),var(--surface));border-top:1px solid var(--line);overflow:hidden}
.goods-process.v16::before{content:"";position:absolute;left:7%;right:7%;top:41px;height:2px;background:linear-gradient(90deg,rgba(89,210,238,.18),rgba(170,131,255,.22));z-index:0}
.goods-process.v16>em{display:none}.goods-process.v16>div{position:relative;z-index:1;min-height:116px;border:1px solid var(--line);background:rgba(15,20,24,.96);padding:12px 10px;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto 1fr;gap:4px 8px;align-content:start;transition:.25s;box-shadow:0 8px 24px rgba(0,0,0,.12)}
.goods-process.v16>div>i{grid-row:1/3;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#101b20;border:1px solid #28414c;color:#59d2ee;font:900 7px ui-monospace,monospace}.goods-process.v16>div>span{font:900 7px ui-monospace,monospace;color:var(--accent);letter-spacing:.08em}.goods-process.v16>div>b{font-size:10px;line-height:1.2}.goods-process.v16>div>small{grid-column:1/-1;margin-top:6px;padding-top:7px;border-top:1px solid var(--line);font-size:8px;line-height:1.35;color:var(--muted)}
.goods-process.v16>div.active{border-color:#59d2ee;background:linear-gradient(135deg,rgba(89,210,238,.11),rgba(15,20,24,.96));box-shadow:0 0 0 1px rgba(89,210,238,.15),0 0 28px rgba(89,210,238,.12)}.goods-process.v16>div.active>i{background:#59d2ee;color:#071015;animation:v16-ai-pulse .85s ease infinite alternate}.goods-process.v16>div.done{border-color:#66d39b}.goods-process.v16>div.done>i{border-color:#66d39b;color:#66d39b}.goods-process.v16>div.warn{border-color:#f2b45f}.goods-process.v16>div.warn>i{border-color:#f2b45f;color:#f2b45f}
@keyframes v16-ai-pulse{to{box-shadow:0 0 16px rgba(89,210,238,.65)}}
.goods-decision{background:linear-gradient(90deg,rgba(170,131,255,.04),rgba(89,210,238,.04))}

/* Wi-Fi: computed heatmap is primary; reference circles are secondary. */
.wifi-v15 .wifi-canvas-wrap{box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)}
.wifi-metrics-v16{grid-template-columns:repeat(5,1fr)!important}
.wifi-metrics-v16>div:last-child strong{color:#59d2ee;font-size:11px}

@media(max-width:1050px){
  .inventory-v16-layout{grid-template-columns:1fr}.inventory-result-grid{grid-template-columns:1fr 1fr}.wifi-metrics-v16{grid-template-columns:repeat(2,1fr)!important}
  .goods-process.v16{grid-template-columns:repeat(3,1fr)}.goods-process.v16::before{display:none}
}
@media(max-width:650px){
  .inventory-v16-guess{grid-template-columns:42px 1fr}.inventory-v16-guess label:last-child{grid-column:2}.inventory-result-summary,.inventory-result-grid{grid-template-columns:1fr}.goods-process.v16{grid-template-columns:1fr 1fr}.wifi-metrics-v16{grid-template-columns:1fr!important}
}


/* =========================
   v17 acoustic tracking + office WLAN + routing polish
   ========================= */

/* Guaranteed category colors on project rail (class-based, independent of inherited custom properties). */
body[data-page="projects"] .project-nav-group.cat-software{--cat:#a978ff!important}
body[data-page="projects"] .project-nav-group.cat-ai{--cat:#36d8ef!important}
body[data-page="projects"] .project-nav-group.cat-operations{--cat:#ffad45!important}
body[data-page="projects"] .project-nav-group.cat-public{--cat:#59dd92!important}
body[data-page="projects"] .project-nav-group.cat-infrastructure{--cat:#5897ff!important}
body[data-page="projects"] .project-nav-group-head{
  background:linear-gradient(90deg,color-mix(in srgb,var(--cat) 28%,#151719),color-mix(in srgb,var(--cat) 6%,#101316) 78%)!important
}
body[data-page="projects"] .project-category-link em{color:color-mix(in srgb,var(--cat) 88%,#fff)!important}
body[data-page="projects"] .project-submenu{border-left:3px solid color-mix(in srgb,var(--cat) 66%,transparent)!important}

/* Flight paths start in the exact same 0..100 coordinate system as percentage-based detection boxes. */
.tracking-trajectories{z-index:8!important}
.tracking-trajectories .track-flight-path{
  stroke:#62e8ff!important;stroke-width:.34!important;stroke-dasharray:1!important;stroke-dashoffset:1!important;
  opacity:0;filter:drop-shadow(0 0 4px rgba(98,232,255,.85))
}
.tracking-trajectories.is-animating .track-flight-path{
  animation:v17-flight-draw 2.5s cubic-bezier(.18,.72,.22,1) forwards!important
}
.tracking-trajectories .track-flight-head circle{fill:#071015;stroke:#8ff1ff;stroke-width:.18;vector-effect:non-scaling-stroke}
.tracking-trajectories .track-flight-head path{fill:#8ff1ff;stroke:none;filter:drop-shadow(0 0 3px rgba(98,232,255,.95))}
.tracking-trajectories .track-flight-label{opacity:0!important}
.tracking-trajectories.is-animating .track-flight-label{animation:v17-flight-label .3s ease 2.1s forwards!important}
@keyframes v17-flight-draw{0%{stroke-dashoffset:1;opacity:.25}100%{stroke-dashoffset:0;opacity:1}}
@keyframes v17-flight-label{to{opacity:1}}

/* Acoustic locator / beamforming overlay. */
.acoustic-locator-layer,.fusion-acoustic-layer{position:absolute;inset:0;width:100%;height:100%;z-index:7;pointer-events:none;mix-blend-mode:screen;opacity:.88}
.acoustic-array-badge{position:absolute;left:12px;bottom:12px;z-index:10;display:grid;gap:2px;padding:8px 10px;border:1px solid rgba(94,230,255,.62);background:rgba(4,12,18,.86);box-shadow:0 8px 24px rgba(0,0,0,.32)}
.acoustic-array-badge b{font:900 8px ui-monospace,monospace;color:#7cecff;letter-spacing:.08em}
.acoustic-array-badge span{font-size:7px;color:rgba(255,255,255,.74)}
.acoustic-result-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line)}
.acoustic-result-strip>div{background:linear-gradient(135deg,rgba(89,210,238,.08),var(--surface));padding:11px;display:grid;gap:3px}
.acoustic-result-strip span{font-size:7px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.acoustic-result-strip strong{font-size:10px;color:#7cecff}
.acoustic-result-strip small{font-size:7px;color:var(--muted);line-height:1.35}
.fusion-acoustic-layer{z-index:4;opacity:.82}

/* Sensor fusion project view can hold five media cards cleanly. */
.sensor-fusion-visual .fusion-view-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
.sensor-fusion-visual .fusion-status{flex-wrap:wrap}

/* OCR input column: remove the old document-page aspect ratio / grey remainder. */
.routing-v14 .routing-document{
  aspect-ratio:auto!important;min-height:0!important;box-shadow:none!important;color:var(--text)!important;
  background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 6%,var(--surface)),var(--surface) 62%)!important;
}
.routing-v14 .routing-document>span{color:var(--accent)!important}
.routing-v14 .routing-document h3{color:var(--text)!important}
.routing-v14 .routing-document p{color:var(--muted)!important}
.route-source-meta{margin-top:14px;display:grid;gap:6px}
.route-source-meta>span{padding:8px;border:1px solid var(--line);background:var(--surface-2);display:grid;gap:2px}
.route-source-meta b{font-size:8px;color:var(--text)}
.route-source-meta small{font-size:7px;color:var(--muted)}

/* Larger project-scale office floorplan. */
.wifi-v15 .wifi-canvas-wrap{background:#071015}
.wifi-v15 canvas[data-wifi-canvas]{min-height:620px}
.wifi-office-label{pointer-events:none}

/* Responsive acoustic / fusion. */
@media(max-width:1050px){
  .sensor-fusion-visual .fusion-view-grid{grid-template-columns:1fr 1fr}
  .acoustic-result-strip{grid-template-columns:1fr 1fr}
}
@media(max-width:650px){
  .sensor-fusion-visual .fusion-view-grid{grid-template-columns:1fr}
  .acoustic-result-strip{grid-template-columns:1fr}
  .wifi-v15 canvas[data-wifi-canvas]{min-height:440px}
}

/* v17 sensor-fusion density adjustments */
.fusion-v14-controls{grid-template-columns:repeat(6,minmax(105px,1fr)) auto!important}
.sensor-fusion-visual .fusion-status{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important}
.sensor-fusion-visual .fusion-status strong{grid-column:1/-1!important}
@media(max-width:1200px){.fusion-v14-controls{grid-template-columns:repeat(3,1fr)!important}.fusion-v14-controls .demo-control-button{grid-column:1/-1}}
@media(max-width:700px){.fusion-v14-controls{grid-template-columns:1fr 1fr!important}}

/* v17 paths are animated by JS Web Animations API for deterministic start/end alignment. */
.tracking-trajectories.is-animating .track-flight-path{animation:none!important}


/* ============================================================
   v18 · clearer damage inspection, network lab, NN + CNN labs
   ============================================================ */

/* Projects: explicit colors, independent of color-mix support */
body[data-page="projects"] .project-nav-group.cat-software .project-nav-group-head{background:linear-gradient(90deg,rgba(169,120,255,.24),rgba(169,120,255,.055))!important;border-left-color:#a978ff!important}
body[data-page="projects"] .project-nav-group.cat-ai .project-nav-group-head{background:linear-gradient(90deg,rgba(54,216,239,.23),rgba(54,216,239,.05))!important;border-left-color:#36d8ef!important}
body[data-page="projects"] .project-nav-group.cat-operations .project-nav-group-head{background:linear-gradient(90deg,rgba(255,173,69,.24),rgba(255,173,69,.05))!important;border-left-color:#ffad45!important}
body[data-page="projects"] .project-nav-group.cat-public .project-nav-group-head{background:linear-gradient(90deg,rgba(89,221,146,.22),rgba(89,221,146,.05))!important;border-left-color:#59dd92!important}
body[data-page="projects"] .project-nav-group.cat-infrastructure .project-nav-group-head{background:linear-gradient(90deg,rgba(88,151,255,.24),rgba(88,151,255,.05))!important;border-left-color:#5897ff!important}
body[data-page="projects"] .project-nav-group.cat-software .project-category-link em,body[data-page="projects"] .project-nav-group.cat-software .project-category-link i{color:#c5a5ff!important}
body[data-page="projects"] .project-nav-group.cat-ai .project-category-link em,body[data-page="projects"] .project-nav-group.cat-ai .project-category-link i{color:#74e8f7!important}
body[data-page="projects"] .project-nav-group.cat-operations .project-category-link em,body[data-page="projects"] .project-nav-group.cat-operations .project-category-link i{color:#ffc36f!important}
body[data-page="projects"] .project-nav-group.cat-public .project-category-link em,body[data-page="projects"] .project-nav-group.cat-public .project-category-link i{color:#81edac!important}
body[data-page="projects"] .project-nav-group.cat-infrastructure .project-category-link em,body[data-page="projects"] .project-nav-group.cat-infrastructure .project-category-link i{color:#82b2ff!important}
body[data-page="projects"] .project-nav-group.cat-software .project-submenu a::before{background:#a978ff!important}
body[data-page="projects"] .project-nav-group.cat-ai .project-submenu a::before{background:#36d8ef!important}
body[data-page="projects"] .project-nav-group.cat-operations .project-submenu a::before{background:#ffad45!important}
body[data-page="projects"] .project-nav-group.cat-public .project-submenu a::before{background:#59dd92!important}
body[data-page="projects"] .project-nav-group.cat-infrastructure .project-submenu a::before{background:#5897ff!important}
body[data-page="projects"] .project-nav-group.cat-software .project-submenu a.active{background:rgba(169,120,255,.13)!important;color:#e1d4ff!important}
body[data-page="projects"] .project-nav-group.cat-ai .project-submenu a.active{background:rgba(54,216,239,.12)!important;color:#c8f8ff!important}
body[data-page="projects"] .project-nav-group.cat-operations .project-submenu a.active{background:rgba(255,173,69,.12)!important;color:#ffe0af!important}
body[data-page="projects"] .project-nav-group.cat-public .project-submenu a.active{background:rgba(89,221,146,.12)!important;color:#c8f6da!important}
body[data-page="projects"] .project-nav-group.cat-infrastructure .project-submenu a.active{background:rgba(88,151,255,.12)!important;color:#d7e5ff!important}

/* Quality */
.quality-v18 .quality-box{box-shadow:0 0 0 1px rgba(0,0,0,.35),0 0 14px rgba(0,0,0,.18)}
.quality-v18 .quality-box span{font-size:7px;max-width:210px;overflow:hidden;text-overflow:ellipsis}
.quality-v18 .quality-box.paint{border-color:#aa83ff}.quality-v18 .quality-box.paint span{background:#aa83ff;color:#fff}
.quality-v18 .quality-box.scratch{border-color:#59d2ee}.quality-v18 .quality-box.scratch span{background:#59d2ee}
.quality-v18 .quality-box.dent{border-color:#f2b45f}.quality-v18 .quality-box.dent span{background:#f2b45f}
.quality-v18 .quality-box.corrosion{border-color:#66d39b}.quality-v18 .quality-box.corrosion span{background:#66d39b}
.quality-v18 .quality-box.crack{border-color:#ff665c}.quality-v18 .quality-box.crack span{background:#ff665c;color:#fff}
.quality-process-v18{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:8px;align-items:stretch;padding:14px;border-top:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.016),rgba(255,255,255,0))}
.quality-process-v18>div{padding:13px;border:1px solid var(--line);background:var(--surface-2);display:grid;gap:4px;min-height:72px;align-content:center}
.quality-process-v18>b{display:none}.quality-process-v18>div b{font:900 8px ui-monospace,monospace;color:var(--accent)}.quality-process-v18>div span{font-size:11px;font-weight:850}.quality-process-v18>div small{font-size:8px;color:var(--muted);line-height:1.45}.quality-process-v18>i{align-self:center;color:var(--muted);font-style:normal}

/* Network detective v18 */
.network-v18-layout{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(290px,.75fr);border-bottom:1px solid var(--line)}
.network-map-v18{padding:18px;background:linear-gradient(180deg,#0b1116,#0b0f13)}
.network-v18-branches{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:14px}
.network-v18-branches section{border:1px solid var(--line);padding:10px;display:grid;gap:8px;align-content:start;background:rgba(255,255,255,.015)}
.network-v18-branches section>b{font:800 8px ui-monospace,monospace;color:var(--muted);letter-spacing:.08em}
.network-v18-branches .network-node{width:100%;min-height:78px}
.network-v18-branches .client-row{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.network-v18-services{padding:18px;border-left:1px solid var(--line);background:var(--surface-2)}
.network-service-table{margin-top:10px;border:1px solid var(--line)}
.network-service-table .head,.network-service-table .row{display:grid;grid-template-columns:1.4fr repeat(3,.8fr);align-items:center}
.network-service-table .head{background:#0b1116;border-bottom:1px solid var(--line)}
.network-service-table .head>*{padding:8px;font-size:8px;color:var(--muted);text-align:center}.network-service-table .head b:first-child{text-align:left}
.network-service-table .row{border-bottom:1px solid var(--line)}.network-service-table .row:last-child{border-bottom:0}
.network-service-table .row strong{padding:10px;font-size:9px}.network-service-table .row span{margin:5px;padding:6px 3px;border:1px solid var(--line);text-align:center;font:800 7px ui-monospace,monospace;background:#0c1216}
.network-service-table .row span.ok{border-color:rgba(102,211,155,.42);color:#66d39b;background:rgba(102,211,155,.07)}
.network-service-table .row span.warn{border-color:rgba(242,180,95,.48);color:#f2b45f;background:rgba(242,180,95,.07)}
.network-service-table .row span.bad{border-color:rgba(255,102,92,.48);color:#ff665c;background:rgba(255,102,92,.07)}
.network-v18-legend{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;color:var(--muted);font-size:8px}.network-v18-legend span{display:flex;align-items:center;gap:5px}.network-v18-legend i{width:7px;height:7px;border-radius:50%;background:#66d39b}.network-v18-legend i.warn{background:#f2b45f}.network-v18-legend i.bad{background:#ff665c}
.network-diagnosis-v18{grid-template-columns:repeat(3,1fr) minmax(280px,1.3fr)!important}
.network-diagnosis-v18 ol{margin:0;padding:12px 16px 12px 34px}.network-diagnosis-v18 li{margin:4px 0;font-size:9px;color:var(--muted)}.network-diagnosis-v18 li b{color:var(--accent);margin-right:7px}

/* Neural Network lab v18 */
.nn-v18-controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:14px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.nn-v18-controls label{display:grid;gap:5px}.nn-v18-controls label>span{font-size:8px;color:var(--muted);font-weight:800}.nn-v18-controls select,.nn-v18-controls input[type=range]{width:100%}.nn-v18-controls output{font:800 8px ui-monospace,monospace;color:var(--accent)}
.nn-v18-actions{grid-column:span 2;align-self:end}
.nn-v18-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.8fr)}
.nn-v18-boundary{border-right:1px solid var(--line);padding:14px}.nn-v18-boundary canvas{width:100%;height:auto;display:block;border:1px solid var(--line);background:#0b1015}
.nn-v18-canvas-head{display:flex;justify-content:space-between;gap:10px;margin-bottom:8px;font-size:8px;color:var(--muted);font-weight:800}.nn-v18-canvas-head small{color:var(--accent)}
.nn-v18-side{padding:14px;display:grid;gap:12px;align-content:start}.nn-v18-network{display:flex;align-items:center;justify-content:center;gap:8px;min-height:150px;border:1px solid var(--line);background:radial-gradient(circle at 50% 50%,rgba(170,131,255,.08),transparent 60%),#0a0f14;padding:12px}
.nn-v18-network>span{color:var(--muted)}.nn-layer-col{display:grid;gap:8px;text-align:center;min-width:38px}.nn-layer-col>small{font-size:7px;color:var(--muted)}.nn-layer-col>div{display:grid;gap:4px;place-items:center}.nn-layer-col i{width:9px;height:9px;border:1px solid #aa83ff;border-radius:50%;background:rgba(170,131,255,.16);box-shadow:0 0 10px rgba(170,131,255,.15)}.nn-layer-col:first-child i{border-color:#59d2ee;background:rgba(89,210,238,.16)}.nn-layer-col:last-child i{border-color:#f2b45f;background:rgba(242,180,95,.16)}.nn-layer-col em{font:700 7px ui-monospace,monospace;color:var(--muted)}
.nn-v18-kpis{grid-template-columns:repeat(4,1fr)!important}.nn-v18-kpis>div{padding:9px!important}.nn-v18-kpis span{font-size:7px!important}.nn-v18-kpis strong{font-size:12px!important}
.nn-v18-side canvas{width:100%;height:auto;border:1px solid var(--line)}
.nn-v18-probe{display:grid;grid-template-columns:1.7fr .7fr;border-top:1px solid var(--line);background:var(--surface-2)}
.nn-v18-probe>div{padding:14px;border-right:1px solid var(--line)}.nn-v18-probe>div:last-child{border-right:0}.nn-v18-probe label{display:grid;grid-template-columns:30px 1fr 45px;gap:8px;align-items:center;margin-top:7px;font-size:8px;color:var(--muted)}.nn-v18-probe output{font:800 8px ui-monospace,monospace;color:var(--accent)}.nn-v18-probe>div:last-child{display:grid;gap:4px;align-content:center}.nn-v18-probe>div:last-child span{font-size:8px;color:var(--muted);text-transform:uppercase}.nn-v18-probe>div:last-child strong{font-size:18px}.nn-v18-probe>div:last-child small{font-size:8px;color:var(--muted)}

/* CNN visual lab */
.cnn-v18-controls{display:grid;grid-template-columns:repeat(6,minmax(0,1fr)) auto;gap:8px;padding:14px;border-bottom:1px solid var(--line);background:var(--surface-2);align-items:end}.cnn-v18-controls label{display:grid;gap:5px}.cnn-v18-controls span{font-size:8px;color:var(--muted);font-weight:800}
.cnn-v18-flow{display:grid;grid-template-columns:minmax(0,1.2fr) auto 1fr auto 1fr auto 1fr;gap:8px;align-items:center;padding:14px}.cnn-v18-flow>i{font-style:normal;color:var(--muted);font-size:18px}
.cnn-stage{border:1px solid var(--line);background:#0a0f14;min-width:0}.cnn-stage>span{display:block;padding:8px 10px;border-bottom:1px solid var(--line);font:800 8px ui-monospace,monospace;color:var(--accent)}.cnn-stage canvas{width:100%;height:auto;display:block;aspect-ratio:320/210}.cnn-stage>small{display:block;padding:7px 9px;color:var(--muted);font-size:7px}
.cnn-image-stage{position:relative;aspect-ratio:320/210;overflow:hidden;background:#070b0e}.cnn-image-stage img{width:100%;height:100%;object-fit:cover;display:block}.cnn-image-stage i{position:absolute;border:2px solid #ffb24f;background:rgba(255,178,79,.08);transform:translate(-50%,-50%);box-shadow:0 0 14px rgba(255,178,79,.25);pointer-events:none}
.cnn-v18-summary{display:grid;grid-template-columns:1fr .7fr 1.4fr;border-top:1px solid var(--line)}.cnn-v18-summary>div{padding:13px;border-right:1px solid var(--line);display:grid;gap:4px}.cnn-v18-summary>div:last-child{border-right:0}.cnn-v18-summary span{font-size:7px;color:var(--muted);text-transform:uppercase}.cnn-v18-summary strong{font-size:10px}

/* responsive additions */
@media(max-width:1100px){
  .network-v18-layout,.nn-v18-grid{grid-template-columns:1fr}.network-v18-services,.nn-v18-boundary{border-left:0;border-right:0;border-top:1px solid var(--line)}
  .network-v18-branches{grid-template-columns:1fr 1fr}.network-diagnosis-v18{grid-template-columns:1fr 1fr!important}
  .nn-v18-controls{grid-template-columns:repeat(2,1fr)}.cnn-v18-controls{grid-template-columns:repeat(3,1fr)}.cnn-v18-controls button{grid-column:span 3}
  .cnn-v18-flow{grid-template-columns:1fr 1fr}.cnn-v18-flow>i{display:none}
}
@media(max-width:700px){
  .quality-process-v18{display:grid;grid-template-columns:1fr}.quality-process-v18>i{display:none}
  .network-v18-branches{grid-template-columns:1fr}.network-service-table .head,.network-service-table .row{grid-template-columns:1.1fr repeat(3,.8fr)}.network-diagnosis-v18{grid-template-columns:1fr!important}
  .nn-v18-controls{grid-template-columns:1fr}.nn-v18-actions{grid-column:auto}.nn-v18-probe{grid-template-columns:1fr}.nn-v18-kpis{grid-template-columns:1fr 1fr!important}
  .cnn-v18-controls{grid-template-columns:1fr 1fr}.cnn-v18-controls button{grid-column:1/-1}.cnn-v18-flow{grid-template-columns:1fr}.cnn-v18-summary{grid-template-columns:1fr}.cnn-v18-summary>div{border-right:0;border-bottom:1px solid var(--line)}
}

/* ================= Portfolio v19 · polished demos, ROI repair, hard category colors ================= */
body[data-page="projects"] .project-nav-group.cat-software{--cat:#9b7cff!important}
body[data-page="projects"] .project-nav-group.cat-ai{--cat:#41d8f2!important}
body[data-page="projects"] .project-nav-group.cat-operations{--cat:#ff9b45!important}
body[data-page="projects"] .project-nav-group.cat-public{--cat:#5edb90!important}
body[data-page="projects"] .project-nav-group.cat-infrastructure{--cat:#5b8cff!important}
body[data-page="projects"] .project-nav-group-head{border-left-color:var(--cat)!important;background:linear-gradient(90deg,color-mix(in srgb,var(--cat) 16%,transparent),transparent 85%)!important}
body[data-page="projects"] .project-category-link i,body[data-page="projects"] .project-category-link em,body[data-page="projects"] .project-category-link b,body[data-page="projects"] .project-category-toggle{color:var(--cat)!important}
body[data-page="projects"] .project-submenu a::before{background:var(--cat)!important}
body[data-page="projects"] .project-submenu a:hover,body[data-page="projects"] .project-submenu a.active{background:color-mix(in srgb,var(--cat) 14%,transparent)!important}

/* ROI: prevent orphan gray grid cell and guarantee initialized-looking layout */
.roi-playground .roi-inputs{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:0!important;border:1px solid var(--line);background:var(--surface)}
.roi-playground .roi-inputs label{min-width:0!important;padding:16px!important;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:transparent!important}
.roi-playground .roi-inputs label:nth-child(3n){border-right:0}
.roi-playground .roi-inputs label:nth-last-child(-n+3){border-bottom:0}
.roi-playground .roi-flow{margin-top:26px}
.roi-playground .roi-results{grid-template-columns:repeat(4,minmax(0,1fr))!important}

/* Production scheduling */
.scheduler-demo,.twin-demo,.escape-demo,.document-challenge{--demo-card:#11171c}
.scheduler-head,.twin-head,.escape-head,.docchallenge-head{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;margin-bottom:22px}
.scheduler-head h3,.twin-head h3,.escape-head h3,.docchallenge-head h3{margin:7px 0 0;font-size:clamp(22px,2.2vw,34px)}
.scheduler-actions,.demo-actions{display:flex;gap:8px;flex-wrap:wrap}
.scheduler-kpis,.twin-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);margin-bottom:16px}
.scheduler-kpis>div,.twin-kpis>div{padding:15px 17px;border-right:1px solid var(--line)}
.scheduler-kpis>div:last-child,.twin-kpis>div:last-child{border-right:0}
.scheduler-kpis span,.twin-kpis span{display:block;font:700 10px ui-monospace,monospace;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.scheduler-kpis strong,.twin-kpis strong{display:block;margin-top:7px;font-size:22px}
.scheduler-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.scheduler-machine{border:1px solid var(--line);background:var(--surface);min-height:300px}
.scheduler-machine>header{display:flex;justify-content:space-between;padding:14px 15px;border-bottom:1px solid var(--line);font-weight:800}
.scheduler-machine>header small{color:var(--muted)}
.scheduler-dropzone{min-height:245px;padding:10px;display:grid;align-content:start;gap:8px;transition:.18s}
.scheduler-dropzone.over{background:rgba(89,210,238,.08);outline:1px dashed #59d2ee;outline-offset:-5px}
.scheduler-job{position:relative;display:grid;grid-template-columns:auto 1fr;gap:4px 10px;padding:12px;border:1px solid var(--line);background:#0d1317;cursor:grab;border-left:4px solid #59d2ee;box-shadow:inset 0 -3px 0 rgba(255,255,255,.03)}
.scheduler-job.orange{border-left-color:#ff9b45}.scheduler-job.violet{border-left-color:#9b7cff}.scheduler-job.green{border-left-color:#5edb90}.scheduler-job.red{border-left-color:#ff665c}.scheduler-job.blue{border-left-color:#5b8cff}
.scheduler-job b{font:800 10px ui-monospace,monospace;color:var(--muted)}.scheduler-job strong{font-size:14px}.scheduler-job span,.scheduler-job small{grid-column:1/-1;color:var(--muted);font-size:11px}.scheduler-job.dragging{opacity:.45}
.scheduler-timeline{display:grid;gap:6px;margin-top:14px}.scheduler-timeline>div{display:grid;grid-template-columns:130px 1fr;gap:14px;padding:10px 12px;border:1px solid var(--line);background:rgba(255,255,255,.015);font-size:12px}.scheduler-timeline span{color:var(--muted)}

/* Digital twin */
.twin-line{display:grid;grid-template-columns:1fr 28px 1fr 28px 1fr 28px 1fr;align-items:stretch;gap:8px}.twin-line>i{display:grid;place-items:center;color:var(--muted);font-style:normal}.twin-line section{min-height:210px;border:1px solid var(--line);background:var(--surface)}.twin-line header{display:flex;justify-content:space-between;padding:13px;border-bottom:1px solid var(--line);font-weight:800}.twin-line header span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgba(89,210,238,.12);color:#59d2ee}.twin-line section>div{padding:10px;display:grid;gap:7px}.twin-job{display:block;padding:13px;border:1px solid rgba(89,210,238,.35);background:rgba(89,210,238,.08);font-weight:800;animation:twinPulse 1.2s ease-in-out infinite alternate}.twin-event-log{margin-top:14px;padding:14px;border:1px solid var(--line);background:#0d1317;color:#c8d0d5}@keyframes twinPulse{to{box-shadow:0 0 22px rgba(89,210,238,.16)}}

/* Network escape room */
.escape-score{min-width:145px;padding:14px 18px;border:1px solid var(--line);text-align:center}.escape-score span,.escape-score small{display:block;color:var(--muted);font-size:10px;text-transform:uppercase}.escape-score strong{display:block;font-size:34px;margin:4px 0}.escape-scenarios{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}.escape-scenarios button{padding:10px 13px;border:1px solid var(--line);background:var(--surface);color:var(--muted);cursor:pointer}.escape-scenarios button.active{border-color:#59d2ee;color:#fff;background:rgba(89,210,238,.08)}.escape-grid{display:grid;grid-template-columns:minmax(300px,.85fr) minmax(0,1.4fr);gap:14px}.escape-tests{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.escape-tests button{min-height:72px;padding:11px;text-align:left;border:1px solid var(--line);background:var(--surface);color:var(--text);cursor:pointer}.escape-tests button span,.escape-tests button small{display:block}.escape-tests button small{margin-top:6px;color:var(--muted)}.escape-tests button.pass{border-color:#5edb90;background:rgba(94,219,144,.07)}.escape-tests button.fail{border-color:#ff665c;background:rgba(255,102,92,.08)}.escape-terminal{border:1px solid var(--line);background:#091014;padding:16px}.escape-path{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:12px}.escape-path span{padding:7px 9px;border:1px solid #26333b;font:800 9px ui-monospace,monospace}.escape-terminal pre{min-height:190px;white-space:pre-wrap;color:#a8d8bd;font:12px/1.55 ui-monospace,monospace;margin:0 0 14px}

/* Document challenge */
.docchallenge-score{min-width:180px;padding:14px;border:1px solid var(--line);text-align:center}.docchallenge-score span{display:block;color:var(--muted);font-size:10px}.docchallenge-score strong{display:block;margin-top:8px;font-size:20px}.docchallenge-docs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.docchallenge-docs article{padding:15px;border:1px solid var(--line);background:#f3efe5;color:#192027;min-height:280px}.docchallenge-docs header{font:800 11px ui-monospace,monospace;margin-bottom:22px;color:#58626a}.docchallenge-docs button{width:100%;display:flex;justify-content:space-between;gap:14px;padding:13px 9px;margin-bottom:8px;border:1px solid #c8c1b4;background:#fffaf0;color:#1b2328;cursor:pointer}.docchallenge-docs button.selected{outline:3px solid #59d2ee}.docchallenge-docs button.ai-alert{outline:3px solid #ff665c;background:#fff0ed}.docchallenge-docs article>strong{display:block;margin-top:18px;padding-top:14px;border-top:2px solid #282e32}.docchallenge-actions{display:flex;gap:8px;margin:14px 0}.docchallenge-result{padding:16px;border:1px solid var(--line);background:var(--surface)}.doc-ai-result{display:grid;gap:6px}.doc-ai-result.ok b{color:#5edb90}.doc-ai-result.warn b{color:#ff9b45}.doc-ai-result small{color:var(--muted)}

/* CNN v19 */
.cnn-v18-flow{grid-template-columns:minmax(180px,1.15fr) 24px minmax(150px,1fr) 24px minmax(150px,1fr) 24px minmax(150px,1fr) 24px minmax(150px,.9fr)!important}
.cnn-output-stage{display:flex!important;flex-direction:column;justify-content:center;align-items:center;text-align:center}.cnn-feature-stack{position:relative;width:120px;height:96px;margin:14px auto}.cnn-feature-stack i{position:absolute;inset:0;border:1px solid rgba(89,210,238,.45);background:linear-gradient(135deg,rgba(89,210,238,.18),rgba(155,124,255,.08));transform:translate(calc(var(--i,0)*6px),calc(var(--i,0)*-5px))}.cnn-feature-stack i:nth-child(1){--i:0}.cnn-feature-stack i:nth-child(2){--i:1}.cnn-feature-stack i:nth-child(3){--i:2}.cnn-feature-stack i:nth-child(4){--i:3}.cnn-v19-story{display:grid;grid-template-columns:1fr 22px 1fr 22px 1fr 22px 1fr;align-items:center;margin-top:14px;border:1px solid var(--line);background:var(--surface)}.cnn-v19-story>div{padding:13px}.cnn-v19-story>b{}.cnn-v19-story div b{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgba(155,124,255,.14);color:#b49cff;font-size:10px}.cnn-v19-story span,.cnn-v19-story small{display:block;margin-top:5px}.cnn-v19-story small{color:var(--muted)}.cnn-v19-story>i{text-align:center;color:var(--muted);font-style:normal}

@media(max-width:1000px){.roi-playground .roi-inputs{grid-template-columns:repeat(2,minmax(0,1fr))!important}.roi-playground .roi-results,.scheduler-kpis,.twin-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}.scheduler-board,.docchallenge-docs{grid-template-columns:1fr}.twin-line{grid-template-columns:1fr}.twin-line>i{transform:rotate(90deg)}.escape-grid{grid-template-columns:1fr}.cnn-v18-flow{grid-template-columns:1fr!important}.cnn-v18-flow>i{transform:rotate(90deg)}.cnn-v19-story{grid-template-columns:1fr}.cnn-v19-story>i{transform:rotate(90deg);padding:4px}}
@media(max-width:620px){.roi-playground .roi-inputs,.roi-playground .roi-results,.scheduler-kpis,.twin-kpis,.escape-tests{grid-template-columns:1fr!important}.scheduler-head,.twin-head,.escape-head,.docchallenge-head{display:grid}.scheduler-timeline>div{grid-template-columns:1fr}.docchallenge-actions{display:grid}}


/* v20 — calendar forecast & clear production flow */
.forecast-v20-head{display:flex;justify-content:space-between;gap:24px;padding:18px;border-bottom:1px solid var(--line)}.forecast-v20-head h3{margin:6px 0;font-size:clamp(22px,2.2vw,34px)}.forecast-v20-head p{max-width:760px;color:var(--muted)}.forecast-model-chip{min-width:240px;padding:13px;border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));background:var(--accent-soft);display:grid;gap:4px}.forecast-model-chip span,.forecast-model-chip small{color:var(--muted);font-size:9px}.forecast-v20-controls{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;padding:14px;border-bottom:1px solid var(--line);background:var(--surface-2)}.forecast-v20-controls label{display:grid;gap:6px}.forecast-v20-controls label>span{font:800 8px ui-monospace,monospace;color:var(--muted);text-transform:uppercase}.forecast-v20-context{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:13px 16px;border-bottom:1px solid var(--line)}.forecast-v20-context>span{font:800 9px ui-monospace,monospace;color:var(--muted);margin-right:6px}.forecast-v20-context b{padding:6px 8px;border:1px solid rgba(89,210,238,.25);background:rgba(89,210,238,.06);font-size:9px}.forecast-v20-context small{width:100%;color:var(--muted)}.forecast-v20-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px;padding:15px}.forecast-v20-week article{border:1px solid var(--line);background:var(--surface);min-width:0}.forecast-v20-week article.selected{border-color:var(--accent);box-shadow:inset 0 2px 0 var(--accent)}.forecast-v20-week article.holiday{background:linear-gradient(180deg,rgba(255,155,69,.08),var(--surface))}.forecast-v20-week header{padding:9px;border-bottom:1px solid var(--line);min-height:57px}.forecast-v20-week header b,.forecast-v20-week header span{display:block}.forecast-v20-week header span{margin-top:5px;color:#ff9b45;font-size:8px}.forecast-v20-week article>div{padding:8px 9px;display:flex;justify-content:space-between;gap:8px}.forecast-v20-week small{color:var(--muted);font-size:8px}.forecast-v20-week footer{padding:8px 9px;border-top:1px solid var(--line);font:800 9px ui-monospace,monospace;color:#59d2ee}.forecast-v20-summary{display:grid;grid-template-columns:1fr 1.2fr 1.25fr;border-top:1px solid var(--line)}.forecast-v20-summary>div{padding:17px;border-right:1px solid var(--line);display:grid;gap:5px}.forecast-v20-summary>div:last-child{border-right:0}.forecast-v20-summary span{font:800 8px ui-monospace,monospace;color:var(--muted);text-transform:uppercase}.forecast-v20-summary strong{font-size:24px}.forecast-v20-summary small{color:var(--muted)}
.twin-v20 .twin-v20-clock{display:flex;align-items:baseline;gap:12px;padding:12px 15px;border:1px solid var(--line);margin-bottom:12px;background:var(--surface)}.twin-v20-clock span,.twin-v20-clock small{color:var(--muted)}.twin-v20-clock strong{font-size:28px}.twin-v20-line{display:grid;grid-template-columns:1fr 26px 1fr 26px 1fr 26px 1fr;align-items:stretch;gap:7px}.twin-v20-line>em{display:grid;place-items:center;color:var(--muted);font-style:normal}.twin-v20-line section{border:1px solid var(--line);background:var(--surface);min-height:260px}.twin-v20-line header{display:grid;grid-template-columns:auto 1fr;gap:3px 8px;padding:11px;border-bottom:1px solid var(--line)}.twin-v20-line header b{grid-row:1/3;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(89,210,238,.1);color:#59d2ee}.twin-v20-line header small{color:var(--muted)}.twin-v20-machine{display:flex;align-items:center;gap:8px;padding:10px;border-bottom:1px solid var(--line)}.twin-v20-machine i{width:10px;height:10px;border-radius:50%;background:#5edb90;box-shadow:0 0 12px rgba(94,219,144,.35)}.twin-v20-machine i.down{background:#ff665c}.twin-v20-machine strong{font-size:10px}.twin-v20-queue{display:grid;gap:6px;padding:9px}.twin-v20-queue article{padding:9px;border-left:3px solid #59d2ee;background:#0c1419;display:grid;gap:3px}.twin-v20-queue article.rush{border-color:#ff9b45;background:rgba(255,155,69,.06)}.twin-v20-queue article.blocked{border-color:#ff665c;opacity:.9}.twin-v20-queue span,.twin-v20-queue small{color:var(--muted);font-size:8px}.twin-empty{padding:12px;color:var(--muted)}.twin-v20-orders{display:flex;gap:7px;flex-wrap:wrap;padding:13px 0}.twin-v20-orders>span{padding:8px 10px;border:1px solid var(--line);display:grid;gap:2px}.twin-v20-orders>span.done{border-color:#5edb90;color:#5edb90}.twin-v20-orders>span.rush{border-color:#ff9b45}.twin-v20-orders b{font-size:9px}.twin-v20-orders span{font-size:8px;color:var(--muted)}
@media(max-width:1100px){.forecast-v20-controls{grid-template-columns:repeat(3,1fr)}.forecast-v20-week{grid-template-columns:repeat(4,1fr)}.twin-v20-line{grid-template-columns:1fr 1fr}.twin-v20-line>em{display:none}}
@media(max-width:700px){.forecast-v20-head{display:grid}.forecast-model-chip{min-width:0}.forecast-v20-controls{grid-template-columns:1fr 1fr}.forecast-v20-week{grid-template-columns:1fr 1fr}.forecast-v20-summary{grid-template-columns:1fr}.forecast-v20-summary>div{border-right:0;border-bottom:1px solid var(--line)}.twin-v20-line{grid-template-columns:1fr}.twin-head{display:grid}.twin-kpis{grid-template-columns:1fr 1fr!important}}


/* v21 — calendar forecast + practical what-if production control */
.forecast-v21-controls{display:grid;grid-template-columns:1.15fr 1fr 1fr 1fr .85fr;gap:8px;padding:14px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.forecast-v21-controls label{display:grid;gap:6px}.forecast-v21-controls label>span{font:800 8px ui-monospace,monospace;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.forecast-v21-backtest{margin:14px 15px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(89,210,238,.025),var(--surface));padding:14px}
.forecast-v21-chart-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:10px}.forecast-v21-chart-head span,.forecast-v21-chart-head small{display:block;color:var(--muted);font:800 8px ui-monospace,monospace;text-transform:uppercase}.forecast-v21-chart-head strong{display:block;margin-top:4px}.forecast-v21-chart-head>div:last-child{text-align:right}.forecast-v21-chart-head>div:last-child strong{font-size:25px;color:#59d2ee}
.forecast-v21-backtest canvas{display:block;width:100%;height:220px;background:#091014;border:1px solid #1f2a31}
.forecast-v21-legend{display:flex;gap:16px;margin-top:8px;font:800 8px ui-monospace,monospace;color:var(--muted);text-transform:uppercase}.forecast-v21-legend span:before{content:'';display:inline-block;width:16px;height:2px;margin-right:6px;vertical-align:middle;background:#fff}.forecast-v21-legend .model:before{background:#59d2ee}.forecast-v21-legend .future:before{background:#b49cff}
.twin-v21-line{display:grid;grid-template-columns:1fr 26px 1fr 26px 1fr 26px 1fr;align-items:stretch;gap:7px}.twin-v21-line>em{display:grid;place-items:center;color:var(--muted);font-style:normal}.twin-v21-line section{border:1px solid var(--line);background:var(--surface);min-height:260px}.twin-v21-line header{display:grid;grid-template-columns:auto 1fr;gap:3px 8px;padding:11px;border-bottom:1px solid var(--line)}.twin-v21-line header b{grid-row:1/3;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(89,210,238,.1);color:#59d2ee}.twin-v21-line header small{color:var(--muted)}
.twin-v21-impact{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;padding:11px 13px;margin-top:10px;border:1px solid var(--line);background:rgba(155,124,255,.045)}.twin-v21-impact span{font:800 8px ui-monospace,monospace;color:#b49cff;text-transform:uppercase}.twin-v21-impact strong{font-size:11px}
@media(max-width:1100px){.forecast-v21-controls{grid-template-columns:repeat(3,1fr)}.twin-v21-line{grid-template-columns:1fr 1fr}.twin-v21-line>em{display:none}}
@media(max-width:700px){.forecast-v21-controls{grid-template-columns:1fr 1fr}.forecast-v21-chart-head{align-items:flex-start}.twin-v21-line{grid-template-columns:1fr}.twin-v21-impact{grid-template-columns:1fr}}
@media(max-width:460px){.forecast-v21-controls{grid-template-columns:1fr}.forecast-v21-backtest canvas{height:180px}}

/* v22 · contact + privacy */
.legal-main{padding-top:112px;padding-bottom:72px;min-height:80vh}.legal-hero{padding-top:76px;padding-bottom:42px;border-bottom:1px solid var(--line)}.legal-hero h1{max-width:980px;margin:10px 0 18px;font-size:clamp(42px,6vw,86px);line-height:.96;letter-spacing:-.055em}.legal-hero>p:last-child{max-width:820px;color:var(--muted);font-size:clamp(15px,1.5vw,19px);line-height:1.7}.legal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding-top:30px}.legal-card{border:1px solid var(--line);background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--surface-2) 82%,transparent));padding:26px;min-width:0}.legal-card h2{margin:8px 0 14px;font-size:clamp(21px,2vw,30px)}.legal-card p{color:var(--muted);line-height:1.7}.legal-card p+p{margin-top:10px}.legal-card a{color:var(--accent)}.legal-card code{font:700 .86em ui-monospace,SFMono-Regular,Consolas,monospace;padding:2px 5px;border:1px solid var(--line);background:var(--surface-2);color:var(--text)}.legal-kicker{display:inline-flex;align-items:center;min-height:24px;padding:0 8px;border:1px solid color-mix(in srgb,var(--accent) 38%,var(--line));background:var(--accent-soft);font:800 9px ui-monospace,monospace;color:var(--accent);letter-spacing:.08em;text-transform:uppercase}.legal-note{margin-top:14px;padding:20px 22px;border:1px solid var(--line);background:var(--surface-2);display:grid;gap:6px}.legal-note strong{font-size:13px}.legal-note p{color:var(--muted);line-height:1.65}.contact-page-grid{grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr)}.contact-direct-card{display:flex;flex-direction:column;align-items:flex-start}.contact-direct-mail{display:inline-block;margin-top:18px;font-size:clamp(17px,2vw,25px);font-weight:800;text-decoration:none;color:var(--accent);overflow-wrap:anywhere}.contact-note{margin-top:auto;padding-top:26px;font-size:12px}.contact-compose-form{display:grid;gap:14px;margin-top:20px}.contact-form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.contact-compose-form label{display:grid;gap:7px}.contact-compose-form label>span{font:800 9px ui-monospace,monospace;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}.contact-compose-form label>span small{font:inherit;opacity:.62;text-transform:none}.contact-compose-form input,.contact-compose-form textarea,.contact-compose-form select{width:100%;border:1px solid var(--line);background:var(--surface-2);color:var(--text);padding:12px 13px;font:inherit;outline:none;resize:vertical}.contact-compose-form input:focus,.contact-compose-form textarea:focus,.contact-compose-form select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.contact-form-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.contact-form-actions [data-contact-status]{max-width:480px;color:var(--muted);font-size:11px;line-height:1.5}.contact-hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.privacy-grid .legal-card:nth-child(2),.privacy-grid .legal-card:nth-child(5){background:linear-gradient(145deg,color-mix(in srgb,var(--accent-soft) 58%,var(--surface)),var(--surface))}
@media(max-width:820px){.legal-main{padding-top:82px}.legal-hero{padding-top:48px}.legal-grid,.contact-page-grid{grid-template-columns:1fr}.contact-form-row{grid-template-columns:1fr}.legal-card{padding:20px}}


/* v27 — mobile safety pass */
html,body{max-width:100%;overflow-x:clip}
img,svg,canvas{max-width:100%}
.case-study,.demo-widget,.project-content,.legal-card{min-width:0}
@media(max-width:720px){
  .header-inner{gap:10px}
  .main-nav{left:14px;right:14px}
  .hero-actions .button{flex:1 1 150px;max-width:100%}
  .site-footer .footer-links{flex-wrap:wrap;gap:12px 18px}
  .contact-form-actions{align-items:stretch}
  .contact-form-actions .button{width:100%}
  .contact-compose-form input,.contact-compose-form textarea,.contact-compose-form select{font-size:16px}
  .legal-hero h1,.case-title-row h2,.project-hero h1{overflow-wrap:anywhere}
}
@supports not (overflow:clip){html,body{overflow-x:hidden}}