/* ===================================================
   Hero Section Styles
   ================================================== */

.hero{
  padding:60px 0 60px;
}

.hero-grid{
  display:grid; gap:40px; align-items:center;
  grid-template-columns: 1.1fr .9fr;
  background:linear-gradient(135deg, var(--sage) 0%, #f0f7f1 100%);
  padding:60px;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.hero-grid > div:first-child{
  padding:0;
}

.hero h1{
  font-size:clamp(32px, 4vw, 52px);
  line-height:1.15; 
  margin:0 0 20px;
  letter-spacing:.2px;
  font-weight:800;
}

.hero p{
  font-size:clamp(16px, 1.8vw, 20px);
  color:var(--muted);
  margin:0 0 28px;
  line-height:1.6;
}

.btns{display:flex; gap:12px; flex-wrap:wrap}

.btn{
  display:inline-block; padding:14px 24px; border-radius:999px;
  border:1px solid #1e2f22; font-weight:600; background:#fff;
  box-shadow:var(--shadow); font-size:18px; transition:all 0.2s;
}

.btn:hover{transform:translateY(-2px); box-shadow:0 12px 32px rgba(0,0,0,.1)}
.btn:focus{outline:2px solid var(--deep); outline-offset:4px}
.btn.secondary{background:var(--deep); color:#fff; border-color:var(--deep)}

.hero figure{
  border-radius:20px; overflow:hidden; margin:0; box-shadow:var(--shadow);
  aspect-ratio: 3 / 2; background:#ddd;
}

.hero figure img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

@media (max-width: 860px){
  .hero{padding:40px 0}
  
  .hero-grid{
    grid-template-columns:1fr;
    padding:24px;
    gap:24px;
  }
  
  .hero-grid > div:first-child{
    order:1;
  }
  
  .hero figure{
    order:2;
    aspect-ratio: 16 / 9;
  }
  
  .hero h1{
    font-size:clamp(28px, 8vw, 40px);
    margin-bottom:16px;
  }
  
  .hero p{
    font-size:16px;
    margin-bottom:20px;
  }
  
  .btns{
    flex-direction:column;
    width:100%;
  }
  
  .btn{
    width:100%;
    text-align:center;
    justify-content:center;
    padding:14px 20px;
  }
}

@media (max-width: 480px){
  .hero-grid{
    padding:20px;
    gap:20px;
  }
  
  .hero h1{
    font-size:26px;
  }
  
  .hero p{
    font-size:15px;
  }
}