/* =============================================
   Product page styles (shared across all products)
   ============================================= */

/* Back link in header */
.back-link{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.88rem;font-weight:600;color:var(--text);transition:color .2s;
}
.back-link:hover{color:var(--accent)}
.back-link svg{transition:transform .2s}
.back-link:hover svg{transform:translateX(-3px)}

/* Product hero */
.product-hero{
  padding:120px 0 60px;text-align:center;
  background:var(--bg-secondary);
  border-bottom:1px solid var(--border);
  position:relative;overflow:hidden;
}
.product-hero::before{
  content:'';position:absolute;
  width:500px;height:500px;top:50%;left:50%;
  transform:translate(-50%,-55%);
  background:radial-gradient(circle,rgba(212,136,42,.07) 0%,transparent 70%);
  pointer-events:none;
}
.product-hero-inner{position:relative;max-width:600px;margin:0 auto}

.product-hero-icon{
  width:120px;height:120px;border-radius:50%;
  background:linear-gradient(145deg,var(--bg-card),var(--bg-primary));
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 24px;
  box-shadow:0 0 60px rgba(212,136,42,.08),inset 0 0 40px rgba(0,0,0,.3);
  overflow:hidden;
}
.product-hero-icon img{max-width:80px;max-height:80px;object-fit:contain}
.product-hero-icon .icon-fallback{
  display:none;align-items:center;justify-content:center;color:var(--accent);
}

.product-hero h1{
  font-size:clamp(2rem,5vw,3rem);font-weight:800;
  color:var(--text-bright);margin-bottom:16px;
}
.product-hero-desc{
  font-size:1.05rem;color:var(--text);line-height:1.7;max-width:520px;margin:0 auto;
}

/* Product sections */
.product-section{padding:80px 0}
.product-section h2{
  font-size:clamp(1.4rem,3vw,2rem);font-weight:800;
  color:var(--text-bright);margin-bottom:40px;
}

/* Feature grid */
.features-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
.feature-card{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);
  padding:28px 24px;transition:all .25s;
}
.feature-card:hover{
  background:var(--bg-card-hover);border-color:rgba(212,136,42,.2);
  transform:translateY(-3px);box-shadow:0 12px 40px rgba(0,0,0,.25);
}
.feature-icon{
  width:44px;height:44px;border-radius:10px;
  background:var(--accent-glow);
  display:flex;align-items:center;justify-content:center;
  color:var(--accent);margin-bottom:16px;
}
.feature-card h4{
  font-size:.98rem;font-weight:700;color:var(--text-bright);margin-bottom:8px;
}
.feature-card p{
  font-size:.85rem;color:var(--text-dim);line-height:1.6;
}

/* CTA */
.product-cta{
  background:var(--bg-secondary);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.cta-text{
  color:var(--text);font-size:1rem;line-height:1.7;
  max-width:480px;margin:0 auto 28px;
}

/* Legal section */
.product-legal{border-top:1px solid var(--border)}
.product-legal h3{
  font-size:1.1rem;font-weight:700;color:var(--text-bright);margin-bottom:16px;
}
.legal-links{display:flex;gap:24px;flex-wrap:wrap}
.legal-links a{
  font-size:.9rem;color:var(--accent);font-weight:500;transition:color .2s;
}
.legal-links a:hover{color:var(--accent-hover)}

/* Modal */
.modal{
  display:none;position:fixed;z-index:1000;
  left:0;top:0;width:100%;height:100%;
  background:rgba(0,0,0,.7);
  align-items:center;justify-content:center;
}
.modal-content{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:40px;
  max-width:480px;
  margin:0 20px;
  box-shadow:0 8px 32px rgba(0,0,0,.5);
  animation:modalSlideIn .3s ease-out;
}
@keyframes modalSlideIn{
  from{opacity:0;transform:translateY(-20px)}
  to{opacity:1;transform:translateY(0)}
}
.modal-content h3{
  font-size:1.5rem;font-weight:700;
  color:var(--text-bright);margin-bottom:16px;
}
.modal-message{
  font-size:1rem;color:var(--text);
  line-height:1.6;margin-bottom:32px;
}
.modal-actions{
  display:flex;gap:12px;justify-content:flex-end;
}

/* Responsive */
@media(max-width:860px){
  .features-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .features-grid{grid-template-columns:1fr}
  .product-hero{padding:100px 0 48px}
  .product-section{padding:56px 0}
  .modal-content{padding:28px;max-width:90%}
  .modal-actions{flex-direction:column-reverse}
  .modal-actions button{width:100%}
}