/* ============ PRODUCTS ============ */

/* sticky tabs */
.systabs{position:sticky;top:64px;z-index:500;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.systabs__inner{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.systabs__inner::-webkit-scrollbar{display:none}
.systab{display:inline-flex;align-items:center;gap:8px;padding:18px 22px;font-family:var(--f-display);font-weight:600;
  font-size:.92rem;color:var(--muted);white-space:nowrap;border-bottom:2px solid transparent;transition:.3s var(--e)}
.systab .mono{font-size:.7rem;color:var(--line)}
.systab:hover{color:var(--ink)}
.systab.is-active{color:var(--ink);border-bottom-color:var(--accent)}
.systab.is-active .mono{color:var(--accent)}
.systab--link{margin-left:auto;color:var(--accent)}

/* overview */
.sysover{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,5vw,72px);align-items:center;margin-bottom:clamp(40px,5vw,64px)}
.sysover__txt h2{font-size:clamp(1.9rem,4vw,3rem);margin:.35em 0 .55em}
.sysover__feat{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px;border-top:1px solid var(--line);padding-top:28px}
.sysover__feat b{font-family:var(--f-display);display:block;margin-bottom:.3em}
.sysover__feat p{font-size:.84rem;color:var(--muted);line-height:1.5}
.sysover__media{aspect-ratio:4/5;border-radius:2px}

/* chips */
.syschips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px}
.chip{padding:.7em 1.3em;border:1px solid var(--line);border-radius:99px;font-family:var(--f-display);font-weight:600;
  font-size:.84rem;color:var(--graphite);transition:.3s var(--e)}
.chip:hover{border-color:var(--ink)}
.chip.is-active{background:var(--ink);color:#fff;border-color:var(--ink)}

/* interactive cross-section */
.sysdetail{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:start;
  background:var(--paper);border:1px solid var(--line);padding:clamp(22px,3vw,40px)}
.section--mist .sysdetail{background:#fff}
.sysdetail__hint{font-size:.8rem;color:var(--muted);margin-bottom:18px}
.layerstack{display:flex;flex-direction:column;gap:4px}
.layer{display:grid;grid-template-columns:42px 14px 1fr;gap:14px;align-items:center;width:100%;text-align:left;
  padding:14px 14px;border:1px solid var(--line-soft);background:var(--mist);transition:.3s var(--e);position:relative;overflow:hidden}
.layer__no{font-family:var(--f-display);font-weight:700;font-size:.82rem;color:var(--muted);transition:.3s var(--e)}
.layer__bar{width:14px;height:26px;background:var(--mist-2);border-radius:2px;transition:.3s var(--e)}
.layer:nth-child(1) .layer__bar{background:#cfcabf}
.layer:nth-child(2) .layer__bar{background:#bfb6a6}
.layer:nth-child(3) .layer__bar{background:#d8d2c4}
.layer:nth-child(4) .layer__bar{background:#c4bcae}
.layer:nth-child(5) .layer__bar{background:#e0dacd}
.layer:nth-child(6) .layer__bar{background:#cdbfae}
.layer__t{font-size:.95rem;font-weight:500}
.layer:hover{transform:translateX(4px)}
.layer.is-on{background:var(--ink);border-color:var(--ink)}
.layer.is-on .layer__no{color:var(--accent)}
.layer.is-on .layer__t{color:#fff}
.layer.is-on .layer__bar{background:var(--accent)}

.sysdetail__info{position:sticky;top:130px}
.layerinfo__no{display:block;font-size:1.1rem;color:var(--accent);font-weight:700;margin-bottom:12px}
.layerinfo__media{aspect-ratio:16/10;border-radius:2px;margin-bottom:20px}
.sysdetail__info h3{font-size:clamp(1.3rem,2.4vw,1.8rem);margin-bottom:.4em}
.sysdetail__info p{color:var(--graphite);min-height:5.5em}
.layerinfo__cta{margin-top:18px}

/* references */
.sysref{margin-top:clamp(40px,5vw,64px)}
.sysref__t{font-family:var(--f-display);font-size:1.1rem;display:flex;align-items:center;gap:12px;margin-bottom:20px}
.sysref__t .mono{color:var(--accent);font-size:.74rem;border:1px solid var(--accent);padding:.2em .6em;border-radius:99px}
.sysref__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.5vw,20px)}
.refthumb{position:relative;overflow:hidden;aspect-ratio:4/3;border-radius:2px}
.refthumb img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--e)}
.refthumb:hover img{transform:scale(1.07)}
.refthumb span{position:absolute;left:14px;bottom:12px;color:#fff;font-family:var(--f-display);font-weight:600;font-size:.92rem;z-index:2;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.refthumb::after{content:"⤢";position:absolute;top:12px;right:12px;width:34px;height:34px;display:grid;place-items:center;
  background:rgba(255,255,255,.9);border-radius:50%;z-index:2;opacity:0;transform:scale(.8);transition:.3s var(--e)}
.refthumb:hover::after{opacity:1;transform:scale(1)}
.refthumb::before{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(0,0,0,.5));z-index:1}

/* interior grid */
.intgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px)}
.intcard{display:block;border:1px solid var(--line);transition:.3s var(--e)}
.intcard:hover{box-shadow:var(--shadow-soft)}
.intcard .media{aspect-ratio:16/9}
.intcard__c{padding:26px 28px}
.intcard__c b{font-family:var(--f-display);font-size:1.2rem;display:block;margin-bottom:.4em}
.intcard__c p{color:var(--graphite);font-size:.92rem}
.intcard__c span{display:inline-block;margin-top:14px;color:var(--accent);font-weight:600;font-family:var(--f-display);font-size:.86rem}

/* product table */
.ptable{border:1px solid var(--line);background:#fff}
.ptable__head,.ptable__row{display:grid;grid-template-columns:1.1fr 1.4fr .9fr 1.2fr .6fr;gap:16px;align-items:center;padding:16px 24px}
.ptable__head{background:var(--ink);color:#fff;font-family:var(--f-display);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase}
.ptable__row{border-top:1px solid var(--line);transition:.25s var(--e)}
.ptable__row:hover{background:var(--mist)}
.ptable__row b{font-family:var(--f-display)}
.ptable__row a{color:var(--accent);font-weight:600;font-size:.86rem;justify-self:end}
.ptable__row span{font-size:.92rem;color:var(--graphite)}

/* spec modal */
.specbox{max-width:980px}
.specbox__grid{display:grid;grid-template-columns:.9fr 1.1fr}
.specbox__media{min-height:100%}
.specbox__media img{width:100%;height:100%;object-fit:cover}
.specbox__txt{padding:clamp(28px,4vw,48px)}
.specbox__txt h3{font-size:clamp(1.5rem,3vw,2.2rem);margin:.3em 0 .5em}
.specbox__h5{font-family:var(--f-display);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:24px 0 12px}
.speclist{display:grid;gap:8px}
.speclist li{display:grid;grid-template-columns:32px 1fr;gap:12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line-soft);font-size:.95rem}
.speclist span{font-family:var(--f-display);font-weight:700;color:var(--accent);font-size:.82rem}
.specbox__meta{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:24px 0}
.specbox__meta div{background:var(--mist);padding:14px;font-size:.84rem}
.specbox__meta b{display:block;color:var(--muted);font-size:.72rem;margin-bottom:.3em;font-weight:600}

/* reference modal */
.refbox{max-width:920px;display:grid}
.refbox__img{background:var(--ink)}
.refbox__img img{width:100%;max-height:64vh;object-fit:cover}
.refbox__meta{padding:clamp(24px,3vw,40px)}
.refbox__meta h3{font-family:var(--f-display);font-size:clamp(1.4rem,3vw,2rem);margin-bottom:18px}
.refbox__meta ul{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.refbox__meta li{display:flex;flex-direction:column;gap:3px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.refbox__meta span{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-family:var(--f-display)}

@media (max-width:900px){
  .systabs{top:64px}
  .sysover,.sysdetail,.intgrid{grid-template-columns:1fr}
  .sysover__feat{grid-template-columns:1fr 1fr}
  .sysdetail__info{position:static}
  .sysdetail__info p{min-height:0}
  .sysref__grid{grid-template-columns:1fr 1fr}
  .specbox__grid{grid-template-columns:1fr}
  .specbox__media{aspect-ratio:16/10}
  .ptable__head{display:none}
  .ptable__row{grid-template-columns:1fr 1fr;gap:6px 16px;padding:16px 18px}
  .ptable__row span,.ptable__row a{justify-self:start}
  .ptable__row span[data-l]::before{content:attr(data-l) " · ";color:var(--muted);font-size:.7rem;text-transform:uppercase}
}
@media (max-width:560px){
  .sysover__feat{grid-template-columns:1fr}
  .sysref__grid{grid-template-columns:1fr}
  .refbox__meta ul{grid-template-columns:1fr}
}