/* ============================================================
   1UZ - Products page styles (extends styles.css)
   ============================================================ */

/* page hero */
.page-hero{ position:relative; overflow:hidden; padding-top:calc(var(--nav-h) + 70px); padding-bottom:46px; }
.page-hero .wrap{ position:relative; z-index:2; }
.page-hero h1{ font-size:clamp(40px,5.4vw,72px); max-width:900px; margin-top:18px; }
.page-hero h1 .gradient-text{ display:inline; }
.page-hero p{ font-size:clamp(17px,1.6vw,20px); color:var(--ink-soft); max-width:640px; margin-top:22px; }
.page-hero .crumbs{ display:flex; gap:8px; align-items:center; font-size:14px; color:var(--muted); font-weight:600; margin-bottom:6px; }
.page-hero .crumbs a:hover{ color:var(--c-blue); }

/* stats strip (replaces category filter) */
.pstats{ display:flex; flex-wrap:wrap; gap:14px; margin-top:40px; }
.pstat{
  display:flex; align-items:center; gap:15px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:16px 24px; box-shadow:var(--sh-sm);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s;
}
.pstat:hover{ transform:translateY(-3px); box-shadow:var(--sh); border-color:transparent; }
.pstat b{
  font-family:var(--font-display); font-weight:800; font-size:32px; letter-spacing:-.03em; line-height:1;
  background:var(--grad-vivid); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.pstat span{ font-size:13.5px; color:var(--muted); max-width:135px; line-height:1.3; }

/* product grid */
.cat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.pcard{
  position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:32px; display:flex; flex-direction:column;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s, opacity .3s;
  overflow:hidden;
}
.pcard:hover{ transform:translateY(-6px); box-shadow:var(--sh); border-color:transparent; }
.pcard .ic{ width:56px; height:56px; border-radius:16px; display:grid; place-items:center; color:#fff; margin-bottom:22px; flex:none; }
.pcard h3{ font-size:23px; }
.pcard .ptag{ color:var(--muted); font-size:15px; margin-top:9px; line-height:1.45; }
.pcard .pfeat{ margin:22px 0 26px; display:grid; gap:11px; }
.pcard .pfeat li{ display:flex; gap:11px; font-size:14.5px; color:var(--ink-soft); align-items:flex-start; line-height:1.4; }
.pcard .pfeat .dot{ width:7px; height:7px; border-radius:50%; background:var(--grad-brand); margin-top:7px; flex:none; }
.pcard .pcta{ margin-top:auto; display:flex; align-items:center; gap:14px; }
.pcard .plink{ font-family:var(--font-display); font-weight:700; font-size:14.5px; color:var(--c-blue); display:inline-flex; align-items:center; gap:6px; }
.pcard .plink svg{ transition:transform .2s; }
.pcard:hover .plink svg{ transform:translateX(4px); }
.pcard .free{ font-size:13px; font-weight:600; color:var(--c-violet); }

.pbadge{ position:absolute; top:24px; right:24px; font-family:var(--font-display); font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase; padding:6px 12px; border-radius:var(--r-pill); }
.pbadge.hit{ background:linear-gradient(135deg,#FF4747,#E11D2A); color:#fff; box-shadow:0 6px 16px -6px rgba(225,29,42,.6); }
.pbadge.mod{ background:rgba(124,77,255,.12); color:var(--c-violet); }
.pbadge.free{ background:rgba(31,198,230,.16); color:#0a93b0; }

/* flagship */
.pcard.flag{
  grid-column:span 2; color:#fff; border:none; position:relative;
  background:
    radial-gradient(115% 125% at 86% 6%, rgba(138,99,255,.55), transparent 55%),
    radial-gradient(110% 120% at 8% 102%, rgba(31,107,255,.5), transparent 55%),
    linear-gradient(130deg, #1C2A6E 0%, #2348C2 48%, #5C3ECf 100%);
  display:grid; grid-template-columns:1.18fr .82fr; gap:30px; align-items:center; padding:40px;
  box-shadow:0 36px 80px -34px rgba(40,58,160,.6);
}
/* blueprint grid texture */
.pcard.flag::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px);
  background-size:42px 42px; opacity:.06;
  -webkit-mask-image:radial-gradient(85% 80% at 72% 18%, #000, transparent 78%);
  mask-image:radial-gradient(85% 80% at 72% 18%, #000, transparent 78%);
}
.pcard.flag .flag-copy, .pcard.flag .flag-side{ position:relative; z-index:1; }
.pcard.flag:hover{ transform:translateY(-6px); box-shadow:0 44px 96px -34px rgba(40,58,160,.7); }
.pcard.flag .ic{ background:rgba(255,255,255,.18); box-shadow:inset 0 0 0 1px rgba(255,255,255,.22); }
.pcard.flag .pbadge.hit{ background:linear-gradient(135deg,#FF4747,#E11D2A); color:#fff; box-shadow:0 8px 22px -6px rgba(225,29,42,.7), inset 0 1px 0 rgba(255,255,255,.3); z-index:4; }
.pcard.flag h3{ font-size:32px; margin-top:20px; background:linear-gradient(100deg,#FFFFFF 0%,#BFE6FF 50%,#E4CCFF 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.pcard.flag .ptag{ color:rgba(255,255,255,.85); font-size:16.5px; max-width:380px; }
.pcard.flag .pcta{ margin-top:28px; }
/* right glass panel with feature list */
.pcard.flag .flag-side{
  align-self:center; display:flex; flex-direction:column; justify-content:center;
  margin-top:18px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  border-radius:var(--r-lg); padding:26px 28px; backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}
.pcard.flag .flag-side .pfeat{ margin:0; gap:16px; }
.pcard.flag .pfeat li{ color:#fff; font-size:16px; font-weight:500; align-items:center; }
.pcard.flag .pfeat .dot{ width:24px; height:24px; border-radius:8px; background:linear-gradient(135deg,#8A63FF,#2348C2); margin-top:0; display:grid; place-items:center; box-shadow:inset 0 0 0 1px rgba(255,255,255,.28); }
.pcard.flag .pfeat .dot::after{ content:""; width:9px; height:5px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg) translateY(-1px); }
.pcard.flag .plink{ color:#fff; }
.pcard.flag .btn{ margin-top:2px; }

.pcard[hidden]{ display:none; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .pcard{ animation:none !important; } }

/* modules band */
.mod-band{ background:var(--bg-2); border-radius:var(--r-xl); padding:clamp(32px,4vw,52px); display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:center; }
.mod-band .mb-copy h2{ font-size:clamp(26px,3vw,38px); }
.mod-band .mb-copy p{ color:var(--muted); font-size:17px; margin-top:16px; max-width:440px; }
.mod-mini{ display:grid; gap:16px; }
.mod-mini .mm{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:22px 24px; display:flex; gap:16px; align-items:center; }
.mod-mini .mm .ic{ width:48px; height:48px; border-radius:13px; display:grid; place-items:center; color:#fff; flex:none; }
.mod-mini .mm b{ font-family:var(--font-display); font-size:18px; display:block; }
.mod-mini .mm span{ font-size:14px; color:var(--muted); }

/* helper / chooser cta */
.chooser{ position:relative; overflow:hidden; border-radius:var(--r-xl); background:var(--surface); border:1px solid var(--line); padding:clamp(36px,4vw,56px); text-align:center; box-shadow:var(--sh-sm); }
.chooser h2{ font-size:clamp(26px,3.2vw,40px); max-width:680px; margin-inline:auto; }
.chooser p{ color:var(--muted); font-size:18px; margin-top:16px; max-width:560px; margin-inline:auto; }
.chooser .cta-row{ display:flex; gap:14px; justify-content:center; margin-top:30px; flex-wrap:wrap; }
.chooser .blob{ opacity:.5; }

@media (max-width:1080px){
  .cat-grid{ grid-template-columns:repeat(2,1fr); }
  .pcard.flag{ grid-column:span 2; grid-template-columns:1fr; gap:24px; }
  .pcard.flag .flag-side{ padding:24px 26px; }
  .mod-band{ grid-template-columns:1fr; }
}
@media (max-width:680px){
  .cat-grid{ grid-template-columns:1fr; }
  .pcard.flag{ grid-column:span 1; padding:30px; }
  .page-hero{ padding-top:calc(var(--nav-h) + 34px); }
  .pstats{ margin-top:26px; gap:10px; }
  .pstat{ padding:13px 16px; flex:1 1 calc(50% - 5px); gap:12px; }
  .pstat b{ font-size:25px; }
  .pstat span{ font-size:12.5px; }
  .pcard{ padding:26px; }
}

@media (max-width:860px){.mod-band{grid-template-columns:minmax(0,1fr)}.mod-mini .mm{min-width:0}}