/* ===== THEME TOKENS ===== */
/* Dark mode — matches file.inergy.com.tw "Blue Tech" theme */
:root{
  --nav-height:64px;
  --black:#040a16;--black2:#060d1c;--black3:#091222;
  --panel:#091222;--panel2:#0c182c;
  --border:#1e3660;--border2:#2a4878;
  --orange:#5cc8ff;--orange2:#38a8f0;--orange3:#96d8ff;
  /* --orange aliases accent in dark mode; --link drives all clickable links */
  --oranged:#0a3a60;--orangeg:rgba(92,200,255,.11);
  --text:#f0f8ff;--text2:#b8d8f8;--text3:#4a7aaa;
  --green:#30d09a;--blue:#72c4ff;--cyan:#5cc8ff;--gold:#e8b400;--red:#ff4444;
  --nav-bg:rgba(2,8,16,.98);--hero-bg:#060d1c;
  --theme-toggle-bg:#0c182c;--theme-icon-color:#f0f8ff;
  --cyang:rgba(92,200,255,.11);
  --glow:rgba(92,200,255,.22);--glowsm:rgba(92,200,255,.11);
  --grid:rgba(92,200,255,.05);
  --link:#5cc8ff;--link-hover:#96d8ff;
  --accent:#5cc8ff;--accent2:#38a8f0;--accent3:#96d8ff;
  --nav-accent:#5cc8ff;--nav-accent-hover:#96d8ff;
}
/* Light mode — white / light gray / dark gray / orange */
html.light-mode{
  --black:#FFFFFF;--black2:#F5F5F5;--black3:#D9D9D9;
  --panel:#FFFFFF;--panel2:#F5F5F5;
  --border:#D9D9D9;--border2:#c4c4c4;
  --orange:#F2711C;--orange2:#d45f10;--orange3:#b8500c;
  --oranged:rgba(242,113,28,.12);--orangeg:rgba(242,113,28,.07);
  --text:#595959;--text2:#444444;--text3:#888888;
  --cyan:#F2711C;--blue:#d45f10;
  --link:#F2711C;--link-hover:#d45f10;
  --accent:#F2711C;--accent2:#d45f10;--accent3:#b8500c;
  --nav-accent:#F2711C;--nav-accent-hover:#d45f10;
  --nav-bg:rgba(255,255,255,.97);--hero-bg:#D9D9D9;
  --theme-toggle-bg:#D9D9D9;--theme-icon-color:#595959;
  --cyang:rgba(89,89,89,.08);
  --grid:rgba(89,89,89,.04);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:21.1px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--black);color:var(--text);font-family:"Barlow",sans-serif;font-size:19.8px;line-height:1.6;overflow-x:hidden;padding-top:var(--nav-height);}
body::before{content:"";position:fixed;inset:0;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:48px 48px;pointer-events:none;z-index:0;transition:none;}
html.light-mode body::before{background-image:linear-gradient(rgba(89,89,89,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(89,89,89,.04) 1px,transparent 1px)}

/* ===== GLOBAL THEME TRANSITION — all color properties animate on theme change ===== */
*{transition:background-color .25s,border-color .25s,color .25s,fill .25s,stroke .25s,box-shadow .25s;}
/* Exclude transitions that hurt performance or look wrong */
*::before,*::after{transition:background-color .25s,border-color .25s,opacity .25s;}
/* Override for elements that need faster or custom transitions */
.ic-card,.qn-card,.dl-card,.res-card,.detail-panel{transition:background .15s,border-color .15s,color .25s;}
a{transition:color .2s,border-color .2s,background .2s;}
.btn-primary,.btn-ghost,.nav-cta,.nav-cta-mobile{transition:background .2s,color .2s,border-color .2s;}
#nav-hamburger span{transition:transform .25s,opacity .25s,background-color .25s;}
/* Sun/moon icons — controlled by JS applyTheme(), CSS only sets initial fallback */
#site-nav .sun-icon{display:none}
#site-nav .moon-icon{display:block}
html.light-mode #site-nav .sun-icon{display:block}
html.light-mode #site-nav .moon-icon{display:none}
a{color:var(--link);text-decoration:none;transition:color .2s,border-color .2s,background .2s}
a:hover{color:var(--link-hover)}
a.btn-primary,a.btn-ghost{color:inherit}
a.btn-primary{color:#fff}
a.btn-ghost{color:var(--text2)}
a.btn-ghost:hover{color:var(--link)}
.qn-card,.dl-card,.res-card{color:var(--text)}
.qn-card:hover .qn-arrow,.dl-card:hover .dl-name,.res-card:hover .res-name{color:var(--link)}

/* ===== NAV (fixed typography — identical on every page) ===== */
#site-nav{
  position:fixed;top:0;left:0;right:0;width:100%;z-index:200;
  background:var(--nav-bg);border-bottom:2px solid var(--nav-accent);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 2.5rem;height:var(--nav-height);
  backdrop-filter:blur(18px);
  transition:background .25s,border-color .25s,color .25s;
  font-size:17.6px;-webkit-text-size-adjust:100%;text-size-adjust:100%;
}
#site-nav .nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;flex-shrink:0}
#site-nav .logo-img{height:38px;width:auto;display:block;object-fit:contain}
#site-nav .logo-asic{font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:26.4px;line-height:1;letter-spacing:.12em;text-transform:uppercase;color:var(--nav-accent);transition:color .25s}
#site-nav .nav-center{display:flex;align-items:center}
#site-nav .nav-link{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:20.9px;line-height:1;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text2);text-decoration:none;
  padding:0 20px;height:var(--nav-height);display:flex;align-items:center;
  border-bottom:3px solid transparent;margin-bottom:-2px;
  transition:color .25s,border-color .25s;white-space:nowrap;
}
#site-nav .nav-link:hover{color:var(--nav-accent-hover);border-bottom-color:var(--nav-accent-hover)}
#site-nav .nav-link.active{color:var(--nav-accent);border-bottom-color:var(--nav-accent)}
#site-nav .nav-right{display:flex;align-items:center;gap:10px}
#site-nav .nav-search{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--border2);padding:6px 12px}
#site-nav .nav-search input{background:none;border:none;outline:none;color:var(--text);font-family:"Share Tech Mono",monospace;font-size:15.4px;width:140px}
#site-nav .nav-search input::placeholder{color:var(--text3)}
#site-nav .nav-search svg{width:14px;height:14px;stroke:var(--text3);fill:none;flex-shrink:0}
#site-nav .theme-toggle{width:38px;height:38px;border-radius:4px;border:1px solid var(--border2);background:var(--theme-toggle-bg);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s;flex-shrink:0}
#site-nav .theme-toggle:hover{border-color:var(--nav-accent)}
#site-nav .theme-toggle svg{width:18px;height:18px;stroke:var(--theme-icon-color);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
#site-nav .nav-cta{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:20.9px;line-height:1;
  letter-spacing:.1em;text-transform:uppercase;background:var(--accent2);color:#fff;
  text-decoration:none;padding:9px 20px;border:none;cursor:pointer;
  clip-path:polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%);
  transition:background .2s,color .2s;
}
#site-nav .nav-cta:hover{background:var(--nav-accent);color:var(--black)}
html.light-mode #site-nav .nav-cta{background:var(--nav-accent);color:#fff}
html.light-mode #site-nav .nav-cta:hover{background:var(--nav-accent-hover);color:#fff}
html:not(.light-mode) #site-nav .nav-cta{background:var(--accent2)}

/* ===== PAGE HEADER STRIP ===== */
.page-header{background:var(--black3);border-bottom:1px solid var(--border);transition:background .25s}
.page-header-inner{max-width:1300px;margin:0 auto;padding:1.2rem 2.5rem;display:flex;align-items:center;gap:14px}
.page-header-icon{width:32px;height:32px;background:var(--orange);clip-path:polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%);display:flex;align-items:center;justify-content:center;font-size:16.5px;flex-shrink:0}
.page-header-title{font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:22px;letter-spacing:.08em;text-transform:uppercase;color:var(--text2)}
.page-header-sub{font-family:"Share Tech Mono",monospace;font-size:14.3px;color:var(--text3);margin-left:auto}

/* ===== HERO (index only) ===== */
.hero{position:relative;z-index:1;background:var(--hero-bg);border-bottom:1px solid var(--border);overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 55% 55% at 85% 35%,var(--glow) 0%,transparent 70%),radial-gradient(ellipse 35% 35% at 8% 80%,var(--glowsm) 0%,transparent 65%);pointer-events:none}
html.light-mode .hero::after{display:none}
.hero-bg-bars{position:absolute;top:0;right:0;bottom:0;width:55%;overflow:hidden;pointer-events:none;z-index:0}
.hero-bg-bars::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(-55deg,transparent,transparent 28px,rgba(92,200,255,.05) 28px,rgba(92,200,255,.05) 29px)}
html.light-mode .hero-bg-bars::before{background:repeating-linear-gradient(-55deg,transparent,transparent 28px,rgba(242,113,28,.06) 28px,rgba(242,113,28,.06) 29px)}
.hero-inner{position:relative;z-index:1;max-width:1300px;margin:0 auto;padding:4rem 2.5rem 3.5rem;display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.hero-eyebrow{font-family:"Share Tech Mono",monospace;font-size:14.3px;letter-spacing:.28em;color:var(--orange);text-transform:uppercase;margin-bottom:1rem}
.hero-eyebrow::before{content:"// ";color:var(--text3)}
.hero h1{font-family:"Barlow Condensed",sans-serif;font-weight:900;font-size:clamp(3rem,5vw,5rem);line-height:.95;text-transform:uppercase;margin-bottom:1.4rem}
.hero h1 .l1{color:var(--text);display:block}
.hero h1 .l2{color:var(--orange);display:block}
.hero h1 .l3{color:var(--text2);font-weight:700;font-size:.58em;display:block;margin-top:4px}
.hero-desc{color:var(--text2);font-size:19.8px;line-height:1.75;max-width:460px;margin-bottom:2rem}
.hero-pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:2rem}
.hero-pill{font-family:"Share Tech Mono",monospace;font-size:14.3px;letter-spacing:.1em;border:1px solid var(--border2);color:var(--text2);padding:4px 10px;background:var(--panel)}
.hero-pill.hot{border-color:var(--orange);color:var(--orange);background:var(--orangeg);font-weight:700}
.hero-actions{display:flex;gap:12px}
.btn-primary{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:17.6px;letter-spacing:.12em;text-transform:uppercase;background:var(--orange);color:#fff;border:none;cursor:pointer;padding:12px 28px;clip-path:polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%);transition:background .2s;text-decoration:none;display:inline-block}
.btn-primary:hover{background:var(--orange2)}
.btn-ghost{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:17.6px;letter-spacing:.12em;text-transform:uppercase;background:none;color:var(--text2);border:1px solid var(--border2);cursor:pointer;padding:11px 24px;transition:border-color .2s,color .2s;text-decoration:none;display:inline-block}
.btn-ghost:hover{border-color:var(--orange);color:var(--orange)}
.hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border)}
.stat-box{background:var(--panel);padding:1.5rem;position:relative;transition:background .25s}
.stat-box::before{content:"";position:absolute;top:0;left:0;width:3px;height:100%;background:var(--orange);opacity:0;transition:opacity .2s}
.stat-box:hover::before{opacity:1}
.stat-num{font-family:"Barlow Condensed",sans-serif;font-weight:900;font-size:2.4rem;line-height:1;color:var(--orange);display:block}
.stat-unit{font-family:"Share Tech Mono",monospace;font-size:13.2px;color:var(--text3);margin-top:2px;display:block}
.stat-label{font-size:15.4px;color:var(--text2);margin-top:5px;display:block;font-weight:500}

/* ===== INDEX QUICK-NAV CARDS ===== */
.quicknav{max-width:1300px;margin:0 auto;padding:2.5rem 2.5rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1px;background:var(--border);border:1px solid var(--border)}
.qn-card{background:var(--panel);padding:2rem;display:flex;flex-direction:column;gap:.7rem;text-decoration:none;border-left:3px solid transparent;transition:background .15s,border-color .15s}
.qn-card:hover{background:var(--panel2);border-left-color:var(--orange)}
.qn-icon{font-size:2rem;line-height:1}
.qn-title{font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:1.3rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text)}
.qn-desc{font-size:16.5px;color:var(--text3);line-height:1.6}
.qn-arrow{font-family:"Barlow Condensed",sans-serif;font-size:17.6px;font-weight:700;color:var(--orange);letter-spacing:.08em;margin-top:auto;padding-top:.5rem}

/* ===== CATALOG ===== */
.cat-filter{background:var(--panel);border-bottom:1px solid var(--border);transition:background .25s}
.cat-filter-inner{max-width:1300px;margin:0 auto;padding:0 2.5rem;display:flex;align-items:stretch;overflow-x:auto;scrollbar-width:none}
.cat-btn{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:15.4px;letter-spacing:.12em;text-transform:uppercase;background:none;border:none;color:var(--text3);padding:11px 16px;cursor:pointer;white-space:nowrap;border-bottom:3px solid transparent;margin-bottom:-1px;transition:color .2s,border-color .2s}
.cat-btn:hover{color:var(--nav-accent-hover);border-bottom-color:var(--nav-accent-hover)}
.cat-btn.active{color:var(--nav-accent);border-bottom-color:var(--nav-accent)}
.main-wrap{max-width:1300px;margin:0 auto;padding:2rem 2.5rem}
.content-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.6rem;flex-wrap:wrap;gap:1rem}
.section-heading{display:flex;align-items:center;gap:12px}
.section-icon{width:28px;height:28px;background:var(--orange);clip-path:polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%);display:flex;align-items:center;justify-content:center;font-size:14.3px}
.section-title{font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:24.2px;letter-spacing:.1em;text-transform:uppercase;color:var(--text)}
.section-count{font-family:"Share Tech Mono",monospace;font-size:14.3px;color:var(--orange);margin-left:4px}
.toolbar-right{display:flex;align-items:center;gap:10px}
.toolbar-search{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--border2);padding:7px 12px;min-width:200px}
.toolbar-search input{background:none;border:none;outline:none;color:var(--text);font-family:"Share Tech Mono",monospace;font-size:15.4px;flex:1}
.toolbar-search input::placeholder{color:var(--text3)}
.toolbar-search svg{width:14px;height:14px;stroke:var(--text3);fill:none;flex-shrink:0}
.sort-select{background:var(--panel);border:1px solid var(--border2);color:var(--text2);font-family:"Share Tech Mono",monospace;font-size:14.3px;padding:7px 10px;cursor:pointer;outline:none}
.ic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(305px,1fr));gap:1px;background:var(--border);border:1px solid var(--border)}
.ic-card{background:var(--black2);padding:1.3rem 1.4rem;display:flex;align-items:flex-start;gap:14px;cursor:pointer;transition:background .15s;border-left:3px solid transparent}
.ic-card:hover{background:var(--panel);border-left-color:var(--orange2)}
.ic-card.active{background:var(--panel);border-left-color:var(--orange)}
.ic-chip-box{flex-shrink:0;width:56px;height:56px;background:var(--panel2);border:1px solid var(--border2);display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:"Share Tech Mono",monospace;font-size:11px;color:var(--orange);line-height:1.3;text-align:center;position:relative;overflow:hidden;transition:border-color .2s}
.ic-chip-box::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--orange)}
.ic-card:hover .ic-chip-box{border-color:var(--orange2)}
.ic-card.active .ic-chip-box{border-color:var(--orange);background:var(--oranged)}
.ic-info{flex:1;min-width:0}
.ic-partnum{font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:20.9px;letter-spacing:.05em;color:var(--orange);margin-bottom:3px;line-height:1}
.ic-desc{font-size:15.4px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:7px}
.ic-tags{display:flex;flex-wrap:wrap;gap:4px}
.ic-tag{font-family:"Share Tech Mono",monospace;font-size:13.2px;letter-spacing:.06em;border:1px solid var(--border2);color:var(--text2);padding:2px 6px;text-transform:uppercase}
.ic-tag.mfr{border-color:var(--orange);color:var(--orange);background:var(--orangeg)}
.ic-tag.pop{border-color:var(--gold);color:var(--gold)}
.ic-tag.new{border-color:var(--green);color:var(--green)}
.ic-card-action{flex-shrink:0;align-self:center}
.view-btn{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:15.4px;letter-spacing:.1em;text-transform:uppercase;background:var(--orange);color:#fff;border:none;cursor:pointer;padding:7px 13px;clip-path:polygon(5px 0%,100% 0%,calc(100% - 5px) 100%,0% 100%);display:flex;align-items:center;gap:5px;transition:background .2s}
.view-btn:hover{background:var(--orange2)}
.view-btn svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:2.5}
.detail-panel{display:none;background:var(--panel);border:1px solid var(--border2);border-top:3px solid var(--orange);margin-top:1.5rem;animation:slideDown .2s ease}
.detail-panel.open{display:block}
@keyframes slideDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.detail-inner{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;background:var(--border);border-bottom:1px solid var(--border)}
.detail-col{background:var(--panel);padding:1.8rem}
.detail-col-title{font-family:"Share Tech Mono",monospace;font-size:13.2px;letter-spacing:.2em;color:var(--text3);text-transform:uppercase;margin-bottom:1rem;padding-bottom:8px;border-bottom:1px solid var(--border2)}
.detail-part{font-family:"Barlow Condensed",sans-serif;font-weight:900;font-size:2.6rem;line-height:1;color:var(--orange);margin-bottom:4px}
.detail-fullname{font-size:18.7px;color:var(--text2);margin-bottom:1rem;line-height:1.5}
.detail-badge-row{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:1rem}
.detail-desc{font-size:17.6px;color:var(--text2);line-height:1.7}
.spec-table{width:100%;border-collapse:collapse}
.spec-table tr{border-bottom:1px solid var(--border)}
.spec-table tr:last-child{border-bottom:none}
.spec-table td{padding:7px 0;font-size:16.5px;vertical-align:top}
.spec-table td:first-child{font-family:"Share Tech Mono",monospace;font-size:13.2px;color:var(--text3);letter-spacing:.06em;width:42%;padding-right:10px}
.spec-table td:last-child{color:var(--text);font-weight:500}
.res-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.res-card{background:var(--black2);border:1px solid var(--border);padding:9px 11px;cursor:pointer;text-decoration:none;transition:border-color .2s,background .2s;display:flex;align-items:flex-start;gap:9px}
.res-card:hover{border-color:var(--orange);background:var(--orangeg)}
.res-icon{font-size:19.8px;flex-shrink:0;margin-top:1px}
.res-name{font-size:15.4px;color:var(--text);font-weight:500;line-height:1.3;display:block}
.res-meta{font-family:"Share Tech Mono",monospace;font-size:13.2px;color:var(--text3);margin-top:2px;display:block}
.detail-actions{display:flex;align-items:center;gap:10px;padding:1rem 1.8rem;background:var(--black2);border-top:1px solid var(--border);flex-wrap:wrap}
.detail-close{margin-left:auto;font-family:"Share Tech Mono",monospace;font-size:14.3px;color:var(--text3);background:none;border:1px solid var(--border2);padding:6px 14px;cursor:pointer;transition:border-color .2s,color .2s}
.detail-close:hover{border-color:var(--orange);color:var(--orange)}
.compare-section{margin-top:3rem}
.compare-title{font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:20.9px;letter-spacing:.1em;text-transform:uppercase;color:var(--text);margin-bottom:1rem;display:flex;align-items:center;gap:10px}
.compare-title::before{content:"";display:block;width:4px;height:20px;background:var(--orange)}
.compare-scroll{overflow-x:auto;border:1px solid var(--border)}
.compare-table{width:100%;border-collapse:collapse;min-width:860px;font-size:15.4px}
.compare-table th{font-family:"Share Tech Mono",monospace;font-size:13.2px;letter-spacing:.1em;text-transform:uppercase;background:var(--panel2);color:var(--orange);padding:10px 12px;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap}
.compare-table th:first-child{background:var(--panel);color:var(--text3)}
.compare-table td{padding:8px 12px;border-bottom:1px solid var(--border);color:var(--text2);vertical-align:middle}
.compare-table td:first-child{font-family:"Share Tech Mono",monospace;font-size:13.2px;color:var(--text3);background:var(--panel);letter-spacing:.06em}
.compare-table tbody tr:hover td{background:var(--panel)}
.compare-table tbody tr:hover td:first-child{background:var(--panel2)}
.ct-part{font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:18.7px;color:var(--orange)}
.ct-yes{color:var(--green);font-family:"Share Tech Mono",monospace;font-size:14.3px}
.ct-no{color:var(--text3);font-family:"Share Tech Mono",monospace;font-size:14.3px}
.ct-val{font-weight:500;color:var(--text)}

/* ===== iNGUI ===== */
.ingui-wrap,.design-wrap,.dl-wrap{max-width:1300px;margin:0 auto;padding:2.5rem}
.ingui-hero{background:var(--panel);border:1px solid var(--border);border-top:3px solid var(--orange);padding:2.5rem;margin-bottom:2rem;display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.ingui-eyebrow{font-family:"Share Tech Mono",monospace;font-size:13.2px;letter-spacing:.24em;color:var(--orange);text-transform:uppercase;margin-bottom:.7rem}
.ingui-eyebrow::before{content:"// ";color:var(--text3)}
.ingui-hero h2{font-family:"Barlow Condensed",sans-serif;font-weight:900;font-size:2.4rem;text-transform:uppercase;line-height:1;color:var(--text);margin-bottom:.6rem}
.ingui-hero h2 span{color:var(--orange)}
.ingui-hero p{color:var(--text2);font-size:18.7px;line-height:1.75;margin-bottom:1rem}
.ingui-badges{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:1.2rem}
.ingui-badge{font-family:"Share Tech Mono",monospace;font-size:13.2px;letter-spacing:.08em;border:1px solid var(--border2);color:var(--text2);padding:3px 9px;text-transform:uppercase}
.ingui-badge.hi{border-color:var(--orange);color:var(--orange);background:var(--orangeg)}
.ingui-flow{display:flex;flex-direction:column;gap:0}

/* ── Flow step base ─────────────────────────────────────── */
.flow-step{
  display:flex;align-items:flex-start;gap:16px;
  padding:14px 16px 14px 12px;
  border-bottom:1px solid var(--border);
  position:relative;
  cursor:default;
  border-left:3px solid transparent;
  margin-left:-12px;
  background:transparent;
  border-radius:0 4px 4px 0;
  /* all transitions except transition itself */
  transition:background .22s,border-left-color .22s,box-shadow .22s,transform .18s;
  overflow:hidden;
}
.flow-step:last-child{border-bottom:none}

/* Shimmer overlay — slides in from left on hover */
.flow-step::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(90deg,var(--orangeg) 0%,transparent 80%);
  opacity:0;
  transform:translateX(-100%);
  transition:opacity .28s,transform .28s;
  pointer-events:none;
  z-index:0;
}
.flow-step:hover::before{
  opacity:1;
  transform:translateX(0);
}

/* Scan-line pulse across the step on hover */
.flow-step::after{
  content:"";
  position:absolute;top:0;left:-60%;
  width:40%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(92,200,255,.09),transparent);
  transform:skewX(-15deg);
  opacity:0;
  transition:none;
  pointer-events:none;
  z-index:0;
}
.flow-step:hover::after{
  animation:flowScan .55s ease forwards;
}
@keyframes flowScan{
  0%{left:-60%;opacity:0}
  30%{opacity:1}
  100%{left:120%;opacity:0}
}
html.light-mode .flow-step::after{
  background:linear-gradient(90deg,transparent,rgba(242,113,28,.08),transparent);
}

/* ── Number wrap (number + vertical connector line) ─────── */
.flow-num-wrap{
  display:flex;flex-direction:column;align-items:center;
  flex-shrink:0;width:34px;position:relative;z-index:1;
}
.flow-num{
  font-family:"Barlow Condensed",sans-serif;font-weight:900;font-size:1.8rem;
  color:var(--orange);line-height:1;text-align:center;
  opacity:.4;
  transition:opacity .22s,transform .22s,text-shadow .22s,color .22s;
  width:34px;
}
.flow-connector{
  width:2px;height:0;
  background:linear-gradient(180deg,var(--orange),transparent);
  margin-top:4px;opacity:0;
  transition:height .3s ease,opacity .3s ease;
}
.flow-step:not(:last-child) .flow-connector{height:8px;opacity:.25}

/* ── Body text ──────────────────────────────────────────── */
.flow-body{flex:1;position:relative;z-index:1}
.flow-title{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:16.5px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--text);margin-bottom:3px;
  transition:color .22s,letter-spacing .22s;
}
.flow-desc{font-size:16.5px;color:var(--text2);line-height:1.6;transition:color .22s;}

/* ── Arrow indicator ────────────────────────────────────── */
.flow-step-arrow{
  flex-shrink:0;align-self:center;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:18px;
  color:var(--orange);opacity:0;
  transform:translateX(-10px);
  transition:opacity .22s,transform .22s;
  position:relative;z-index:1;
}

/* ── Hover state ─────────────────────────────────────────── */
.flow-step:hover{
  border-left-color:var(--orange);
  background:var(--panel2);
  box-shadow:inset 0 0 0 1px var(--border2), 4px 0 16px -8px var(--glow);
  transform:translateX(3px);
}
.flow-step:hover .flow-num{
  opacity:1;
  transform:scale(1.12);
  text-shadow:0 0 18px var(--orange), 0 0 6px var(--orange);
}
.flow-step:hover .flow-connector{height:100%;opacity:.5;}
.flow-step:hover .flow-title{
  color:var(--orange);
  letter-spacing:.10em;
}
.flow-step:hover .flow-desc{color:var(--text);}
.flow-step:hover .flow-step-arrow{
  opacity:1;
  transform:translateX(0);
}

/* Each step gets a unique accent hue shift via data-step */
.flow-step[data-step="1"]:hover{border-left-color:var(--cyan);}
.flow-step[data-step="1"]:hover .flow-num{color:var(--cyan);text-shadow:0 0 18px var(--cyan),0 0 6px var(--cyan);}
.flow-step[data-step="1"]:hover .flow-title{color:var(--cyan);}
.flow-step[data-step="1"]:hover .flow-step-arrow{color:var(--cyan);}

.flow-step[data-step="2"]:hover{border-left-color:var(--green);}
.flow-step[data-step="2"]:hover .flow-num{color:var(--green);text-shadow:0 0 18px var(--green),0 0 6px var(--green);}
.flow-step[data-step="2"]:hover .flow-title{color:var(--green);}
.flow-step[data-step="2"]:hover .flow-step-arrow{color:var(--green);}

.flow-step[data-step="3"]:hover{border-left-color:var(--orange);}
.flow-step[data-step="3"]:hover .flow-num{color:var(--orange);text-shadow:0 0 18px var(--orange),0 0 6px var(--orange);}
.flow-step[data-step="3"]:hover .flow-title{color:var(--orange);}
.flow-step[data-step="3"]:hover .flow-step-arrow{color:var(--orange);}

.flow-step[data-step="4"]:hover{border-left-color:var(--gold);}
.flow-step[data-step="4"]:hover .flow-num{color:var(--gold);text-shadow:0 0 18px var(--gold),0 0 6px var(--gold);}
.flow-step[data-step="4"]:hover .flow-title{color:var(--gold);}
.flow-step[data-step="4"]:hover .flow-step-arrow{color:var(--gold);}

.flow-step[data-step="5"]:hover{border-left-color:var(--red);}
.flow-step[data-step="5"]:hover .flow-num{color:var(--red);text-shadow:0 0 18px var(--red),0 0 6px var(--red);}
.flow-step[data-step="5"]:hover .flow-title{color:var(--red);}
.flow-step[data-step="5"]:hover .flow-step-arrow{color:var(--red);}

/* Light mode: suppress glow text-shadows, use solid colors */
html.light-mode .flow-step:hover .flow-num{text-shadow:none;}
html.light-mode .flow-step[data-step="1"]:hover .flow-num{text-shadow:none;}
html.light-mode .flow-step[data-step="2"]:hover .flow-num{text-shadow:none;}
html.light-mode .flow-step[data-step="3"]:hover .flow-num{text-shadow:none;}
html.light-mode .flow-step[data-step="4"]:hover .flow-num{text-shadow:none;}
html.light-mode .flow-step[data-step="5"]:hover .flow-num{text-shadow:none;}
html.light-mode .flow-step[data-step="2"]:hover{border-left-color:#16a87a;}
html.light-mode .flow-step[data-step="2"]:hover .flow-num,
html.light-mode .flow-step[data-step="2"]:hover .flow-title,
html.light-mode .flow-step[data-step="2"]:hover .flow-step-arrow{color:#16a87a;}
html.light-mode .flow-step[data-step="4"]:hover{border-left-color:#b8860b;}
html.light-mode .flow-step[data-step="4"]:hover .flow-num,
html.light-mode .flow-step[data-step="4"]:hover .flow-title,
html.light-mode .flow-step[data-step="4"]:hover .flow-step-arrow{color:#b8860b;}
html.light-mode .flow-step[data-step="5"]:hover{border-left-color:#d42020;}
html.light-mode .flow-step[data-step="5"]:hover .flow-num,
html.light-mode .flow-step[data-step="5"]:hover .flow-title,
html.light-mode .flow-step[data-step="5"]:hover .flow-step-arrow{color:#d42020;}
.sec-head{display:flex;align-items:center;gap:10px;margin-bottom:1.2rem}
.sec-head h3{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:20.9px;letter-spacing:.1em;text-transform:uppercase;color:var(--text)}
.sec-head::before{content:"";display:block;width:3px;height:18px;background:var(--orange)}
.wiring-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border);margin-bottom:2rem}
.wiring-card{background:var(--panel);padding:1.8rem}
.wiring-card h3{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:16.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--orange);margin-bottom:1rem}
.wiring-svg-wrap{background:var(--black2);border:1px solid var(--border2);padding:1rem;margin-bottom:1rem;overflow:visible}
.wiring-svg-wrap svg{width:100%;height:auto;display:block}
.wiring-svg-wrap .wiring-node{cursor:pointer}
.wiring-svg-wrap .wiring-node rect,.wiring-svg-wrap .wiring-node text{transition:fill .2s,stroke .2s,stroke-width .2s}
.wiring-svg-wrap .wiring-node:hover rect{stroke:var(--nav-accent);stroke-width:2.5}
.wiring-svg-wrap .wiring-node--primary:hover > rect:not(.wiring-pin){fill:var(--orangeg)}
.wiring-svg-wrap .wiring-node--secondary:hover > rect:not(.wiring-pin){fill:var(--oranged)}
.wiring-svg-wrap .wiring-node:hover .wiring-pin{fill:rgba(48,208,154,.28);stroke:var(--green);stroke-width:1.5}
.wiring-svg-wrap .wiring-node:hover text{fill:var(--nav-accent)}
.wiring-note{font-size:13.8px;color:var(--text2);line-height:1.6}
.wiring-note strong{color:var(--orange)}
.ingui-tabs{display:flex;gap:1px;background:var(--border);margin-bottom:1px}
.igui-tab{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:13.2px;letter-spacing:.1em;text-transform:uppercase;background:var(--panel);border:none;color:var(--text3);padding:10px 16px;cursor:pointer;flex:1;transition:background .15s,color .15s;text-align:center}
.igui-tab:hover{color:var(--nav-accent-hover)}
.igui-tab.active{background:var(--nav-accent);color:#fff}
.ingui-tab-content{display:none}
.ingui-tab-content.active{display:block}
.ingui-page-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);margin-bottom:2rem}

/* ── igp-card base (non-preview cards) ── */
.igp-card{
  background:var(--panel);padding:1.6rem;
  position:relative;overflow:hidden;
  transition:background .2s,box-shadow .2s,border-color .2s;
  border-left:3px solid transparent;
}
.igp-card:not(.igp-has-preview):hover{
  background:var(--panel2);
  border-left-color:var(--orange);
  box-shadow:inset 0 0 0 1px var(--border2);
}
.igp-card:not(.igp-has-preview)::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,var(--orangeg) 0%,transparent 60%);
  opacity:0;transition:opacity .25s;pointer-events:none;
}
.igp-card:not(.igp-has-preview):hover::before{opacity:1}
.igp-card:not(.igp-has-preview):hover .igp-num{opacity:.6;transform:scale(1.06);}
.igp-card:not(.igp-has-preview):hover .igp-title{color:var(--orange);letter-spacing:.12em;}

/* ── igp-card with SVG preview (overlay reveal, not flip) ── */
.igp-has-preview{
  padding:0;
  cursor:default;
  perspective:none;   /* no 3D needed for overlay approach */
  overflow:hidden;    /* clips the preview overlay */
}

/* Front face: normal flow — its content naturally sizes the card */
.igp-card-front{
  padding:1.6rem;
  background:var(--panel);
  display:flex;flex-direction:column;
  border-left:3px solid transparent;
  position:relative;  /* in flow, not absolute */
  transition:opacity .35s ease, border-color .2s, background .2s;
  z-index:1;
}

/* Preview: absolute overlay that slides up from the bottom on hover */
.igp-card-preview{
  position:absolute;
  inset:0;
  background:var(--black2);
  display:flex;align-items:center;justify-content:center;
  padding:.6rem;
  overflow:hidden;
  opacity:0;
  transform:translateY(12px) scale(.98);
  transition:opacity .38s cubic-bezier(.4,0,.2,1),
             transform .38s cubic-bezier(.4,0,.2,1);
  z-index:2;
  pointer-events:none;
}

/* Hover: fade-scale preview in, dim front */
.igp-has-preview:hover .igp-card-preview{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.igp-has-preview:hover .igp-card-front{
  opacity:0;
}
.igp-has-preview:hover{
  box-shadow:0 0 0 1px var(--orange), inset 0 0 24px rgba(92,200,255,.06);
}
html.light-mode .igp-has-preview:hover{
  box-shadow:0 0 0 1px var(--orange),inset 0 0 20px rgba(242,113,28,.05);
}

/* SVG fills preview container */
.igp-svg{
  width:100%;height:100%;
  display:block;
  object-fit:contain;
}

/* Hint text at bottom of front */
.igp-hover-hint{
  margin-top:auto;padding-top:.8rem;
  font-family:"Share Tech Mono",monospace;
  font-size:11px;color:var(--text3);
  letter-spacing:.08em;
  opacity:.6;
  display:flex;align-items:center;gap:6px;
}
.igp-hover-hint::before{
  content:"";display:inline-block;
  width:16px;height:1px;
  background:var(--orange);opacity:.5;
}
/* Pulse hint when not hovered */
.igp-has-preview:not(:hover) .igp-hover-hint{
  animation:hintPulse 2.5s ease-in-out infinite;
}
@keyframes hintPulse{
  0%,100%{opacity:.4}
  50%{opacity:.9;color:var(--orange)}
}

.igp-num{font-family:"Barlow Condensed",sans-serif;font-weight:900;font-size:3rem;color:var(--orange);opacity:.25;line-height:1;margin-bottom:.4rem;transition:opacity .2s,transform .2s;}
.igp-title{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:20.9px;letter-spacing:.08em;text-transform:uppercase;color:var(--text);margin-bottom:.8rem;transition:color .2s,letter-spacing .2s;}
.igp-items{list-style:none}
.igp-items li{font-size:16.5px;color:var(--text2);padding:4px 0;border-bottom:1px solid var(--border);display:flex;align-items:baseline;gap:8px}
.igp-items li:last-child{border-bottom:none}
.igp-items li::before{content:"→";color:var(--orange);font-size:11px;flex-shrink:0}
.protect-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);margin-bottom:2rem}
.prot-card{background:var(--panel);padding:1.4rem}
.prot-label{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:17.6px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.6rem}
.prot-label.ocp{color:var(--red)}.prot-label.tsd{color:var(--gold)}.prot-label.ovp{color:var(--blue)}.prot-label.lrp{color:var(--cyan)}
.prot-desc{font-size:15.4px;color:var(--text2);line-height:1.6;margin-bottom:.8rem}
.prot-param{display:flex;justify-content:space-between;font-size:14.3px;padding:4px 0;border-bottom:1px solid var(--border)}
.prot-param:last-child{border-bottom:none}
.prot-param span:first-child{color:var(--text3);font-family:"Share Tech Mono",monospace;font-size:13.2px}
.prot-param span:last-child{color:var(--text);font-weight:500}
.angle-section{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border);margin-bottom:2rem}
.angle-card{background:var(--panel);padding:1.6rem}
.angle-card h3{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:18.7px;letter-spacing:.1em;text-transform:uppercase;color:var(--text2);margin-bottom:.8rem;padding-bottom:8px;border-bottom:1px solid var(--border2)}
.angle-card p{font-size:16.5px;color:var(--text2);line-height:1.65;margin-bottom:.6rem}
.angle-tag{font-family:"Share Tech Mono",monospace;font-size:13.2px;color:var(--orange)}

/* ===== DESIGN GUIDE ===== */
.design-intro{background:var(--panel);border:1px solid var(--border);border-top:3px solid var(--link);padding:2.5rem;margin-bottom:2rem}
.design-intro h2{font-family:"Barlow Condensed",sans-serif;font-weight:900;font-size:2.2rem;text-transform:uppercase;color:var(--text);margin-bottom:.5rem}
.design-intro h2 span{color:var(--link)}
.design-intro .ingui-eyebrow{color:var(--link)}
.page-header-icon.accent-secondary{background:var(--link)}
.design-intro p{color:var(--text2);font-size:18.7px;line-height:1.75;max-width:800px}
.ic-deep-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(275px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);margin-bottom:2.5rem}
.ic-deep-card{background:var(--panel);padding:1.6rem}
.ic-deep-part{font-family:"Barlow Condensed",sans-serif;font-weight:900;font-size:1.8rem;color:var(--orange);line-height:1;margin-bottom:4px}
.ic-deep-sub{font-family:"Share Tech Mono",monospace;font-size:13.2px;color:var(--text3);letter-spacing:.06em;margin-bottom:1rem}
.ic-deep-features{list-style:none}
.ic-deep-features li{font-size:15.4px;color:var(--text2);padding:4px 0;border-bottom:1px solid var(--border);display:flex;gap:8px}
.ic-deep-features li:last-child{border-bottom:none}
.ic-deep-features li::before{content:"✓";color:var(--green);font-size:12.1px;flex-shrink:0}
.hall-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border)}
.hall-card{background:var(--panel);padding:1.6rem}
.hall-type-num{font-family:"Barlow Condensed",sans-serif;font-weight:900;font-size:2rem;color:var(--cyan);opacity:.35;line-height:1}
.hall-type-name{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:18.7px;letter-spacing:.08em;text-transform:uppercase;color:var(--text);margin-bottom:.8rem}
.hall-card p{font-size:16.5px;color:var(--text2);line-height:1.65;margin-bottom:.6rem}
.hall-rule{background:var(--black2);border:1px solid var(--border2);padding:8px 12px;font-family:"Share Tech Mono",monospace;font-size:13.2px;color:var(--link);margin-top:.8rem}
.bdiag{background:var(--panel);border:1px solid var(--border);padding:2rem;font-family:"Share Tech Mono",monospace;font-size:14.3px}
.bdiag-row{display:flex;align-items:center;gap:0;margin-bottom:8px;flex-wrap:wrap}
.bdiag-box{border:1px solid var(--border2);padding:6px 12px;color:var(--text2);background:var(--panel2);text-align:center;min-width:88px;white-space:nowrap;line-height:1.4}
.bdiag-box.main{border-color:var(--orange);color:var(--orange);background:var(--oranged)}
.bdiag-box.prot{border-color:var(--red);color:var(--red);background:rgba(255,68,68,.08)}
.bdiag-box.peri{border-color:var(--cyan);color:var(--cyan);background:var(--cyang)}
.bdiag-box.io{border-color:var(--green);color:var(--green);background:rgba(58,219,118,.08)}
.bdiag-arrow{color:var(--orange);padding:0 6px;font-size:15.4px}
.block-head,.hall-head{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:20.9px;letter-spacing:.1em;text-transform:uppercase;color:var(--text);margin-bottom:1rem;display:flex;align-items:center;gap:10px}
.block-head::before,.hall-head::before{content:"";display:block;width:3px;height:18px;background:var(--link)}
.hall-type-num{color:var(--link)}
.text-accent{color:var(--link)}
.note-box{background:var(--panel);border:1px solid var(--border);border-left:3px solid var(--link);padding:1rem 1.4rem;font-size:17.6px;color:var(--text2);line-height:1.6;margin-top:1rem}
.note-box a{font-weight:600}

/* ===== DOWNLOADS ===== */
.dl-hero{background:var(--panel);border:1px solid var(--border);border-top:3px solid var(--orange);padding:2.5rem;margin-bottom:2rem}
.dl-hero h2{font-family:"Barlow Condensed",sans-serif;font-weight:900;font-size:2.2rem;text-transform:uppercase;color:var(--text);margin-bottom:.5rem}
.dl-hero h2 span{color:var(--orange)}
.dl-hero p{color:var(--text2);font-size:18.7px;line-height:1.75;max-width:700px}
.dl-login-note{background:var(--panel);border:1px solid var(--border2);border-left:3px solid var(--gold);padding:1rem 1.4rem;font-size:17.6px;color:var(--text2);line-height:1.6;margin-bottom:2rem}
.dl-login-note strong{color:var(--gold)}
.dl-category-label{font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:19.8px;letter-spacing:.12em;text-transform:uppercase;color:var(--text);margin:2rem 0 .8rem;display:flex;align-items:center;gap:10px}
.dl-category-label::before{content:"";display:block;width:4px;height:18px;background:var(--orange)}
.dl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);margin-bottom:1.5rem}
.dl-card{background:var(--panel);padding:1.4rem 1.6rem;display:flex;align-items:center;gap:14px;text-decoration:none;transition:background .15s;border-left:3px solid transparent}
.dl-card:hover{background:var(--orangeg);border-left-color:var(--orange)}
.dl-icon{width:44px;height:44px;background:var(--oranged);border:1px solid var(--orange);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.dl-info{flex:1}
.dl-name{font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:20.9px;color:var(--text);margin-bottom:2px;letter-spacing:.04em}
.dl-meta{font-family:"Share Tech Mono",monospace;font-size:13.2px;color:var(--text3);letter-spacing:.06em}
.dl-type{font-family:"Share Tech Mono",monospace;font-size:13.2px;font-weight:700;color:var(--orange);border:1px solid var(--orange);padding:2px 7px;white-space:nowrap}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--black)}
::-webkit-scrollbar-thumb{background:var(--border2)}
::-webkit-scrollbar-thumb:hover{background:var(--orange)}

/* ===== TOUCH / ACCESSIBILITY ===== */
/* Larger tap targets on touch devices */
@media(hover:none){
  .nav-link,.cat-btn,.igui-tab,.view-btn,.dl-card,.qn-card{min-height:44px}
  .btn-primary,.btn-ghost,.nav-cta-mobile{min-height:48px;display:inline-flex;align-items:center;justify-content:center}
  .theme-toggle{width:44px;height:44px}
  /* On touch: tap the card to reveal preview (toggle via :focus-within) */
  .igp-has-preview:active .igp-card-preview{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}
  .igp-has-preview:active .igp-card-front{opacity:0;}
  .igp-hover-hint::after{content:" (tap)";color:var(--orange);}
}
/* Wiring SVGs scroll on small screens */
.wiring-svg-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.wiring-svg-wrap svg{min-width:400px}

/* ===== FOOTER ===== */
/* ===== FOOTER ===== */
footer{
  position:relative;z-index:1;
  background:var(--black2);
  border-top:1px solid var(--border);
  padding:0 2.5rem;
  transition:background .25s,border-color .25s;
}

/* Top row: brand + nav + socials */
.footer-top{
  display:flex;align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:1.2rem;
  padding:1.8rem 0 1.4rem;
  border-bottom:1px solid var(--border);
}
.footer-brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.footer-logo{height:28px;width:auto;display:block;object-fit:contain;opacity:.85;transition:opacity .2s}
.footer-logo:hover{opacity:1}
.footer-brand-asic{
  font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:18px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--nav-accent);
}
.footer-links{display:flex;gap:1.6rem;flex-wrap:wrap;align-items:center}
.footer-links a{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:17px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text3);
  text-decoration:none;padding-bottom:2px;
  border-bottom:1px solid transparent;
  transition:color .2s,border-color .2s;
}
.footer-links a:hover{color:var(--nav-accent);border-bottom-color:var(--nav-accent)}

/* Social icon buttons */
.footer-social{display:flex;align-items:center;gap:10px;flex-shrink:0}
.footer-social-btn{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;
  border:1px solid var(--border2);
  border-radius:4px;
  color:var(--text3);
  background:var(--panel);
  text-decoration:none;
  transition:color .2s,border-color .2s,background .2s,transform .15s;
}
.footer-social-btn svg{width:16px;height:16px;display:block;flex-shrink:0}
.footer-social-btn:hover{
  color:var(--nav-accent);
  border-color:var(--nav-accent);
  background:var(--orangeg);
  transform:translateY(-2px);
}
/* YouTube specific hover */
.footer-social-btn:nth-child(1):hover{color:#ff4444;border-color:#ff4444;background:rgba(255,68,68,.1)}
/* LinkedIn specific hover */
.footer-social-btn:nth-child(2):hover{color:#0a8aff;border-color:#0a8aff;background:rgba(10,138,255,.1)}
/* X/Twitter specific hover */
.footer-social-btn:nth-child(3):hover{color:var(--text);border-color:var(--text2);background:var(--panel2)}

/* Bottom row: copyright + version/date */
.footer-bottom{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:.6rem;
  padding:1rem 0;
}
.footer-copy{
  font-family:"Share Tech Mono",monospace;font-size:12.5px;color:var(--text3);
}
.footer-meta{
  display:flex;align-items:center;gap:.5rem;
  font-family:"Share Tech Mono",monospace;font-size:12px;color:var(--text3);
}
.footer-version{
  background:var(--panel);border:1px solid var(--border2);
  padding:2px 8px;border-radius:3px;
  color:var(--nav-accent);font-size:11px;font-weight:700;letter-spacing:.06em;
}
.footer-sep{opacity:.4}
.footer-updated{color:var(--text3);font-size:11px}

/* ===== KEY DESIGN CONSIDERATIONS CAROUSEL ===== */

/* Count badge in heading */
.kdc-heading-count{
  font-family:"Share Tech Mono",monospace;
  font-size:.65em;font-weight:400;
  color:var(--orange);opacity:.8;
  letter-spacing:.05em;
  vertical-align:middle;
  margin-left:.3em;
}

.kdc-carousel{
  position:relative;
  border:1px solid var(--border);
  background:var(--panel);
  margin-bottom:2.5rem;
  outline:none;
  overflow:hidden;
}
.kdc-carousel:focus-visible{box-shadow:0 0 0 2px var(--orange);}

/* Progress bar */
.kdc-progress-bar{height:3px;background:var(--border);width:100%;overflow:hidden;}
.kdc-progress-fill{height:100%;width:0%;background:var(--orange);will-change:width;}

/* Track */
.kdc-track-wrap{overflow:hidden;position:relative;min-height:300px;}
.kdc-track{position:relative;width:100%;}

/* Single-card slide — full width, one card */
.kdc-slide{
  width:100%;
  display:block;        /* single card, full width */
  position:absolute;
  top:0;left:0;
  opacity:0;z-index:0;
}
.kdc-slide:first-child{position:relative;opacity:1;z-index:2;}

/* Card fills slide */
.kdc-card-single{
  width:100%;
  min-height:300px;
}

.kdc-card{
  background:var(--panel);
  padding:3rem 3.5rem 2.5rem;
  display:flex;flex-direction:column;gap:1rem;
  position:relative;overflow:hidden;
  border-left:4px solid transparent;
  transition:background .22s,border-color .22s,box-shadow .22s;
}
.kdc-card:hover{
  background:var(--panel2);
  border-left-color:var(--orange);
  box-shadow:inset 0 0 0 1px var(--border2),4px 0 24px -8px var(--glow);
}
/* Shimmer on hover */
.kdc-card::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,var(--orangeg) 0%,transparent 50%);
  opacity:0;transition:opacity .3s;pointer-events:none;
}
.kdc-card:hover::before{opacity:1;}

/* ── Big number — the star of the hover effect ── */
.kdc-card-num{
  font-family:"Barlow Condensed",sans-serif;font-weight:900;
  font-size:6.25rem;line-height:1;
  color:var(--orange);
  opacity:.18;
  display:inline-block;
  margin-bottom:-.2rem;
  transition:
    opacity .28s ease,
    transform .28s ease,
    text-shadow .28s ease,
    color .28s ease;
  will-change:opacity,transform,text-shadow;
  user-select:none;
}
/* Hover: number pops — glows, scales, full colour */
.kdc-card:hover .kdc-card-num{
  opacity:1;
  transform:scale(1.1) translateX(4px);
  text-shadow:
    0 0 32px var(--orange),
    0 0 12px var(--orange),
    0 0  4px var(--orange2);
}
html.light-mode .kdc-card:hover .kdc-card-num{
  text-shadow:none;
  opacity:1;
}

.kdc-card-title{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;
  font-size:20.6px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--orange);
  transition:letter-spacing .22s,color .22s;
}
.kdc-card:hover .kdc-card-title{letter-spacing:.14em;}

.kdc-card-body{
  font-size:19.3px;color:var(--text2);line-height:1.75;
  max-width:780px;
  transition:color .22s;
}
.kdc-card:hover .kdc-card-body{color:var(--text);}
.kdc-card-body strong{color:var(--text);}

.kdc-card-meta{
  font-family:"Share Tech Mono",monospace;font-size:15px;
  color:var(--text3);letter-spacing:.06em;
  padding-top:.6rem;border-top:1px solid var(--border);
  margin-top:auto;
  transition:color .22s,border-color .22s;
}
.kdc-card:hover .kdc-card-meta{color:var(--orange);border-color:var(--border2);}

/* Controls row */
.kdc-controls{
  display:flex;align-items:center;justify-content:center;
  gap:1rem;padding:1.1rem 1.4rem;
  background:var(--black2);border-top:1px solid var(--border);
}
.kdc-btn{
  width:42px;height:42px;
  border:1px solid var(--border2);background:var(--panel);
  color:var(--text2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  border-radius:3px;flex-shrink:0;
  transition:background .15s,border-color .15s,color .15s,transform .15s;
}
.kdc-btn svg{width:22px;height:22px;flex-shrink:0;}
.kdc-btn:hover{background:var(--orangeg);border-color:var(--orange);color:var(--orange);transform:scale(1.1);}
.kdc-btn:active{transform:scale(.94);}

/* Dots */
.kdc-dots{display:flex;align-items:center;gap:8px;flex:1;justify-content:center;}
.kdc-dot{
  width:10px;height:10px;border-radius:50%;
  border:none;padding:0;cursor:pointer;
  background:var(--border2);
  transition:background .2s,width .25s,border-radius .25s,transform .2s;
}
.kdc-dot.active{
  background:var(--orange);
  border-radius:5px;
  width:28px;
}
.kdc-dot:hover:not(.active){background:var(--text3);transform:scale(1.3);}

/* Counter */
.kdc-counter{
  font-family:"Share Tech Mono",monospace;font-size:15px;
  color:var(--text3);display:flex;align-items:center;gap:3px;
  flex-shrink:0;min-width:36px;
}
.kdc-counter-sep{opacity:.4;}

/* Responsive */
@media(max-width:720px){
  .kdc-card{padding:1.6rem 1.4rem 1.4rem;}
  .kdc-card-num{font-size:4.4rem;}
  .kdc-card-title{font-size:18px;}
  .kdc-card-body{font-size:17px;}
  .kdc-card-meta{font-size:13px;}
  .kdc-track-wrap{min-height:200px;}
}
@media(max-width:480px){
  .kdc-controls{padding:.8rem 1rem;gap:.5rem;}
  .kdc-btn{width:34px;height:34px;}
  .kdc-btn svg{width:17px;height:17px;}
  .kdc-card-num{font-size:3.4rem;}
  .kdc-card-title{font-size:16px;}
  .kdc-card-body{font-size:15.5px;}
  .kdc-card-meta{font-size:12px;}
  .kdc-card{padding:1.2rem 1.1rem 1.1rem;}
  .kdc-dots{gap:5px;}
  .kdc-dot{width:8px;height:8px;}
  .kdc-dot.active{width:20px;}
  .kdc-counter{font-size:13px;}
}

.dl-login-note a{color:var(--link);font-weight:600}
.dl-login-note a:hover{color:var(--link-hover)}

/* ===== HAMBURGER MENU BUTTON (hidden on desktop) ===== */
#nav-hamburger{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:40px;height:40px;background:none;border:1px solid var(--border2);
  cursor:pointer;padding:8px;flex-shrink:0;transition:border-color .2s;
  border-radius:3px;
}
#nav-hamburger:hover{border-color:var(--nav-accent)}
#nav-hamburger span{display:block;width:100%;height:2px;background:var(--text2);transition:transform .25s,opacity .25s,background .25s;border-radius:1px}
#nav-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);background:var(--nav-accent)}
#nav-hamburger.open span:nth-child(2){opacity:0}
#nav-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);background:var(--nav-accent)}

/* Mobile nav drawer */
#nav-drawer{
  display:none;position:fixed;top:var(--nav-height);left:0;right:0;
  background:var(--nav-bg);border-bottom:2px solid var(--nav-accent);
  backdrop-filter:blur(18px);z-index:199;padding:1rem 1.5rem 1.5rem;
  flex-direction:column;gap:0;
  animation:drawerDown .2s ease;
}
@keyframes drawerDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
#nav-drawer.open{display:flex}
#nav-drawer .nav-link{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:22px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text2);
  padding:14px 0;border-bottom:1px solid var(--border);
  display:block;transition:color .2s;
}
#nav-drawer .nav-link:last-child{border-bottom:none}
#nav-drawer .nav-link.active,#nav-drawer .nav-link:hover{color:var(--nav-accent)}
#nav-drawer .nav-search-mobile{
  display:flex;align-items:center;gap:8px;background:var(--panel);
  border:1px solid var(--border2);padding:10px 14px;margin-top:1rem;
}
#nav-drawer .nav-search-mobile input{
  background:none;border:none;outline:none;color:var(--text);
  font-family:"Share Tech Mono",monospace;font-size:15.4px;flex:1;
}
#nav-drawer .nav-search-mobile svg{width:14px;height:14px;stroke:var(--text3);fill:none;flex-shrink:0}
#nav-drawer .nav-cta-mobile{
  display:inline-block;margin-top:1rem;font-family:"Barlow Condensed",sans-serif;
  font-weight:700;font-size:19.8px;letter-spacing:.1em;text-transform:uppercase;
  background:var(--accent2);color:#fff;padding:12px 24px;text-decoration:none;
  text-align:center;transition:background .2s;
}
#nav-drawer .nav-cta-mobile:hover{background:var(--nav-accent);color:var(--black)}

/* ===== RESPONSIVE — 1200px large tablet/small desktop ===== */
@media(max-width:1200px){
  .hero-inner{padding:3rem 2rem 2.5rem;gap:2.5rem}
  .hero-stats{grid-template-columns:repeat(4,1fr)}
  .main-wrap{padding:1.5rem 1.5rem}
  .ingui-wrap,.design-wrap,.dl-wrap{padding:2rem 1.5rem}
  .quicknav{padding:2rem 1.5rem}
  #site-nav{padding:0 1.5rem}
  #site-nav .nav-link{padding:0 14px;font-size:18.7px}
  #site-nav .nav-search input{width:110px}
}

/* ===== RESPONSIVE — 960px tablet ===== */
@media(max-width:960px){
  /* Nav: hide desktop links, show hamburger */
  #site-nav .nav-center{display:none}
  #site-nav .nav-search{display:none}
  #site-nav .nav-cta{display:none}
  #site-nav{padding:0 1.2rem}
  #nav-hamburger{display:flex}

  /* Page padding */
  .hero-inner{padding:2.5rem 1.2rem 2rem;grid-template-columns:1fr;gap:2rem}
  .main-wrap{padding:1.2rem 1.2rem}
  .ingui-wrap,.design-wrap,.dl-wrap{padding:1.5rem 1.2rem}
  .quicknav{padding:1.5rem 1.2rem;grid-template-columns:1fr 1fr}
  .page-header-inner{padding:1rem 1.2rem;flex-wrap:wrap;gap:10px}
  .page-header-sub{margin-left:0;width:100%;font-size:12.1px}

  /* Hero */
  .hero h1{font-size:clamp(2.4rem,6vw,4rem)}
  .hero-desc{font-size:17.6px;max-width:100%}
  .hero-stats{grid-template-columns:repeat(4,1fr)}
  .hero-actions{flex-wrap:wrap;gap:10px}

  /* Grids → 2 cols */
  .ic-grid{grid-template-columns:1fr 1fr}
  .ic-deep-grid{grid-template-columns:1fr 1fr}
  .detail-inner{grid-template-columns:1fr}
  .wiring-grid{grid-template-columns:1fr}
  .protect-grid{grid-template-columns:1fr 1fr}
  .angle-section{grid-template-columns:1fr}
  .hall-grid{grid-template-columns:1fr 1fr}
  .res-grid{grid-template-columns:1fr}

  /* iNGUI hero */
  .ingui-hero{grid-template-columns:1fr;gap:2rem}

  /* Design guide considerations grid */
  .design-considerations-grid{grid-template-columns:1fr 1fr}

  /* Footer */
  footer{padding:0 1.2rem}
  .footer-top{flex-direction:column;align-items:flex-start;gap:1rem;padding:1.4rem 0 1rem}
  .footer-links{flex-wrap:wrap;gap:.8rem}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:.4rem;padding:.8rem 0}

  /* Catalog filter scrollable */
  .cat-filter-inner{padding:0 1.2rem}

  /* Tabs */
  .ingui-tabs{flex-wrap:wrap}
  .igui-tab{flex:none;min-width:calc(50% - 1px)}
}

/* ===== RESPONSIVE — 720px mobile landscape / small tablet ===== */
@media(max-width:720px){
  :root{--nav-height:58px}
  html{font-size:18.7px}
  body{font-size:17.6px}

  /* Page header */
  .page-header-inner{padding:.8rem 1rem}
  .page-header-title{font-size:18.7px}

  /* Hero */
  .hero-inner{padding:2rem 1rem 1.5rem}
  .hero h1{font-size:clamp(2rem,8vw,3.2rem)}
  .hero-stats{grid-template-columns:repeat(2,1fr)}
  .hero-pills{gap:6px}
  .hero-pill{font-size:12.1px}
  .hero-actions{gap:8px}
  .btn-primary,.btn-ghost{font-size:15.4px;padding:10px 20px}

  /* Quicknav */
  .quicknav{grid-template-columns:1fr}

  /* Catalog */
  .main-wrap{padding:1rem}
  .content-header{flex-direction:column;align-items:flex-start;gap:.8rem}
  .toolbar-right{width:100%;flex-wrap:wrap}
  .toolbar-search{flex:1;min-width:0}
  .sort-select{width:100%}
  .ic-grid{grid-template-columns:1fr}
  .ic-deep-grid{grid-template-columns:1fr}
  .cat-filter-inner{padding:0 1rem}
  .cat-btn{font-size:13.2px;padding:10px 12px}

  /* Detail panel */
  .detail-inner{grid-template-columns:1fr}
  .detail-actions{gap:8px}
  .detail-actions .btn-primary,.detail-actions .btn-ghost{font-size:12.1px;padding:8px 14px}

  /* iNGUI */
  .ingui-wrap,.design-wrap,.dl-wrap{padding:1rem}
  .ingui-hero{padding:1.5rem}
  .ingui-hero h2{font-size:1.9rem}
  .ingui-hero p{font-size:16.5px}
  .ingui-badges{gap:5px}
  .ingui-badge{font-size:12.1px}
  .igp-title{font-size:17.6px}
  .igp-items li{font-size:14.3px}
  .protect-grid{grid-template-columns:1fr}
  .angle-section{grid-template-columns:1fr}
  .wiring-grid{grid-template-columns:1fr}

  /* iNGUI tabs */
  .ingui-tabs{gap:0}
  .igui-tab{font-size:12.1px;padding:9px 10px;min-width:calc(50% - 1px)}

  /* Design guide */
  .design-intro{padding:1.5rem}
  .design-intro h2{font-size:1.8rem}
  .hall-grid{grid-template-columns:1fr}
  .hall-card{padding:1.2rem}

  /* Design considerations inline grid */
  .sec-design-grid{grid-template-columns:1fr !important}

  /* Block diagram — allow scroll on small screens */
  .bdiag{padding:1rem;overflow-x:auto}
  .bdiag-row{flex-wrap:nowrap;min-width:max-content}

  /* Downloads */
  .dl-hero{padding:1.5rem}
  .dl-hero h2{font-size:1.8rem}
  .dl-hero p{font-size:16.5px}
  .dl-grid{grid-template-columns:1fr}

  /* Compare table — always scrollable */
  .compare-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* Footer */
  footer{padding:0 1rem}
  .footer-top{gap:.8rem;padding:1.2rem 0 .8rem}
  .footer-copy{font-size:11px}
  .footer-links a{font-size:15px}
  .footer-links{gap:.6rem}
  .footer-social-btn{width:32px;height:32px}
  .footer-social-btn svg{width:14px;height:14px}
  .footer-bottom{padding:.7rem 0}
}

/* ===== RESPONSIVE — 480px mobile portrait ===== */
@media(max-width:480px){
  html{font-size:17.1px}
  body{font-size:16.5px}

  /* Nav */
  #site-nav{padding:0 1rem}
  #site-nav .logo-asic{font-size:19.8px}
  #site-nav .logo-img{height:30px}

  /* Hero */
  .hero-inner{padding:1.5rem 1rem 1.2rem}
  .hero h1{font-size:clamp(1.8rem,9vw,2.8rem)}
  .hero-eyebrow{font-size:11px;letter-spacing:.18em}
  .stat-num{font-size:1.8rem}
  .stat-label{font-size:13.2px}
  .hero-stats{grid-template-columns:repeat(2,1fr)}

  /* IC cards: single col, tighter */
  .ic-card{padding:1rem 1.1rem}
  .ic-chip-box{width:48px;height:48px}
  .ic-partnum{font-size:17.6px}
  .ic-desc{font-size:13.2px}
  .ic-tag{font-size:11px}

  /* Cat filter — horizontal scroll */
  .cat-filter-inner{overflow-x:auto;flex-wrap:nowrap;padding:0 1rem;scrollbar-width:none}
  .cat-filter-inner::-webkit-scrollbar{display:none}
  .cat-btn{white-space:nowrap;flex-shrink:0}

  /* Detail */
  .detail-col{padding:1.2rem}
  .detail-part{font-size:2rem}
  .detail-fullname{font-size:15.4px}
  .res-grid{grid-template-columns:1fr}

  /* Protect grid 1 col */
  .protect-grid{grid-template-columns:1fr}

  /* iNGUI hero */
  .ingui-hero{padding:1.2rem;gap:1.5rem}
  .flow-step{gap:10px;padding:10px 8px;margin-left:0;transform:none !important;}
  .flow-num{font-size:1.4rem;width:24px}
  .flow-num-wrap{width:28px;}
  .flow-title{font-size:14.3px}
  .flow-desc{font-size:14.3px}
  .flow-step-arrow{display:none;}

  /* Tabs full-width on mobile */
  .igui-tab{font-size:11px;padding:8px 6px;min-width:20%}

  /* Downloads */
  .dl-card{padding:1rem 1.2rem;gap:10px}
  .dl-icon{width:38px;height:38px;font-size:17.6px}
  .dl-name{font-size:17.6px}

  /* Quicknav */
  .quicknav{padding:1rem}
  .qn-card{padding:1.4rem}
  .qn-title{font-size:1.1rem}
  .qn-desc{font-size:14.3px}

  /* Section heading */
  .section-title{font-size:19.8px}
  .sec-head h3{font-size:17.6px}

  /* Design guide */
  .ic-deep-part{font-size:1.5rem}
  .ic-deep-sub{font-size:12.1px}
  .ic-deep-features li{font-size:14.3px}

  /* Footer stacked */
  footer{padding:0 1rem}
  .footer-top{padding:1rem 0 .8rem;gap:.7rem}
  .footer-links{flex-wrap:wrap;gap:.5rem}
  .footer-links a{font-size:14px}
  .footer-copy{font-size:10px}
  .footer-meta{font-size:10px}
  .footer-brand-asic{font-size:15px}
  .footer-logo{height:22px}
  .footer-bottom{padding:.6rem 0}
}

/* ── Language switch (EN | 繁中) ─────────────────────────────────────────── */
#site-nav .lang-switch{display:flex;align-items:center;gap:4px;border:1px solid var(--border2);background:var(--panel);padding:4px 8px;flex-shrink:0}
.lang-switch .lang-opt{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:14px;letter-spacing:.08em;line-height:1;background:none;border:none;cursor:pointer;color:var(--text3);padding:3px 5px;transition:color .2s}
.lang-switch .lang-opt:hover{color:var(--text)}
.lang-switch .lang-opt.active{color:var(--nav-accent)}
.lang-switch .lang-sep{color:var(--border2);font-size:13px;user-select:none}
/* mobile drawer variant */
#nav-drawer .lang-switch-mobile{display:flex;align-items:center;gap:6px;border:1px solid var(--border2);background:var(--panel);padding:8px 12px;margin:6px 0;width:max-content}
#nav-drawer .lang-switch-mobile .lang-opt{font-size:16px;padding:4px 8px}