/* Product-page layer: centered hero, framed screenshot, sticky subnav, bento grid, flow steps */
.phero{position:relative;text-align:center;padding:72px 0 30px;overflow:hidden}
.phero h1{max-width:900px;margin:0 auto;font-size:clamp(2.4rem,5.2vw,4.2rem);letter-spacing:-.035em}
.phero .lead{max-width:700px;margin:22px auto 32px;font-size:1.15rem;color:var(--mut)}
.crumb{font-size:.85rem;color:var(--mut);margin-bottom:22px}.crumb a{color:var(--g)}
.pbadge{display:inline-flex;gap:10px;align-items:center;padding:8px 18px;border-radius:99px;background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--g3);font-weight:600;font-size:.85rem;margin-bottom:22px}
.pbadge svg{width:18px;height:18px;stroke:var(--g);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bframe{background:#0b1310;border-radius:20px;box-shadow:0 50px 100px -30px #000,0 0 0 1px var(--line),0 0 100px -20px var(--g);overflow:hidden;text-align:left}
.bframe .bbar{display:flex;gap:7px;align-items:center;padding:13px 18px;background:#0e1a15;border-bottom:1px solid var(--line)}
.bframe .bbar i{width:11px;height:11px;border-radius:50%;background:#2a3d34}
.bframe .bbar span{margin:0 auto;font:.74rem ui-monospace,Consolas,monospace;color:var(--mut);padding:4px 34px;background:rgba(255,255,255,.04);border-radius:8px}
.hero-frame{max-width:920px;margin:54px auto 0;position:relative}
.hero-frame:after{content:"";position:absolute;inset:auto 0 0 0;height:90px;background:linear-gradient(transparent,var(--bg));pointer-events:none}
.mockbody{padding:24px;font-size:.85rem;min-height:260px}
.shot{display:block;width:100%;height:auto}
.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:26px}
.subnav{position:sticky;top:72px;z-index:40;background:rgba(5,8,7,.85);backdrop-filter:blur(14px);border-block:1px solid var(--line)}
.subnav .wrap{display:flex;gap:6px;align-items:center;height:56px;overflow-x:auto}
.subnav a:not(.btn){padding:8px 16px;border-radius:10px;color:var(--mut);font-size:.9rem;white-space:nowrap}
.subnav a:not(.btn):hover{color:var(--g);background:rgba(255,255,255,.04)}
.subnav .btn{margin-left:auto;white-space:nowrap}.btn.sm{padding:8px 18px;font-size:.85rem;border-radius:11px}
.glance{padding:60px 0 20px}
.facts{display:grid;grid-template-columns:repeat(4,1fr);border-radius:22px;background:linear-gradient(180deg,var(--card2),var(--card));box-shadow:var(--shadow)}
.fact{padding:28px 24px;text-align:center;border-right:1px solid var(--line)}.fact:last-child{border:0}
.fact b{display:block;font-size:1.35rem;letter-spacing:-.02em}.fact span{font-size:.85rem;color:var(--mut)}
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-flow:dense;gap:18px}
.bt{padding:28px;border-radius:24px;background:linear-gradient(160deg,var(--card2),var(--card));box-shadow:var(--shadow);transition:.3s;position:relative;overflow:hidden}
.bt:before{content:"";position:absolute;right:-60px;top:-60px;width:160px;height:160px;border-radius:50%;background:var(--g);opacity:.06;filter:blur(30px);transition:.3s}
.bt:hover{transform:translateY(-4px);box-shadow:0 0 0 1px var(--g),0 24px 50px -20px #000}.bt:hover:before{opacity:.22}
.bt.wide{grid-column:span 2}
.bt h3{margin:16px 0 8px;font-size:1.1rem}.bt p{font-size:.92rem}
.bt.wide h3{font-size:1.3rem}.bt.wide p{font-size:.98rem}
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:f}
.fs{padding:8px 28px 8px 0;position:relative}
.fs span{font:800 3.4rem/1 Inter,sans-serif;color:transparent;-webkit-text-stroke:1.5px var(--g);opacity:.7;display:block;margin-bottom:12px}
.fs h3{margin-bottom:8px}.fs:not(:last-child):after{content:"";position:absolute;right:12px;top:26px;width:26px;height:2px;background:var(--g);opacity:.5}
@media(max-width:920px){.bento{grid-template-columns:1fr 1fr}.facts{grid-template-columns:1fr 1fr}.fact:nth-child(2){border-right:0}.fact:nth-child(-n+2){border-bottom:1px solid var(--line)}.flow{grid-template-columns:1fr 1fr;gap:28px}.fs:after{display:none}.subnav{top:72px}}
@media(max-width:560px){.bento{grid-template-columns:1fr}.bt.wide{grid-column:auto}.flow{grid-template-columns:1fr}.gal{grid-template-columns:1fr}}