*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Inter,sans-serif;
}

body{
background:#f8fafc;
color:#111;
line-height:1.6;
}

/* NAV */

.navbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:22px 8%;
background:white;
position:sticky;
top:0;
z-index:10;
}

.navbar a{
margin:0 14px;
text-decoration:none;
color:#333;
font-weight:500;
}

.logo{
font-weight:700;
font-size:20px;
}

.nav-btn{
background:black;
color:white;
border:none;
padding:10px 18px;
border-radius:8px;
}

/* HERO */

.hero{
display:flex;
align-items:center;
justify-content:space-between;
padding:90px 8%;
gap:40px;
flex-wrap:wrap;
}

.hero-text{
max-width:520px;
}

.hero-text h1{
font-size:52px;
margin-bottom:20px;
}

.hero-image{
width:420px;
border-radius:20px;
box-shadow:0 20px 40px rgba(0,0,0,0.12);
}

.hero-actions{
display:flex;
gap:12px;
margin-top:20px;
}

/* BUTTONS */

.primary-btn{
background:#0ea5e9;
color:white;
border:none;
padding:14px 26px;
border-radius:10px;
cursor:pointer;
}

.secondary-btn{
background:transparent;
border:1px solid #ccc;
padding:14px 26px;
border-radius:10px;
}

/* TRUST BAR */

.trust{
display:flex;
justify-content:center;
gap:40px;
padding:20px;
background:white;
font-size:14px;
color:#555;
flex-wrap:wrap;
}

/* STORY */

.story{
display:flex;
align-items:center;
gap:60px;
padding:90px 8%;
flex-wrap:wrap;
}

.story img{
width:420px;
border-radius:16px;
}

.story-text{
max-width:520px;
}

/* BENEFITS */

.benefits{
text-align:center;
padding:80px 8%;
}

.cards{
display:flex;
gap:30px;
justify-content:center;
margin-top:40px;
flex-wrap:wrap;
}

.card{
background:white;
border-radius:16px;
overflow:hidden;
width:280px;
box-shadow:0 15px 35px rgba(0,0,0,.06);
}

.card img{
width:100%;
height:170px;
object-fit:cover;
}

.card h3{
padding:15px 20px 5px;
}

.card p{
padding:0 20px 20px;
color:#555;
}

/* QUALITY */

.quality{
background:white;
padding:90px 8%;
text-align:center;
}

.quality-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:25px;
margin-top:40px;
}

.q-item{
background:#f1f5f9;
padding:25px;
border-radius:12px;
}

/* LIFESTYLE */

.lifestyle{
height:420px;
background:url("https://images.unsplash.com/photo-1490645935967-10de6ba17061?w=1600") center/cover;
display:flex;
align-items:center;
justify-content:center;
}

.overlay{
background:rgba(0,0,0,.45);
color:white;
padding:40px;
border-radius:12px;
font-size:28px;
}

/* FAQ */

.faq{
padding:80px 8%;
max-width:800px;
margin:auto;
}

.faq-item{
margin-top:25px;
}

/* CTA */

.cta{
text-align:center;
padding:90px 8%;
}

/* FOOTER */

footer{
background:white;
text-align:center;
padding:30px;
font-size:14px;
color:#666;
}

/* =========================
   MOBILE FIRST IMPROVEMENTS
========================= */

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* typography scaling */

h1 {
  line-height: 1.15;
}

p {
  font-size: 16px;
}

/* ---------- TABLET ---------- */

@media (max-width: 1024px) {

.hero {
  padding: 60px 6%;
}

.hero-text h1 {
  font-size: 40px;
}

.story {
  gap: 40px;
}

}


/* ---------- MOBILE ---------- */

@media (max-width: 768px) {

/* NAVBAR */

.navbar {
  padding: 16px 5%;
}

.navbar nav {
  display: none; /* clean mobile header */
}

.nav-btn {
  padding: 8px 14px;
  font-size: 14px;
}

/* HERO */

.hero {
  flex-direction: column-reverse;
  text-align: center;
  padding: 50px 6%;
}

.hero-text {
  max-width: 100%;
}

.hero-text h1 {
  font-size: 32px;
}

.hero-text p {
  font-size: 15px;
}

.hero-actions {
  justify-content: center;
  flex-wrap: wrap;
}

.hero-image {
  width: 100%;
  max-width: 320px;
  margin-bottom: 25px;
}

/* TRUST BAR */

.trust {
  gap: 15px;
  font-size: 13px;
  padding: 18px 10px;
}

/* STORY */

.story {
  flex-direction: column;
  text-align: center;
  padding: 60px 6%;
}

.story img {
  width: 100%;
  max-width: 340px;
}

/* BENEFITS */

.cards {
  flex-direction: column;
  align-items: center;
}

.card {
  width: 100%;
  max-width: 340px;
}

/* QUALITY */

.quality {
  padding: 60px 6%;
}

.quality-grid {
  grid-template-columns: 1fr;
}

/* LIFESTYLE */

.lifestyle {
  height: 300px;
}

.overlay {
  font-size: 22px;
  padding: 25px;
  text-align: center;
}

/* FAQ */

.faq {
  padding: 60px 6%;
}

/* CTA */

.cta {
  padding: 70px 6%;
}

.primary-btn,
.secondary-btn {
  width: 100%;
  max-width: 320px;
}

}

/* ---------- SMALL PHONES ---------- */

@media (max-width: 420px) {

.hero-text h1 {
  font-size: 26px;
}

.overlay {
  font-size: 20px;
}

}