/* METAiD product page — page-specific rules. Everything else comes from site.css (homepage values). */

/* ---------- 01 · hero (same frame as the homepage hero; copy left, one small scene right) ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:var(--bg);isolation:isolate}
.presence{position:absolute;z-index:1;right:0;top:50%;width:min(46vw,780px);height:min(80%,740px);transform:translateY(-46%)}
.presence canvas{position:absolute;inset:0;width:100%;height:100%;display:block;
  -webkit-mask-image:radial-gradient(ellipse 62% 60% at 50% 52%,#000 48%,transparent 100%);
  mask-image:radial-gradient(ellipse 62% 60% at 50% 52%,#000 48%,transparent 100%)}
.presence .pc-meta{left:14%;top:14%;opacity:0;transition:opacity .8s ease}
.presence .pc-meta.on{opacity:.85}
.scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse 48% 42% at 22% 48%,rgba(2,6,13,.55),rgba(2,6,13,0) 70%)}
.copy{position:absolute;z-index:4;left:5%;top:calc(34% + 28px);max-width:44rem;animation:rise 1.1s cubic-bezier(.2,.7,.2,1) .15s both}
.copy h1{font-size:clamp(44px,5vw,80px);line-height:1.04;font-weight:300;letter-spacing:-.02em;margin:0 0 20px}
.copy p{font-size:clamp(18px,1.55vw,26px);font-weight:300;color:var(--ink-2);margin:0;line-height:1.35}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Human + Space = Physical Presence — words light up in step with the scene */
.copy .eq{margin:44px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;
  font-size:max(15px,1.7vw);font-weight:300;line-height:1.35}
.eq .op{color:var(--ink-3);opacity:.6}
.eq #eqH{color:#ffb27a}
.eq #eqS{color:#9fd0ff}
.eq #eqR{color:#f4f7fb}
.eq.anim #eqH,.eq.anim #eqS,.eq.anim #eqR{opacity:.28;transition:opacity .7s ease}
.eq.anim #eqH.on,.eq.anim #eqS.on,.eq.anim #eqR.on{opacity:1}

/* ---------- shared section frame ---------- */
.txt{position:relative;padding:8vw 5vw 6vw;border-top:1px solid var(--hp-line)}
.txt--glow-top{background:radial-gradient(ellipse 60% 50% at 50% 0%,rgba(57,115,173,.11),transparent 70%),var(--hp-bg)}
.txt--glow-mid{background:radial-gradient(ellipse 55% 42% at 50% 56%,rgba(58,125,184,.13),transparent 70%),var(--hp-bg)}
.txt-head{max-width:60rem}
.body-2{font-weight:300;font-size:max(15px,1.05vw);line-height:1.55;color:#9eabbc}

/* ---------- 02 · the problem ---------- */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:5vw;margin-top:5vw}
.pair>div{border-top:1px solid var(--hp-line);padding-top:20px}
.pair small{display:block;color:#7f93aa;margin-bottom:22px}
.pair svg{display:block;width:100%;max-width:440px;height:auto;margin-bottom:26px}
.pair strong{display:block;font-weight:300;letter-spacing:-.015em;line-height:1.25;font-size:max(17px,var(--t2));color:#f4f7fb;max-width:26em}
.core{margin-top:5vw;max-width:46rem;font-weight:300;line-height:1.4;font-size:max(15px,var(--t2));color:#dbe3ee}

.pv .base{stroke:rgba(180,210,240,.16);stroke-width:1;fill:none}
.pv .seg{stroke:var(--hp-blue);stroke-width:1.2;stroke-dasharray:3 6;fill:none;opacity:.5}
.pv .node{fill:#02060d;stroke:rgba(190,215,240,.5);stroke-width:1.2}
.pv .halo{fill:none;stroke:rgba(190,215,240,.14);stroke-width:1}
.pv .ghost{opacity:.5}
.pv .ghost2{opacity:.28}
.pv .lb{font:11px var(--mono);letter-spacing:.2em;fill:#94a7bd;text-anchor:middle}
.pv .ring{fill:rgba(2,6,13,.9);stroke:var(--hp-amber);stroke-width:1.4;opacity:.8}
.pv .ring-o{fill:none;stroke:var(--hp-amber);stroke-width:1;stroke-dasharray:2 7;opacity:.42}
.pv .person{fill:none;stroke:var(--hp-amber);stroke-width:1.5;stroke-linecap:round;opacity:.9}
.pv .lb-a{fill:var(--hp-amber)}

/* ---------- 03 · why ---------- */
.why,.do{display:grid;grid-template-columns:repeat(3,1fr);margin-top:4.6vw;border-top:1px solid var(--hp-line)}
.why>div,.do>div{border-left:1px solid var(--hp-line);padding:2.2vw max(20px,3vw) 3.2vw}
.why>div:first-child,.do>div:first-child{border-left:0;padding-left:0}
.why h3{margin:18px 0 14px;font-weight:300;font-size:max(20px,1.6vw);letter-spacing:-.015em;line-height:1.25;color:#f4f7fb}

/* ---------- 04 · what is METAiD ---------- */
.layers{margin-top:4.6vw}
.layer{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:5vw;border-top:1px solid var(--hp-line);padding:3vw 0}
.layer:last-child{border-bottom:1px solid var(--hp-line)}
.layer h3{margin:16px 0 10px;font-weight:300;font-size:max(22px,2vw);letter-spacing:-.02em;line-height:1.15;color:#f4f7fb}
.layer .tags{margin:0 0 14px;color:#9fd0ff}
.layer .body-2{max-width:32rem}
.layer .more{display:inline-block;margin-top:18px;color:#dfe8f4;font-weight:300;font-size:14px;border-bottom:1px solid var(--line);padding-bottom:3px;transition:color .2s,border-color .2s}
.layer .more:hover{color:#fff;border-color:#cfd8e4}

.prod{display:grid;grid-template-columns:1.3fr 1fr;border:1px solid var(--hp-line);
  background:radial-gradient(ellipse 70% 62% at 50% 56%,rgba(57,115,173,.24),transparent 74%)}
.prod figure{margin:0;padding:34px 20px 24px;display:flex;flex-direction:column;align-items:center;gap:26px}
.prod figure+figure{border-left:1px solid var(--hp-line)}
.prod .imgs{display:flex;align-items:flex-end;justify-content:center;gap:clamp(12px,2vw,30px)}
.prod img{height:clamp(190px,19vw,310px);width:auto;display:block}

.screen{margin:0;border:1px solid var(--hp-line)}
.screen img{display:block;width:100%;height:auto}
.screen figcaption{padding:14px 18px;border-top:1px solid var(--hp-line);color:#7f93aa}

/* ---------- 05 · what it can do ---------- */
.do ul{list-style:none;margin:26px 0 0;padding:0}
.do li{padding:16px 0;border-top:1px solid var(--hp-line);font-weight:300;font-size:max(17px,1.3vw);line-height:1.3;color:#dbe3ee}

/* ---------- 06 · what it can build ---------- */
.sol-g+.sol-g{margin-top:4.6vw}
.sol-g:first-of-type{margin-top:4.6vw}
.sol-g>h3{margin:0 0 22px}
.sol{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.5fr) auto;gap:3vw;align-items:center;padding:26px 0;border-top:1px solid var(--hp-line);transition:background-color .2s}
.sol:last-of-type{border-bottom:1px solid var(--hp-line)}
.sol h4{margin:0;font-weight:300;font-size:max(20px,1.6vw);letter-spacing:-.015em;line-height:1.2;color:#f4f7fb}
.sol p{color:#9eabbc;font-weight:300;font-size:max(15px,1.05vw);line-height:1.5}
.sol svg{width:18px;height:18px;color:#9fb0c4;transition:color .2s}
.sol:hover{background:rgba(255,255,255,.025)}
.sol:hover svg,.sol:hover h4{color:#fff}

/* ---------- 07 · where it works ---------- */
.ind{display:grid;grid-template-columns:repeat(4,1fr);gap:3vw 1.6vw;margin-top:4.6vw}
.tile{display:block}
.tile-media{aspect-ratio:16/9;background:#050b14;overflow:hidden}
.tile-media img{display:block;width:100%;height:100%;object-fit:cover;filter:brightness(.9);transition:filter .25s}
.tile:hover .tile-media img{filter:brightness(1.05)}
.tile h3{margin:16px 0 6px;font-weight:300;font-size:max(18px,1.35vw);letter-spacing:-.01em;line-height:1.25;color:#f4f7fb}
.tile p{color:#9eabbc;font-weight:300;font-size:max(14px,.95vw);line-height:1.5}

/* ---------- 08 · proof ---------- */
.proof{display:grid;grid-template-columns:repeat(3,1fr);margin-top:4.6vw;border-top:1px solid var(--hp-line)}
.proof>div{border-left:1px solid var(--hp-line);padding:2.2vw max(20px,3vw) 3.2vw}
.proof>div:first-child{border-left:0;padding-left:0}
.proof strong{display:block;font-weight:300;letter-spacing:-.015em;line-height:1.25;font-size:max(20px,1.9vw);color:#f4f7fb}
.proof span{display:block;margin-top:14px;color:#7f93aa}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .ind{grid-template-columns:repeat(2,1fr);gap:5vw 3vw}
}
@media (max-width:899px){
  .txt{padding:16vw 6vw 12vw}
  .pair{grid-template-columns:1fr;gap:9vw;margin-top:9vw}
  .core{margin-top:9vw}
  .why,.do,.proof{grid-template-columns:1fr;margin-top:9vw}
  .why>div,.do>div,.proof>div{border-left:0;border-top:1px solid var(--hp-line);padding:7vw 0 9vw}
  .why>div:first-child,.do>div:first-child,.proof>div:first-child{border-top:0;padding-left:0}
  .layers{margin-top:9vw}
  .layer{grid-template-columns:1fr;gap:26px;padding:9vw 0}
  .prod{grid-template-columns:1fr}
  .prod figure+figure{border-left:0;border-top:1px solid var(--hp-line)}
  .prod img{height:clamp(190px,52vw,300px)}
  .sol-g+.sol-g,.sol-g:first-of-type{margin-top:9vw}
  .sol{grid-template-columns:1fr auto;gap:10px 18px;padding:22px 0}
  .sol p{grid-column:1 / -1;grid-row:2}
  .ind{margin-top:9vw}
}
@media (max-width:760px){
  .presence{left:0;right:0;top:auto;bottom:0;width:100%;height:55%;transform:none}
  .presence canvas{-webkit-mask-image:radial-gradient(ellipse 80% 78% at 50% 52%,#000 52%,transparent 100%);mask-image:radial-gradient(ellipse 80% 78% at 50% 52%,#000 52%,transparent 100%)}
  .presence .pc-meta{left:6vw;top:6%}
  .scrim{background:linear-gradient(180deg,rgba(2,6,13,.85) 0%,rgba(2,6,13,.6) 42%,rgba(2,6,13,0) 62%)}
  .copy{left:22px;right:22px;top:calc(15% + 22px)}
  .copy h1{font-size:clamp(40px,12vw,54px)}
  .copy .eq{margin-top:26px;font-size:17px;gap:4px 12px}
}
@media (max-width:640px){
  .screen{overflow-x:auto}                        /* keep the IAMS UI legible: scroll sideways instead of shrinking it */
  .screen img{width:720px;max-width:none}
  .screen figcaption{position:sticky;left:0}
}
@media (max-width:520px){
  .ind{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .copy{animation:none}
  .presence .pc-meta{transition:none}
  .eq.anim #eqH,.eq.anim #eqS,.eq.anim #eqR{transition:none}
}