/* Pixelwerk 1.0 subpage upgrades */
.pw-page-hero {
  width: min(1180px, calc(100vw - 32px));
  margin: 0 auto;
  min-height: calc(86vh - 90px);
  padding: clamp(3rem, 6vw, 6rem) 0 clamp(2rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  position: relative;
}
.pw-page-hero::before {
  content: "";
  position: absolute;
  inset: 8% auto auto 50%;
  width: 34rem;
  height: 34rem;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(180,76,255,.22), transparent 68%);
  filter: blur(12px);
  pointer-events:none;
}
.pw-page-copy, .pw-page-visual { position: relative; z-index: 1; }
.pw-page-copy h1 {
  font-size: clamp(2.5rem, 6.6vw, 5.4rem);
  line-height: .95;
  margin: 0 0 1rem;
  color: #fff;
  text-shadow: 0 0 28px rgba(180,76,255,.45);
}
.pw-page-copy p {
  color: var(--pw-muted);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  line-height: 1.7;
  max-width: 62ch;
}
.pw-page-visual {
  position: relative;
  padding: .75rem;
  border-radius: 30px;
  background: linear-gradient(135deg, rgba(180,76,255,.34), rgba(54,216,255,.12));
  border: 1px solid var(--pw-border);
  box-shadow: 0 0 60px rgba(180,76,255,.22);
}
.pw-page-visual img {
  display:block;
  width:100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: 24px;
  margin:0;
}

.pw-product-grid {
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:1.2rem;
}
.pw-product-card {
  background: var(--pw-card);
  border: 1px solid var(--pw-border-soft);
  border-radius: 26px;
  overflow:hidden;
  box-shadow: 0 22px 70px rgba(0,0,0,.30);
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.pw-product-card:hover {
  transform: translateY(-6px);
  border-color: var(--pw-border);
  box-shadow: 0 0 48px rgba(180,76,255,.20), 0 22px 70px rgba(0,0,0,.34);
}
.pw-product-card--featured { grid-column: span 3; display:grid; grid-template-columns: .95fr 1.05fr; }
.pw-product-media { position:relative; min-height: 280px; background:#0d0d15; overflow:hidden; }
.pw-product-media img { width:100%; height:100%; min-height:280px; object-fit:cover; display:block; margin:0; transition: transform .35s ease, filter .35s ease; }
.pw-product-card:hover .pw-product-media img { transform: scale(1.045); filter: saturate(1.08) contrast(1.04); }
.pw-product-badge {
  position:absolute;
  left:1rem;
  top:1rem;
  padding:.55rem .85rem;
  border-radius:999px;
  background:rgba(12,12,20,.82);
  border:1px solid var(--pw-border);
  color:#fff;
  font-weight:900;
  box-shadow: var(--pw-shadow);
  backdrop-filter: blur(10px);
}
.pw-product-body { padding:1.25rem; }
.pw-product-head { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; }
.pw-product-head h3 { margin:0; color:#fff; font-size: clamp(1.25rem, 2vw, 1.8rem); }
.pw-product-head strong { color:var(--pw-purple); font-size: clamp(1.35rem, 2vw, 2rem); white-space:nowrap; text-shadow:0 0 20px rgba(180,76,255,.35); }
.pw-product-body p { color: var(--pw-muted); line-height:1.6; }
.pw-spec-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:.65rem; margin:1rem 0; }
.pw-spec-grid span {
  padding:.7rem .8rem;
  border-radius:14px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08);
  color:#eee;
  font-weight:800;
}
.pw-details-toggle {
  width:100%;
  margin:.5rem 0 1rem;
  padding:.85rem 1rem;
  border-radius:14px;
  border:1px solid var(--pw-border);
  background:rgba(180,76,255,.08);
  color:#fff;
  font-weight:900;
  cursor:pointer;
}
.pw-product-details { display:none; margin:.5rem 0 1rem; padding:1rem; border-radius:18px; background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.08); }
.pw-product-card.is-open .pw-product-details { display:block; }

.pw-steps { display:grid; grid-template-columns: repeat(4, 1fr); gap:1rem; }
.pw-steps > div {
  background: var(--pw-card);
  border:1px solid var(--pw-border-soft);
  border-radius:24px;
  padding:1.2rem;
  box-shadow: 0 22px 60px rgba(0,0,0,.24);
}
.pw-steps b {
  display:inline-flex;
  width:2.3rem;
  height:2.3rem;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:linear-gradient(135deg,var(--pw-purple-2),var(--pw-purple));
  box-shadow:var(--pw-shadow);
  margin-bottom:.8rem;
}
.pw-steps h3 { margin:.2rem 0 .5rem; color:#fff; }
.pw-steps p { color:var(--pw-muted); line-height:1.55; }

.pw-faq { width:min(900px,100%); margin:0 auto; }
.pw-faq-question {
  width:100%;
  padding:1rem 1.1rem;
  margin:.7rem 0 0;
  text-align:left;
  border-radius:18px;
  border:1px solid var(--pw-border-soft);
  background:var(--pw-card);
  color:#fff;
  font-weight:900;
  font-size:1.05rem;
  cursor:pointer;
}
.pw-faq-question::after { content:"+"; float:right; color:var(--pw-purple); }
.pw-faq-question.is-open::after { content:"–"; }
.pw-faq-answer { display:none; padding:0 1rem 1rem; color:var(--pw-muted); line-height:1.65; }
.pw-faq-answer.is-open { display:block; }

/* Configurator request modal */
.pw-modal { display:none; position:fixed; inset:0; z-index:10000; }
.pw-modal.is-open { display:block; }
.pw-modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.72); backdrop-filter: blur(8px); }
.pw-modal-card {
  position:relative;
  z-index:1;
  width:min(760px, calc(100vw - 28px));
  max-height: min(86vh, 900px);
  overflow:auto;
  margin:7vh auto;
  padding:clamp(1.2rem,3vw,2rem);
  border-radius:26px;
  background:linear-gradient(180deg, rgba(20,18,32,.96), rgba(12,12,20,.98));
  border:1px solid var(--pw-border);
  box-shadow:0 0 70px rgba(180,76,255,.28), 0 30px 90px rgba(0,0,0,.55);
  color:var(--pw-text);
}
.pw-modal-card h2 { margin:.6rem 0 .5rem; color:#fff; font-size:clamp(1.7rem,4vw,2.5rem); }
.pw-modal-card p { color:var(--pw-muted); line-height:1.6; }
.pw-modal-close { position:absolute; right:1rem; top:1rem; width:2.5rem; height:2.5rem; border-radius:50%; border:1px solid var(--pw-border); background:rgba(255,255,255,.05); color:#fff; font-size:1.5rem; cursor:pointer; }
.pw-config-form { display:grid; gap:1rem; margin-top:1rem; }
.pw-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.pw-config-form label { color:#fff; font-weight:900; display:grid; gap:.45rem; }
.pw-config-form input, .pw-config-form textarea {
  width:100%; box-sizing:border-box; border-radius:14px; border:1px solid rgba(255,255,255,.12); background:#0d0d15; color:#fff; padding:.9rem 1rem; font:inherit;
}
.pw-config-form input:focus, .pw-config-form textarea:focus { outline:none; border-color:var(--pw-purple); box-shadow:0 0 0 3px rgba(180,76,255,.12); }
.pw-config-mail-preview { border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.04); border-radius:18px; padding:1rem; }
.pw-config-mail-preview h3 { margin-top:0; color:var(--pw-purple); }
.pw-config-mail-preview pre { white-space:pre-wrap; color:#ded7ec; font-size:.92rem; line-height:1.45; margin:0; max-height:260px; overflow:auto; }
.pw-form-status { min-height:1.4rem; font-weight:900; }
.pw-form-status.is-success { color:#70ff9a; }
.pw-form-status.is-error { color:#ff8080; }

@media (max-width: 900px) {
  .pw-page-hero { grid-template-columns:1fr; min-height:auto; padding-top:2rem; }
  .pw-page-copy h1 { text-align:center; }
  .pw-page-copy p { text-align:center; margin-left:auto; margin-right:auto; }
  .pw-page-copy .pw-actions { justify-content:center; }
  .pw-product-grid, .pw-product-card--featured { display:grid; grid-template-columns:1fr; }
  .pw-product-card--featured { grid-column:auto; }
  .pw-steps { grid-template-columns:1fr 1fr; }
  .pw-form-grid { grid-template-columns:1fr; }
}
@media (max-width: 560px) {
  .pw-product-grid { grid-template-columns:1fr; }
  .pw-spec-grid { grid-template-columns:1fr; }
  .pw-steps { grid-template-columns:1fr; }
  .pw-page-visual img { aspect-ratio: 1 / 1; }
}