/* styles.css — Vibrant fresh produce + hero redesign (updated) */

/* ACCENTS (tuned to your logo) */
:root{
  --accent-blue:#1e90ff;
  --accent-purple:#7c3aed;
  --accent-orange:#ff7a2a;
  --bg-1:#041a22;
  --bg-2:#061f26;
  --card: rgba(255,255,255,0.03);
  --muted:#9fb7c7;
  --text:#e6f7ff;
  --glass-border: rgba(255,255,255,0.03);
  --radius:12px;
  --max-width:1100px;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:linear-gradient(180deg,var(--bg-1),var(--bg-2));color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Arial}
.container{max-width:var(--max-width);margin:0 auto;padding:18px}

/* Header */
.site-header{position:sticky;top:0;z-index:90;background:linear-gradient(180deg,rgba(4,12,16,0.6),rgba(4,12,16,0.35));backdrop-filter:blur(6px);border-bottom:1px solid rgba(255,255,255,0.02)}
.header-inner{display:flex;align-items:center;gap:12px;padding:10px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.logo{height:40px;max-height:48px}
.brand-text .company{font-weight:800}
.brand-text .tag{font-size:12px;color:var(--muted)}
.nav-main{margin-left:auto;display:flex;align-items:center;gap:12px}
.nav-toggle{display:none;background:transparent;border:0;color:var(--muted);font-size:20px;padding:6px;border-radius:6px}
.nav-list{list-style:none;margin:0;padding:0;display:flex;gap:12px}
.nav-list a{color:var(--muted);text-decoration:none;padding:8px 10px;border-radius:8px;font-weight:700}
.nav-list a.active, .nav-list a:hover{color:var(--text);background:linear-gradient(90deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01))}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:10px;padding:8px 12px;font-weight:700;cursor:pointer;border:0;text-decoration:none}
.btn-primary{background:linear-gradient(90deg,var(--accent-blue),var(--accent-purple));color:#fff;box-shadow:0 8px 24px rgba(13,28,44,0.45)}
.btn-primary:hover{transform:translateY(-3px)}
.btn-outline{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--text)}
.btn-ghost{background:transparent;border:0;color:var(--text)}

/* HERO (mobile-first) */
.hero{padding:26px 0}
.hero-inner{display:grid;grid-template-columns:1fr;gap:18px;align-items:start}
.kicker{color:var(--muted);font-size:13px;margin-bottom:8px;display:block}
.hero-headline{font-size:28px;line-height:1.03;margin:0 0 10px;color:#bfe1ff;font-weight:800}
.headline-gradient{background:linear-gradient(90deg,var(--accent-blue),var(--accent-purple),var(--accent-orange));-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:gradient-slide 6s linear infinite}
@keyframes gradient-slide{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.lead{color:var(--muted);max-width:56ch;margin-bottom:12px}
.hero-ctas{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.hero-categories{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.cat.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,0.02);text-decoration:none;color:var(--text);font-weight:700}
.cat img{height:18px;display:inline-block}

/* hero media: video box and banner */
.hero-media{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.hero-video-box{width:100%;display:flex;justify-content:center}
.hero-video{
  width:100%;
  max-width:480px;      /* <-- limit the width so it won't be huge */
  max-height:270px;     /* <-- limit the height */
  height:auto;
  border-radius:12px;
  object-fit:cover;
  background:#03141a;
  border:1px solid rgba(255,255,255,0.03);
  box-shadow:0 10px 30px rgba(0,0,0,0.5);
}
.hero-media-banner{width:100%}
.hero-banner-img{width:100%;border-radius:12px;display:block;}

/* hero pledge */
.hero-pledge{padding:10px;background:linear-gradient(180deg,rgba(255,255,255,0.01),rgba(255,255,255,0.02));border-radius:10px;color:var(--muted)}

/* Cards & grids */
.section{margin-top:26px;margin-bottom:26px}
.section-title{font-size:20px;margin:0 0 14px}
.grid{display:grid;gap:14px}
.cards.grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.category-card{display:flex;gap:12px;align-items:center;padding:14px;background:linear-gradient(180deg, rgba(0,0,0,0.16), rgba(255,255,255,0.01));border-radius:12px;border:1px solid var(--glass-border);text-decoration:none;color:inherit;transition:transform .22s ease,box-shadow .22s ease}
.category-card:hover{transform:translateY(-6px);box-shadow:0 18px 50px rgba(0,0,0,0.6)}
.category-card .card-media img{height:44px}

/* product grid (3-up / 4-up) */
.product-grid{grid-template-columns:repeat(1,1fr)}
@media(min-width:720px){ .product-grid{grid-template-columns:repeat(3,1fr)} }
@media(min-width:1100px){ .product-grid{grid-template-columns:repeat(4,1fr)} }

.product-card{background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.01));border-radius:12px;overflow:hidden;display:flex;flex-direction:column;min-height:220px;border:1px solid var(--glass-border);transition:transform .18s ease,box-shadow .18s ease}
.product-card:hover{transform:translateY(-8px);box-shadow:0 18px 40px rgba(0,0,0,0.6)}
.thumb{height:140px;overflow:hidden;background:#04151a}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.product-meta{padding:10px;display:flex;flex-direction:column;gap:8px;flex:1}
.product-title{font-weight:800;color:var(--text);font-size:14px}
.product-desc{color:var(--muted);font-size:12px}
.product-actions{display:flex;gap:8px;margin-top:auto}
.btn-quote{background:linear-gradient(90deg,var(--accent-orange),var(--accent-purple));color:#fff;padding:8px 10px;border-radius:8px;text-decoration:none}

/* floating whatsapp */
.fab-wa{position:fixed;right:18px;bottom:18px;z-index:999;background:linear-gradient(90deg,#25D366,#16a34a);color:#041226;border:0;padding:12px 14px;border-radius:50px;box-shadow:0 8px 30px rgba(15,40,80,0.35);cursor:pointer}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .6s ease, transform .6s ease}
.reveal.revealed{opacity:1;transform:none}

/* footer */
.site-footer{padding:22px 0;border-top:1px solid rgba(255,255,255,0.02);margin-top:20px}
.footer-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}
.copy{color:var(--muted)}

/* responsive layout: make hero two-column on larger screens */
@media(min-width:980px){
  .hero-inner{grid-template-columns:1fr 420px;align-items:start}
  .hero-video{max-width:420px;max-height:240px}
  .hero-headline{font-size:40px}
  .hero-media{align-items:flex-end}
}

/* responsive header/nav */
@media(max-width:820px){
  .nav-list{display:none}
  .nav-toggle{display:block}
  .brand .logo{height:36px}
  .hero-headline{font-size:22px}
  .hero-video{max-width:360px;height:auto}
  .product-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:420px){
  .product-grid{grid-template-columns:repeat(1,1fr)}
  .hero-headline{font-size:18px}
  .thumb{height:120px}
}

/* --- contact layout (below) --- */
.contact-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
  margin: 18px 0;
}
.card {
  background: rgba(2,18,21,0.6);
  padding: 18px;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}
.contact-form h1 {
  margin: 0 0 8px 0;
  font-size: 24px;
  color: var(--text);
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.form-grid .field {
  display: flex;
  flex-direction: column;
}
.form-grid .field.full {
  grid-column: 1 / -1;
}
.form-grid input,
.form-grid select,
.form-grid textarea {
  padding: 10px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
  color: var(--text);
  outline: none;
}
.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus{
  box-shadow: 0 0 0 3px rgba(124,58,237,0.12);
  border-color: rgba(124,58,237,0.7);
}
.form-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  margin-top: 6px;
}

/* contact card */
.contact-info .info-logo {
  width: 64px;
  display: block;
  margin-bottom: 10px;
}
.contact-info h3 {
  margin-top: 0;
}
.quick-links {
  list-style: none;
  padding: 0;
  margin: 8px 0;
  display: grid;
  gap: 6px;
}
.quick-links a {
  color: var(--accent-blue);
  text-decoration: none;
}

/* Larger screens: two-column layout */
@media (min-width: 980px) {
  .contact-grid {
    grid-template-columns: 2fr 1fr;
    align-items: start;
  }
  .form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Small screens: single-column form layout */
@media (max-width: 600px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
  .form-actions {
    flex-direction: column;
    align-items: stretch;
  }
}