/* ============================================================
   VLSI EXPERT® — Corporate Site — Shared Stylesheet
   ============================================================ */
:root{
  --bg:#0A0C0F; --surface:#141821; --surface-2:#181C26; --line:#252B36;
  --ink:#EDEAE2; --ink-soft:#8B93A0;
  --orange:#E8510A; --orange-soft:#3A2016;
  --trace:#6FA8B0; --trace-dim:#3E5257;
  --radius:4px;
  --ease:cubic-bezier(.22,.9,.28,1);
}
@media (prefers-reduced-motion: reduce){ *{ transition-duration:1ms !important; animation-duration:1ms !important; } }
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; color:var(--ink); font-family:'IBM Plex Sans',system-ui,sans-serif;
  background-color:var(--bg);
  background-image:
    radial-gradient(circle at 15% 0%, rgba(232,81,10,0.08), transparent 45%),
    radial-gradient(circle at 100% 30%, rgba(111,168,176,0.06), transparent 40%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.018) 0px, rgba(255,255,255,0.018) 1px, transparent 1px, transparent 64px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.018) 0px, rgba(255,255,255,0.018) 1px, transparent 1px, transparent 64px);
  background-attachment:fixed;
}
a{ color:inherit; }
.wrap{ max-width:1060px; margin:0 auto; padding:0 24px; position:relative; }

/* ---------- NAV ---------- */
.topnav{ display:flex; align-items:center; justify-content:space-between; padding:18px 24px; border-bottom:1px solid var(--line); backdrop-filter:blur(6px); background:rgba(10,12,15,0.75); position:sticky; top:0; z-index:30; flex-wrap:wrap; gap:10px; }
.brand{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:15px; display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--ink); }
.brand .dot{ width:8px; height:8px; background:var(--orange); border-radius:50%; box-shadow:0 0 10px rgba(232,81,10,0.7); }
.navlinks{ display:flex; gap:18px; font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-soft); flex-wrap:wrap; }
.navlinks a{ text-decoration:none; color:var(--ink-soft); }
.navlinks a:hover{ color:var(--orange); }

/* ---------- BREADCRUMB ---------- */
.crumb{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-soft); padding:20px 0 0; }
.crumb a{ text-decoration:none; color:var(--ink-soft); }
.crumb a:hover{ color:var(--trace); }
.crumb span.cur{ color:var(--orange); }

/* ---------- HERO ---------- */
.hero{ padding:26px 0 30px; border-bottom:1px solid var(--line); position:relative; }
.hero::before{ content:''; position:absolute; top:-40px; left:-10%; width:60%; height:220px; background:radial-gradient(circle, rgba(232,81,10,0.14), transparent 70%); pointer-events:none; filter:blur(10px); }
.eyebrow{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--orange); margin-bottom:12px; position:relative; }
.hero h1{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:clamp(24px,3.6vw,38px); margin:0 0 14px; max-width:680px; line-height:1.18; position:relative; }
.analogy{ font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--trace); max-width:580px; margin:0 0 12px; border-left:2px solid var(--trace); padding-left:14px; line-height:1.6; position:relative; }
.hero p.sub{ color:var(--ink-soft); font-size:14px; max-width:520px; margin:0; position:relative; }

/* ---------- SECTION HEAD ---------- */
.sectionhead{ padding:36px 0 16px; }
.sectionhead .kicker{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--trace); margin-bottom:8px; }
.sectionhead h2{ font-family:'Space Grotesk',sans-serif; font-size:19px; margin:0; font-weight:600; }
.sectionhead p.sub{ color:var(--ink-soft); font-size:13.5px; margin:8px 0 0; max-width:560px; }

/* ---------- CARDS ---------- */
.cardgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; padding-bottom:40px; }
.card{ border:1px solid var(--line); background:linear-gradient(160deg, var(--surface), var(--surface-2)); border-radius:6px; padding:20px; display:flex; flex-direction:column; gap:9px; text-decoration:none; color:var(--ink); transition: border-color 200ms ease, transform 200ms ease; }
.card:hover{ border-color:var(--trace); transform:translateY(-2px); }
.cardtop{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.card .tag{ font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); }
.card .tag.redirect{ color:var(--trace); }
.card .tag.external{ color:#C9A227; }
.card h3{ font-family:'Space Grotesk',sans-serif; font-size:15.5px; margin:0; font-weight:600; }
.card .metaphor{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--trace); line-height:1.5; margin:0; }
.card p{ color:var(--ink-soft); font-size:12.5px; line-height:1.55; margin:0; flex:1; }
.card .goto{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--orange); }
.icon{ width:34px; height:34px; flex-shrink:0; }
.icon svg{ width:100%; height:100%; }
.icon path, .icon line, .icon rect, .icon circle{ stroke:var(--trace); stroke-width:1.4; fill:none; }
.card:hover .icon path, .card:hover .icon line, .card:hover .icon rect, .card:hover .icon circle{ stroke:var(--orange); }

/* ---------- WHY / DONE / CAN-DO ---------- */
.whygrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:6px; overflow:hidden; margin-bottom:40px; }
.whycol{ background:var(--surface); padding:22px 20px; position:relative; }
.whycol::before{ content:''; position:absolute; top:0; left:0; width:100%; height:2px; background:var(--orange); opacity:0; transition:opacity 200ms ease; }
.whycol:hover::before{ opacity:1; }
.whyindex{ font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:var(--trace); letter-spacing:.1em; margin-bottom:8px; }
.whycol h4{ font-family:'Space Grotesk',sans-serif; font-size:14.5px; margin:0 0 8px; font-weight:600; }
.whycol p{ color:var(--ink-soft); font-size:12.5px; line-height:1.6; margin:0; }
.whycol ul{ margin:6px 0 0; padding-left:15px; color:var(--ink-soft); font-size:12px; line-height:1.65; }

/* ---------- PROOF STRIP ---------- */
.proof{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:26px 0; display:flex; gap:40px; flex-wrap:wrap; }
.proof .stat{ font-family:'Space Grotesk',sans-serif; font-size:26px; font-weight:600; background:linear-gradient(90deg, var(--ink), var(--trace)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.proof .statlabel{ font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.08em; margin-top:4px; }

/* ---------- CROSSLINK ---------- */
.crosslink{ padding:30px 0; text-align:center; }
.crosslink p{ color:var(--ink-soft); font-size:12.5px; margin-bottom:10px; }
.pillrow{ display:flex; gap:9px; justify-content:center; flex-wrap:wrap; }
.pill{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; border:1px solid var(--line); padding:7px 13px; border-radius:16px; color:var(--ink-soft); text-decoration:none; }
.pill:hover{ border-color:var(--orange); color:var(--orange); }

/* ---------- FOOTER CTA ---------- */
.footercta{ background:linear-gradient(135deg, var(--surface), var(--surface-2)); border:1px solid var(--line); border-radius:6px; margin:0 0 50px; padding:28px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; position:relative; overflow:hidden; }
.footercta::after{ content:''; position:absolute; right:-40px; top:-40px; width:180px; height:180px; background:radial-gradient(circle, rgba(232,81,10,0.12), transparent 70%); }
.footercta h4{ font-family:'Space Grotesk',sans-serif; font-size:15.5px; margin:0 0 4px; position:relative; }
.footercta p{ color:var(--ink-soft); font-size:12.5px; margin:0; position:relative; }
.cta{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; text-transform:uppercase; padding:10px 18px; border-radius:2px; background:var(--orange); color:#fff !important; border:none; white-space:nowrap; position:relative; box-shadow:0 4px 18px rgba(232,81,10,0.25); cursor:pointer; text-decoration:none; display:inline-block; }

/* ---------- SITE FOOTER ---------- */
footer.sitefoot{ border-top:1px solid var(--line); padding:26px 24px; text-align:center; font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--ink-soft); }
footer.sitefoot a{ color:var(--trace); text-decoration:none; margin:0 6px; }
footer.sitefoot a:hover{ color:var(--orange); }
footer.sitefoot .flinks{ margin-top:10px; }

/* ---------- HOME CHIP ---------- */
.clkrow{ text-align:center; margin:30px 0 0; }
.clkpin{ display:inline-flex; align-items:center; gap:9px; cursor:pointer; background:none; border:1px solid var(--line); border-radius:20px; font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-soft); padding:9px 16px; }
.clkpin:hover, .clkpin.active{ border-color:var(--trace); color:var(--ink); }
.clkpin .sq{ width:7px; height:7px; background:var(--trace); animation:blink 1.4s steps(2) infinite; }
@keyframes blink{ 50%{ opacity:.15; } }
.diegrid{ display:grid; grid-template-columns:190px 1fr 190px; gap:0; align-items:center; margin:26px 0 8px; }
.pincol{ display:flex; flex-direction:column; gap:8px; }
.pincol.left{ align-items:flex-end; } .pincol.right{ align-items:flex-start; }
.axislabel{ font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:4px; }
.pincol.left .axislabel{ text-align:right; width:100%; }
.pin{ display:flex; align-items:center; gap:6px; cursor:pointer; background:none; border:none; padding:0; color:var(--ink); font-family:inherit; }
.pincol.right .pin{ flex-direction:row; } .pincol.left .pin{ flex-direction:row-reverse; }
.pin .arrow{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--line); transition:color 180ms var(--ease); }
.pin:hover .arrow, .pin.active .arrow{ color:var(--trace); }
.pin.active .arrow{ color:var(--orange); }
.pin .lbl{ font-size:12px; padding:6px 10px; border:1px solid var(--line); border-radius:2px; background:var(--surface); white-space:nowrap; transition:border-color 180ms var(--ease); }
.pin:hover .lbl, .pin.active .lbl{ border-color:var(--trace); }
.pin.active .lbl{ background:var(--orange-soft); border-color:var(--orange); }
.die{ background:var(--surface); border:1px solid var(--line); border-radius:6px; min-height:190px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:16px; position:relative; overflow:hidden; }
.partno{ font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--ink-soft); margin-bottom:4px; }
.modelabel{ font-family:'IBM Plex Mono',monospace; font-size:9px; color:var(--trace); letter-spacing:.08em; text-transform:uppercase; margin-bottom:10px; min-height:11px; }
.bus{ position:relative; width:100%; height:2px; background:var(--line); margin-bottom:12px; }
.traveler{ position:absolute; top:-3px; left:0; width:7px; height:7px; border-radius:50%; background:var(--orange); opacity:0; box-shadow:0 0 8px 2px rgba(232,81,10,.6); }
.traveler.go{ animation: travelhome 900ms var(--ease) forwards; }
@keyframes travelhome{ 0%{ left:0%; opacity:1; } 100%{ left:100%; opacity:1; } }
.blocks{ display:flex; gap:7px; flex-wrap:wrap; justify-content:center; margin-bottom:12px; min-height:34px; }
.blk{ border:1px solid var(--line); background:#191D22; border-radius:2px; padding:8px 10px; font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:var(--ink-soft); transition:border-color 220ms var(--ease), color 220ms var(--ease), background 220ms var(--ease); }
.blk.lit{ border-color:var(--orange); color:var(--ink); background:var(--orange-soft); }
.outrow2{ display:flex; align-items:center; gap:6px; }
.outrow2 .lbl{ font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--ink-soft); }
.outrow2 .arrow{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--line); transition:color 220ms var(--ease); }
.outrow2.lit .arrow, .outrow2.lit .lbl{ color:var(--orange); }
@media (max-width:820px){ .diegrid{ grid-template-columns:1fr; gap:14px; } .pincol.left, .pincol.right{ align-items:stretch; } .pincol.left .pin, .pincol.right .pin{ flex-direction:row; } .pin .lbl{ width:100%; } }

/* ---------- HOME RESULT PANEL ---------- */
.homeresult{ max-width:700px; margin:22px auto 50px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); overflow:hidden; max-height:0; opacity:0; transition: max-height 420ms var(--ease), opacity 300ms var(--ease); }
.homeresult.open{ max-height:600px; opacity:1; overflow-y:auto; }
.homeresult-inner{ padding:24px 28px; }
.result-kicker{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--trace); display:block; margin-bottom:8px; }
.homeresult h3{ font-family:'Space Grotesk',sans-serif; font-size:18px; margin:0 0 8px; }
.homeresult p{ color:var(--ink-soft); font-size:13.5px; line-height:1.55; margin:0 0 14px; }
.sectioncards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; margin-bottom:16px; }
.seccard{ border:1px solid var(--line); border-radius:var(--radius); padding:14px; text-align:left; background:#191D22; cursor:pointer; font-family:'IBM Plex Sans',sans-serif; color:var(--ink); display:block; width:100%; text-decoration:none; }
.seccard:hover{ border-color:var(--trace); }
.seccard .sctag{ font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:var(--trace); text-transform:uppercase; letter-spacing:.06em; display:block; margin-bottom:5px; }
.seccard .sctag.redirect{ color:#C9A227; }
.seccard .sclabel{ font-size:13px; font-weight:600; display:block; margin-bottom:4px; }
.seccard .scdest{ font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--ink-soft); }
.hubcta{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; padding-top:14px; border-top:1px solid var(--line); }
.ctaghost{ font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; padding:9px 16px; border-radius:var(--radius); cursor:pointer; background:none; color:var(--ink); border:1px solid var(--line); text-decoration:none; display:inline-block; }
.closepanel{ background:none; border:none; color:var(--ink-soft); cursor:pointer; font-size:11.5px; font-family:'IBM Plex Mono',monospace; }
.closepanel:hover{ color:var(--orange); }
.exploreall{ margin-top:14px; padding-top:14px; border-top:1px dashed var(--line); }
.linklike{ background:none; border:none; color:var(--ink-soft); font-family:'IBM Plex Mono',monospace; font-size:11px; cursor:pointer; padding:0; }
.linklike:hover{ color:var(--orange); }
.destchip{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-soft); display:flex; align-items:center; gap:8px; }
.destchip .pulse{ width:6px; height:6px; border-radius:50%; background:var(--orange); animation:pulse2 1.5s infinite; }
@keyframes pulse2{ 0%,100%{ opacity:1;} 50%{ opacity:.25; } }
.contactpin2{ display:flex; align-items:center; gap:6px; cursor:pointer; background:none; border:none; }
.contactpin2 .lbl{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--ink-soft); letter-spacing:.06em; padding:5px 10px; border:1px dashed var(--line); border-radius:12px; }
.contactpin2:hover .lbl{ border-color:var(--trace); color:var(--ink); }