/* Products page: Winmantle, Varqeni and Pelqi */
.prod{display:grid;grid-template-columns:minmax(240px,340px) 1fr;gap:3.5rem;align-items:center;padding:3rem 0;border-top:1px solid var(--rule);scroll-margin-top:110px}
.prod:first-of-type{border-top:0;padding-top:0}
.prod-visual{position:relative;aspect-ratio:1;display:grid;place-items:center;overflow:visible;background:none;box-shadow:none}
.prod-visual::after{content:"";position:absolute;inset:15%;border-radius:50%;background:radial-gradient(closest-side,rgba(232,149,107,.14),transparent 72%);z-index:0}
.prod-visual>*{position:relative;z-index:1}
.prod-status{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:.3rem .7rem;border-radius:999px;margin-bottom:.9rem}
.prod-status.live{background:rgba(91,125,99,.14);color:var(--green)}
.prod-status.dev{background:var(--peach-soft);color:var(--peach-dk)}
.prod h2{font-size:clamp(1.8rem,3vw,2.5rem);font-weight:600;letter-spacing:-.03em;color:var(--ink);margin:0 0 .35rem}
.prod .prod-tag{font-size:1.1rem;color:var(--peach-dk);font-weight:600;margin:0 0 1rem}
.prod p{color:var(--body)}
.prod ul{margin:1rem 0 1.4rem;padding-left:1.1rem;color:var(--body)}
.prod li{margin:.35rem 0}
.prod .tags{margin:0 0 1.4rem}
.prod-actions{display:flex;gap:.8rem;flex-wrap:wrap}

/* Winmantle: the woven mark, joining */
.wm-mark{width:70%;overflow:visible}
.wm-mark .m{transform:translateY(300px);opacity:0}
.wm-mark .w{transform:translateY(-300px);opacity:0}
.prod.in .wm-mark .m{animation:wmM 2.6s cubic-bezier(.45,0,.2,1) .2s forwards}
.prod.in .wm-mark .w{animation:wmW 2.6s cubic-bezier(.45,0,.2,1) .2s forwards}
@keyframes wmM{25%{opacity:1}to{transform:none;opacity:1}}
@keyframes wmW{25%{opacity:1}to{transform:none;opacity:1}}

/* Varqeni: the trace draws like a live monitor, the V in copper, then the dot pulses */
.vq-mark{width:78%;overflow:visible}
.vq-base,.vq-v{stroke-dasharray:100;stroke-dashoffset:100}
.vq-dot{opacity:0;transform-origin:872px 512px;transform:scale(.2)}
.vq-ring{opacity:0;transform-origin:872px 512px}
.prod.in .vq-base{animation:vqTrace 1.8s cubic-bezier(.55,.1,.35,1) .2s forwards}
.prod.in .vq-v{animation:vqTrace 1s cubic-bezier(.55,.1,.35,1) .62s forwards}
.prod.in .vq-dot{animation:vqDot .45s cubic-bezier(.2,1.6,.4,1) 2s forwards}
.prod.in .vq-ring{animation:vqPing 2.2s ease-out 2.4s infinite}
@keyframes vqTrace{to{stroke-dashoffset:0}}
@keyframes vqDot{to{opacity:1;transform:scale(1)}}
@keyframes vqPing{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(2.4)}}

/* Pelqi: the eye, blinking and glancing */
.pq{width:52%;overflow:visible}
.pq-ring{fill:none;stroke:#2d3a3f;stroke-width:2.4;stroke-dasharray:97.4 28.3;stroke-dashoffset:-10;transform:rotate(-90deg);transform-origin:24px 24px;animation:pqSpin 14s linear infinite}
.pq-iris{fill:#1b2428;stroke:rgba(45,58,63,.25);stroke-width:1}
.pq-pupil{fill:#e8956b}
.pq-glint{fill:#fff;opacity:.85}
.pq-blink{transform-origin:24px 24px;animation:pqBlink 6.5s ease-in-out infinite}
.pq-glance{animation:pqGlance 11s ease-in-out infinite}
@keyframes pqBlink{0%,44%,49%,100%{transform:scaleY(1)}46.5%{transform:scaleY(.08)}}
@keyframes pqGlance{0%,18%{transform:translate(0,0)}24%,38%{transform:translate(3.2px,-1px)}44%,58%{transform:translate(-3.2px,.6px)}64%,100%{transform:translate(0,0)}}
@keyframes pqSpin{from{transform:rotate(-90deg)}to{transform:rotate(270deg)}}

@media(max-width:900px){.prod{grid-template-columns:1fr;gap:.6rem}.prod-visual{aspect-ratio:auto;max-width:280px;width:100%;margin:0 auto;padding:1.2rem 0}}
@media(prefers-reduced-motion:reduce){.prod *{animation:none!important}.wm-mark .m,.wm-mark .w{opacity:1;transform:none}.vq-base,.vq-v{stroke-dashoffset:0}.vq-dot{opacity:1;transform:none}}