/* /assets/product-detail.css */

:root{
  --pd-ink:#e5e7eb;
  --pd-muted:#9ca3af;
  --pd-bg:#020617;
  --pd-card:#020617;
  --pd-line:#1f2937;
  --pd-accent:#6366f1;
  --pd-chip:#0b1220;
}

body{
  background:var(--pd-bg);
  color:var(--pd-ink);
}

/* ---------- Hero ---------- */

.prod-hero{
  padding:4.5rem 0 3.2rem;
  background:
    radial-gradient(circle at top left,rgba(56,189,248,.18),transparent 55%),
    radial-gradient(circle at top right,rgba(129,140,248,.22),transparent 60%),
    #020617;
}

.prod-grid-hero{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:3rem;
  align-items:center;
}

.prod-kicker{
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.75rem;
  color:var(--pd-muted);
  margin-bottom:.6rem;
}

.prod-title{
  font-size:2.25rem;
  line-height:1.1;
  letter-spacing:-.04em;
  margin:0 0 .9rem;
}

.prod-sub{
  margin:0 0 1.4rem;
  font-size:.95rem;
  color:var(--pd-muted);
  max-width:34rem;
}

.prod-pill-row{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-bottom:1.6rem;
}

.prod-pill{
  padding:.22rem .8rem;
  border-radius:999px;
  background:var(--pd-chip);
  border:1px solid rgba(148,163,184,.45);
  font-size:.76rem;
  color:var(--pd-muted);
}

.prod-hero-cta{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
  align-items:center;
  margin-bottom:1rem;
}

.prod-hero-note{
  font-size:.8rem;
  color:var(--pd-muted);
}

/* ---------- Hero side card ---------- */

.prod-hero-card{
  border-radius:1.1rem;
  border:1px solid rgba(55,65,81,.9);
  background:radial-gradient(circle at 0 0,rgba(59,130,246,.25),transparent 55%),#020617;
  padding:1.1rem 1.15rem 1rem;
  box-shadow:0 22px 70px rgba(15,23,42,.9);
}

.prod-hero-card-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:.6rem;
  font-size:.78rem;
  color:var(--pd-muted);
}

.prod-hero-card-title{
  font-weight:600;
  font-size:.82rem;
}

.prod-hero-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem;
}

.prod-hero-chip{
  padding:.15rem .55rem;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.75);
  background:rgba(15,23,42,.92);
  font-size:.7rem;
}

.prod-hero-body{
  font-size:.78rem;
  color:var(--pd-muted);
  margin-bottom:.6rem;
}

.prod-hero-stats{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.4rem;
  font-size:.73rem;
}

.prod-hero-stat{
  padding:.3rem .45rem;
  border-radius:.55rem;
  background:rgba(15,23,42,.96);
  border:1px solid rgba(31,41,55,.95);
}

.prod-hero-stat span{
  display:block;
}
.prod-hero-stat .label{
  font-size:.7rem;
  color:var(--pd-muted);
}
.prod-hero-stat .value{
  font-size:.8rem;
}

/* ---------- Sections ---------- */

.prod-section{
  padding:2.8rem 0 1.6rem;
}

.prod-section-header{
  margin-bottom:1.2rem;
}

.prod-section-eyebrow{
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--pd-muted);
  margin-bottom:.25rem;
}

.prod-section-title{
  margin:0 0 .4rem;
  font-size:1.35rem;
  letter-spacing:-.03em;
}

.prod-section-sub{
  margin:0;
  font-size:.86rem;
  color:var(--pd-muted);
  max-width:32rem;
}

/* two-column body */

.prod-split{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:2.4rem;
  align-items:flex-start;
}

.prod-lead-text{
  font-size:.86rem;
  color:var(--pd-muted);
  margin:0 0 .7rem;
}

.prod-feature-list{
  margin:0;
  padding-left:1.1rem;
  font-size:.86rem;
}
.prod-feature-list li{
  margin:.18rem 0;
}

.prod-aside-card{
  border-radius:.9rem;
  border:1px solid rgba(55,65,81,.9);
  background:rgba(15,23,42,.96);
  padding:.85rem .9rem;
  font-size:.8rem;
  color:var(--pd-muted);
}
.prod-aside-card h3{
  margin:0 0 .35rem;
  font-size:.9rem;
}
.prod-aside-card ul{
  margin:.1rem 0 0;
  padding-left:1.1rem;
}

.prod-tag-row{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem;
  margin-top:.4rem;
}
.prod-tag{
  padding:.1rem .5rem;
  border-radius:999px;
  border:1px solid rgba(55,65,81,.9);
  background:#020617;
  font-size:.72rem;
  color:var(--pd-muted);
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px){
  .prod-grid-hero{
    grid-template-columns:1fr;
    gap:2.2rem;
  }
  .prod-hero-card{
    max-width:440px;
    margin:0 auto;
  }
}

@media (max-width: 800px){
  .prod-split{
    grid-template-columns:1fr;
    gap:1.6rem;
  }
}

@media (max-width: 640px){
  .prod-hero{
    padding:3.6rem 0 2.6rem;
  }
  .prod-title{
    font-size:1.9rem;
  }
}