:root{
  --primary:#1d3e8a;
  --gold:#d3ad6d;
  --dark:#0f172a;
  --light:#f8fafc;
}

body{
  font-family:'Inter',sans-serif;
  margin:0;
  color:var(--dark);
}

/* HERO */
.product-hero{
  padding:120px 8%;
  background:linear-gradient(135deg,#0f172a,#1d3e8a);
  color:#fff;
}

.product-hero h1{
  font-size:2.8rem;
  max-width:700px;
}

.product-hero p{
  max-width:650px;
  margin:25px 0 35px;
  color:#dbe3ff;
}

.btn-primary{
  background:var(--gold);
  padding:16px 36px;
  border-radius:12px;
  color:#262932;
  text-decoration:none;
  font-weight:600;
}

/* CONTENT */
.product-content{
  padding:110px 8%;
  max-width:1200px;
  margin:auto;
}

.product-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:center;
}

.product-grid img{
  width:100%;
  border-radius:22px;
  object-fit:cover;
}

.product-grid ul{
  list-style:none;
  padding:0;
}

.product-grid ul li{
  margin-bottom:12px;
  padding-left:24px;
  position:relative;
}

.product-grid ul li::before{
  content:"✔";
  position:absolute;
  left:0;
  color:var(--gold);
}

/* CTA */
.product-cta{
  background:#f8fafc;
  padding:100px 8%;
  text-align:center;
}
.site-footer{
  background:#262932;
  color:#c7c9d3;
  padding:60px 8% 40px 8%;
  font-family: 'Inter', sans-serif;
}

.footer-container{
  display:grid;
  grid-template-columns:1fr 2fr;
  align-items:start;
  gap:60px;
  flex-wrap:wrap;
}

.footer-logo img{
  width:160px;
}

.footer-links{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
}

.footer-nav{
  list-style:none;
  padding:0;
  margin:0 0 24px 0;
  display:flex;
  flex-wrap:wrap;
  gap:24px;
}

.footer-nav li a{
  color:#c7c9d3;
  text-decoration:none;
  transition:.3s;
}

.footer-nav li a:hover{
  color:#d3ad6d;
}

.footer-socials a{
  margin-left:16px;
  color:#c7c9d3;
  font-size:1.2rem;
  transition:.3s;
}

.footer-socials a:hover{
  color:#d3ad6d;
}

.footer-bottom{
  border-top:1px solid #3a3b45;
  margin-top:40px;
  padding-top:20px;
  text-align:center;
  font-size:.85rem;
  color:#8e8f99;
}
@media(max-width:900px){
  .product-grid{
    grid-template-columns:1fr;
  }
}