/* ============ HOME (index.html) ============ */

/* HERO */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;color:#fff;overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:-2;background:var(--ink)}
.hero__bg video{width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(115deg,rgba(18,17,16,.74) 0%,rgba(18,17,16,.42) 46%,rgba(18,17,16,.18) 100%)}
.hero__inner{width:100%;padding-top:var(--nav-h)}
.hero__eyebrow{font-family:var(--f-display);font-size:.78rem;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(255,255,255,.82);margin-bottom:1.6em;
  opacity:0;transform:translateY(20px);animation:hreveal .9s var(--e-out) .2s forwards}
.hero h1{font-size:clamp(2.6rem,8.2vw,7rem);font-weight:800;letter-spacing:-.02em;margin-bottom:.45em}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero h1 .line{display:block;overflow:hidden}
.hero h1 .line span{display:block;transform:translateY(110%);animation:hline 1s var(--e-out) forwards}
.hero h1 .line:nth-child(1) span{animation-delay:.35s}
.hero h1 .line:nth-child(2) span{animation-delay:.5s}
.hero__sub{max-width:46ch;font-size:clamp(1rem,1.5vw,1.18rem);color:rgba(255,255,255,.82);line-height:1.7;
  opacity:0;transform:translateY(20px);animation:hreveal .9s var(--e-out) .8s forwards}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:2.2em;
  opacity:0;transform:translateY(20px);animation:hreveal .9s var(--e-out) 1s forwards}
.hero__scroll{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;
  align-items:center;gap:10px;font-family:var(--f-display);font-size:.66rem;letter-spacing:.24em;color:rgba(255,255,255,.7);
  opacity:0;animation:hreveal 1s var(--e-out) 1.3s forwards}
.hero__scroll i{width:1px;height:46px;background:linear-gradient(rgba(255,255,255,.8),rgba(255,255,255,0));
  animation:scrolldrop 1.8s ease-in-out infinite}
@keyframes hline{to{transform:none}}
@keyframes hreveal{to{opacity:1;transform:none}}
@keyframes scrolldrop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* INTRO + STATS */
.intro{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(40px,6vw,90px);align-items:center}
.intro__txt h2{font-size:clamp(1.9rem,4vw,3.1rem);margin:.4em 0 .5em}
.intro__stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.stat{background:var(--paper);padding:clamp(22px,3vw,34px)}
.stat .count{font-size:clamp(2.4rem,5vw,3.6rem)}
.stat sup{font-size:1.4rem;color:var(--accent);font-family:var(--f-display);font-weight:700;vertical-align:super}
.stat p{font-size:.86rem;color:var(--muted);margin-top:.6em;line-height:1.5}

/* SYSTEM LIST */
.syslist{border-top:1px solid var(--line)}
.sysrow{display:grid;grid-template-columns:64px 280px 1fr 40px;gap:clamp(20px,3vw,48px);align-items:center;
  padding:clamp(24px,3vw,38px) 0;border-bottom:1px solid var(--line);transition:.4s var(--e)}
.sysrow:hover{padding-inline:clamp(8px,1.5vw,22px);background:rgba(255,255,255,.5)}
.sysrow__no{color:var(--accent)}
.sysrow__media{aspect-ratio:3/2;border-radius:2px}
.sysrow__txt h3{font-size:clamp(1.4rem,2.6vw,2.1rem);margin-bottom:.35em}
.sysrow__txt p{color:var(--graphite);max-width:60ch;font-size:.96rem}
.sysrow__tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:1em}
.sysrow__ar{font-size:1.4rem;color:var(--muted);transition:.4s var(--e);justify-self:end}
.sysrow:hover .sysrow__ar{color:var(--accent);transform:translateX(8px)}

/* TEXTURE/COLOR scroll */
.tc-head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:clamp(30px,4vw,50px)}
.tc-head h2{font-size:clamp(1.8rem,3.6vw,2.9rem);margin-top:.4em}
.tc-scroll{overflow-x:auto;scrollbar-width:thin;padding-inline:var(--gut);scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.tc-track{display:flex;gap:clamp(14px,1.6vw,22px);padding-bottom:14px;width:max-content}
.tc-card{width:clamp(240px,28vw,340px);scroll-snap-align:start;position:relative}
.tc-card .media{aspect-ratio:4/5;border-radius:2px}
.tc-card span{display:inline-flex;margin-top:14px;font-family:var(--f-display);font-weight:600;font-size:1.05rem}
.tc-card--color .media{outline:2px solid var(--accent);outline-offset:-2px}
.tc-card--color span{color:var(--accent)}

/* REFERENCE grid */
.refgrid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:clamp(14px,1.6vw,24px)}
.refcard{position:relative;display:block}
.refcard .media{aspect-ratio:3/4;border-radius:2px}
.refcard--lg{grid-row:span 1}
.refcard--lg .media{aspect-ratio:auto;height:100%}
.refcard__cap{position:absolute;left:18px;bottom:16px;color:#fff;z-index:2;text-shadow:0 2px 16px rgba(0,0,0,.5)}
.refcard__cap span{display:block;font-family:var(--f-display);font-weight:700;font-size:1.1rem}
.refcard__cap small{font-size:.78rem;color:rgba(255,255,255,.8);letter-spacing:.06em}
.refcard::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 50%,rgba(0,0,0,.55));z-index:1;border-radius:2px}

/* SUPPORT cta */
.support-cta{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,80px);align-items:center}
.support-cta h2{font-size:clamp(1.8rem,3.6vw,2.8rem);margin:.4em 0 .5em}
.support-list{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.support-list li{background:var(--mist);display:grid;grid-template-columns:80px 1fr auto;gap:18px;align-items:center;padding:22px 26px;transition:.3s var(--e)}
.support-list li:hover{background:#fff}
.support-list .mono{color:var(--accent);font-weight:700;font-size:.82rem;letter-spacing:.1em}
.support-list b{font-size:1.02rem}
.support-list small{color:var(--muted);font-size:.84rem}

/* CONTACT band */
.contact-band{position:relative;padding-block:clamp(80px,12vw,160px);color:#fff;text-align:center;overflow:hidden}
.contact-band__bg{position:absolute;inset:0;z-index:-2}
.contact-band__bg img{width:100%;height:100%;object-fit:cover}
.contact-band::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(18,17,16,.62)}
.contact-band h2{font-size:clamp(2rem,5vw,3.6rem);margin:.4em 0 .4em}
.contact-band p{color:rgba(255,255,255,.82);margin-bottom:1.8em}

@media (max-width:920px){
  .intro,.support-cta{grid-template-columns:1fr}
  .tc-head{grid-template-columns:1fr}
  .sysrow{grid-template-columns:48px 1fr;grid-template-areas:"no txt" "media media";row-gap:18px}
  .sysrow__no{grid-area:no}.sysrow__txt{grid-area:txt}.sysrow__media{grid-area:media;aspect-ratio:16/9}
  .sysrow__ar{display:none}
  .refgrid{grid-template-columns:1fr 1fr}
  .refcard--lg{grid-column:span 2}.refcard--lg .media{aspect-ratio:16/9}
}
@media (max-width:560px){
  .intro__stats{grid-template-columns:1fr 1fr}
  .refgrid{grid-template-columns:1fr}.refcard--lg{grid-column:span 1}
  .support-list li{grid-template-columns:60px 1fr}
}