/* KevTech Coffee — Coffee Marketing Site */
:root{
  --brand:#009639;          /* KevTech green */
  --brand-2:#d4a35a;        /* KevTech gold */
  --coffee:#5a3e2b;         /* coffee brown */
  --ink:#232323;
  --muted:#6b6b6b;
  --cream:#faf9f6;
  --radius:18px;
  --shadow:0 10px 35px rgba(0,0,0,.22);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  color:#1a1a1a;
  background: linear-gradient(180deg, #fff, #f9f7f2);
}
img{max-width:100%;display:block}
a{color:var(--ink); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:0 18px}
.grid{display:grid;gap:22px}
.grid-2{grid-template-columns: repeat(2, minmax(0,1fr))}
.grid-3{grid-template-columns: repeat(3, minmax(0,1fr))}
@media (max-width: 960px){
  .grid-2,.grid-3{grid-template-columns: 1fr}
}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  background: rgba(255,255,255,.8);
  backdrop-filter: blur(10px);
  border-bottom:1px solid #eee;
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:12px 0;}
.nav .brand{display:flex; align-items:center; gap:12px}
.nav img.logo{height:36px;width:auto}
.nav a.btn{padding:10px 14px; background:var(--brand); color:white; border-radius:12px; border:1px solid #0d6e2b; text-decoration:none; box-shadow:var(--shadow)}
.nav a.btn.ghost{background:transparent; color:var(--brand); border-color:var(--brand); box-shadow:none}
.nav ul{list-style:none; display:flex; gap:18px; margin:0; padding:0; align-items:center}
.nav a.link{color:#222; font-weight:700; text-decoration:none}
.nav-toggle{display:none;background:none;border:0}
.nav-toggle .bar{display:block; width:26px; height:3px; background:#222; margin:5px 0; border-radius:2px}
@media (max-width: 960px){
  .nav ul{position:absolute; left:0; right:0; top:64px; background:#fff; border-bottom:1px solid #eee; padding:14px; display:none; flex-direction:column; gap:10px}
  .nav ul.open{display:flex}
  .nav-toggle{display:block}
}

/* Hero */
.hero{
  background: url('../img/hero.svg') center/cover no-repeat, radial-gradient(1000px 500px at 30% 20%, rgba(0,150,57,.15), transparent), #0f0d0b;
  color:#fff;
}
.hero .inner{padding:90px 0 70px}
.kicker{letter-spacing:.14em; text-transform:uppercase; color:#eaf5ed; font-weight:800; font-size:.85rem}
.hero h1{font-size: clamp(2rem, 4vw, 3.2rem); line-height:1.1; margin:10px 0 14px}
.hero p{max-width:680px; color:#f1f5f1; font-size:1.1rem}
.cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 16px; border-radius:14px; border:1px solid #0d6e2b; cursor:pointer;
  background: linear-gradient(180deg, var(--brand), #0b7f33);
  color:#fff; font-weight:800; text-decoration:none; box-shadow:var(--shadow);
}
.btn.secondary{background:linear-gradient(180deg, #ffffff, #f0ede8); color:#0b7f33; border-color:#d8d2c7}
.btn.small{padding:8px 12px; font-size:.95rem}
.badge{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; background:#f0f8f2; border-radius:999px; font-weight:700; color:#0b7f33; border:1px solid #c6e8cf}

/* Sections */
section{padding:60px 0}
.section-title{font-size: clamp(1.6rem, 3vw, 2.2rem); margin:0 0 10px}
.section-sub{color:var(--muted); margin:0 0 28px; max-width:720px}

/* Cards */
.card{background:#fff; border:1px solid #eee; border-radius: var(--radius); padding:18px; box-shadow:var(--shadow)}
.card h3{margin:8px 0 6px}
.card .muted{color:var(--muted)}

/* Products */
.products .card img{border-radius:14px}
.products .label{font-size:.85rem; color:#0b7f33; font-weight:800}
.filters{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px}
select, input[type="search"]{padding:10px 12px; border-radius:12px; border:1px solid #ddd; background:#fff}

/* Testimonials */
.testimonial{padding:18px; background:#fff; border:1px solid #eee; border-radius:16px; position:relative}
.testimonial:before{content:"“"; position:absolute; left:12px; top:-12px; font-size:48px; color:#e2efe6;}

/* Footer */
footer{
  background: url('../img/pattern.svg') center/420px repeat;
  border-top:1px solid #eee; margin-top:40px
}
footer .cols{display:grid; gap:22px; grid-template-columns: 2fr 1fr 1fr}
@media (max-width: 960px){ footer .cols{grid-template-columns:1fr}}
footer h4{margin:0 0 10px}
.newsletter{display:flex; gap:8px; flex-wrap:wrap}
.newsletter input{flex:1; min-width:240px; padding:10px 12px; border:1px solid #ddd; border-radius:12px}
.newsletter button{padding:10px 14px; border-radius:12px; border:1px solid #0d6e2b; background:var(--brand); color:#fff}

/* Utils */
.hidden{display:none}
.center{text-align:center}
hr.sep{border:0; border-top:1px solid #eee; margin:28px 0}
.active-link{color:var(--brand); text-decoration:underline}