/* ============================================================
   FOODZO – Main Stylesheet
   www.foodzo.nl | Kleuren gebaseerd op officieel logo
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&family=DM+Sans:wght@300;400;500;600&display=swap');

:root {
  /* ── Logo-kleuren ─────────────────────────────────────── */
  --logo-blue:    #1E88E5;
  --logo-orange:  #F57C00;
  --logo-green:   #43A047;
  --logo-yellow:  #FDD835;
  --logo-sky:     #29B6F6;

  /* ── Zakelijk brand-palette ───────────────────────────── */
  --navy:         #0D47A1;
  --blue:         #1E88E5;
  --blue-mid:     #1565C0;
  --blue-light:   #E3F2FD;
  --blue-pale:    #BBDEFB;
  --orange:       #F57C00;
  --orange-light: #FFF3E0;
  --green:        #2E7D32;
  --green-logo:   #43A047;
  --green-light:  #E8F5E9;
  --white:        #FFFFFF;
  --offwhite:     #F8FBFF;
  --charcoal:     #263238;
  --gray-dark:    #37474F;
  --gray:         #607D8B;
  --gray-light:   #ECEFF1;
  --gray-pale:    #F5F7FA;

  --radius:     10px;
  --radius-lg:  18px;
  --shadow:     0 4px 20px rgba(30,136,229,0.10);
  --shadow-md:  0 8px 32px rgba(30,136,229,0.14);
  --shadow-lg:  0 16px 48px rgba(13,71,161,0.18);
  --transition: 0.28s cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: 'DM Sans', sans-serif;
  color: var(--gray-dark);
  background: var(--white);
  line-height: 1.7;
  overflow-x: hidden;
}

h1,h2,h3,h4,h5 { font-family:'Nunito',sans-serif; line-height:1.22; color:var(--navy); }
h1 { font-size:clamp(2rem,5vw,3.6rem); font-weight:900; }
h2 { font-size:clamp(1.5rem,3.5vw,2.4rem); font-weight:800; }
h3 { font-size:clamp(1.15rem,2.5vw,1.6rem); font-weight:700; }
h4 { font-size:1.05rem; font-weight:700; font-family:'DM Sans',sans-serif; color:var(--blue); }
p  { color:var(--gray); line-height:1.8; margin-bottom:1rem; }
a  { text-decoration:none; color:var(--blue); transition:var(--transition); }
a:hover { color:var(--navy); }
img { max-width:100%; height:auto; display:block; }

.container { max-width:1180px; margin:0 auto; padding:0 24px; }

/* ── HEADER ─────────────────────────────────────────────── */
header {
  position:sticky; top:0; z-index:1000;
  background:rgba(255,255,255,0.97);
  backdrop-filter:blur(14px);
  border-bottom:3px solid var(--blue-pale);
  box-shadow:0 2px 16px rgba(30,136,229,0.08);
  transition:var(--transition);
}
.nav-inner { display:flex; align-items:center; justify-content:space-between; height:82px; }

/* ── LOGO ───────────────────────────────────────────────── */
.logo { display:flex; align-items:center; gap:10px; text-decoration:none; }
.logo img.logo-img { height:58px; width:auto; object-fit:contain; }

/* Fallback als img niet laadt */
.logo-icon-grid {
  width:44px; height:44px; border-radius:10px; overflow:hidden;
  display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr;
  gap:2px; background:#fff; padding:3px;
  box-shadow:0 2px 8px rgba(0,0,0,0.12); flex-shrink:0;
}
.logo-icon-grid span:nth-child(1) { background:var(--logo-orange); border-radius:3px 0 0 0; }
.logo-icon-grid span:nth-child(2) { background:var(--logo-green);  border-radius:0 3px 0 0; }
.logo-icon-grid span:nth-child(3) { background:var(--logo-sky);    border-radius:0 0 0 3px; }
.logo-icon-grid span:nth-child(4) { background:var(--logo-yellow); border-radius:0 0 3px 0; }
.logo-name {
  font-family:'Nunito',sans-serif; font-size:1.5rem;
  font-weight:900; color:var(--logo-blue); letter-spacing:-0.3px; line-height:1.1;
}
.logo-tagline {
  display:block; font-size:0.6rem; color:var(--gray);
  font-weight:700; text-transform:uppercase; letter-spacing:0.8px; line-height:1;
}

/* ── NAV ────────────────────────────────────────────────── */
nav ul { display:flex; list-style:none; gap:4px; align-items:center; }
nav a { font-size:0.875rem; font-weight:600; color:var(--gray-dark); padding:8px 13px; border-radius:8px; transition:var(--transition); white-space:nowrap; }
nav a:hover, nav a.active { color:var(--blue); background:var(--blue-light); }
.nav-cta { background:var(--blue) !important; color:var(--white) !important; padding:9px 20px !important; border-radius:8px !important; font-weight:700 !important; }
.nav-cta:hover { background:var(--navy) !important; color:var(--white) !important; transform:translateY(-1px); box-shadow:0 4px 14px rgba(30,136,229,0.3); }
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:8px; }
.hamburger span { width:24px; height:2px; background:var(--navy); border-radius:2px; transition:var(--transition); }

/* ── HERO ───────────────────────────────────────────────── */
.hero {
  background:linear-gradient(135deg, var(--navy) 0%, var(--blue) 55%, #42A5F5 100%);
  color:var(--white); padding:100px 0 84px;
  position:relative; overflow:hidden;
}
.hero::before {
  content:''; position:absolute; top:-120px; right:-80px;
  width:520px; height:520px;
  background:radial-gradient(circle, rgba(255,255,255,0.07) 0%, transparent 70%);
  border-radius:50%;
}
.hero::after {
  content:''; position:absolute; bottom:-60px; left:-40px;
  width:320px; height:320px;
  background:radial-gradient(circle, rgba(245,124,0,0.12) 0%, transparent 70%);
  border-radius:50%;
}
.hero-inner { position:relative; z-index:1; max-width:780px; }
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.28);
  color:#fff; padding:6px 16px; border-radius:50px;
  font-size:0.8rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; margin-bottom:24px;
}
.hero h1 { color:var(--white); margin-bottom:20px; }
.hero p  { color:rgba(255,255,255,0.87); font-size:1.13rem; max-width:600px; margin-bottom:36px; }
.hero-actions { display:flex; gap:16px; flex-wrap:wrap; }

/* ── PAGE HEADER ────────────────────────────────────────── */
.page-header {
  background:linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%);
  padding:64px 0 56px; position:relative; overflow:hidden;
}
.page-header::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--logo-orange), var(--logo-green), var(--logo-sky), var(--logo-yellow));
}
.page-header h1 { color:var(--white); margin-bottom:12px; }
.page-header p  { color:rgba(255,255,255,0.82); font-size:1.05rem; max-width:620px; margin:0; }
.breadcrumb { display:flex; align-items:center; gap:8px; margin-bottom:14px; font-size:0.85rem; color:rgba(255,255,255,0.55); }
.breadcrumb a { color:var(--blue-pale); }
.breadcrumb span { color:rgba(255,255,255,0.35); }

/* ── BUTTONS ────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 28px; border-radius:var(--radius);
  font-family:'DM Sans',sans-serif; font-size:0.95rem;
  font-weight:700; cursor:pointer; transition:var(--transition);
  border:none; text-decoration:none; letter-spacing:0.2px;
}
.btn-primary { background:var(--white); color:var(--navy); box-shadow:var(--shadow); }
.btn-primary:hover { background:var(--blue-light); color:var(--navy); transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.btn-outline { background:transparent; color:var(--white); border:2px solid rgba(255,255,255,0.55); }
.btn-outline:hover { background:rgba(255,255,255,0.14); border-color:var(--white); color:var(--white); transform:translateY(-2px); }
.btn-blue { background:var(--blue); color:var(--white); box-shadow:0 4px 14px rgba(30,136,229,0.28); }
.btn-blue:hover { background:var(--navy); color:var(--white); transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.btn-navy { background:var(--navy); color:var(--white); box-shadow:0 4px 14px rgba(13,71,161,0.22); }
.btn-navy:hover { background:var(--blue); color:var(--white); transform:translateY(-2px); }
.btn-orange { background:var(--orange); color:var(--white); box-shadow:0 4px 14px rgba(245,124,0,0.28); }
.btn-orange:hover { background:#E65100; color:var(--white); transform:translateY(-2px); }

/* ── SECTIONS ───────────────────────────────────────────── */
section { padding:80px 0; }
.section-alt { background:var(--offwhite); }
.section-dark { background:var(--navy); color:var(--white); }
.section-dark h2, .section-dark h3 { color:var(--white); }
.section-dark p { color:rgba(255,255,255,0.8); }
.section-label { font-size:0.76rem; font-weight:800; text-transform:uppercase; letter-spacing:2px; color:var(--blue); margin-bottom:10px; display:block; }
.section-label.light { color:var(--blue-pale); }
.section-label.orange { color:var(--orange); }

/* ── CARDS ──────────────────────────────────────────────── */
.card {
  background:var(--white); border-radius:var(--radius-lg);
  padding:34px 30px; box-shadow:var(--shadow);
  transition:var(--transition); border:1px solid rgba(30,136,229,0.07);
  border-top:3px solid transparent;
}
.card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); border-top-color:var(--logo-blue); }
.card-icon { width:54px; height:54px; background:var(--blue-light); border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin-bottom:18px; }
.card h3 { margin-bottom:10px; font-size:1.15rem; }
.card p { margin:0; font-size:0.93rem; }

/* ── GRIDS ──────────────────────────────────────────────── */
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:32px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }

/* ── STATS ──────────────────────────────────────────────── */
.stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:var(--blue-pale); border-radius:var(--radius-lg); overflow:hidden; margin:48px 0; }
.stat-item { background:var(--white); padding:30px 20px; text-align:center; }
.stat-value { font-family:'Nunito',sans-serif; font-size:2.3rem; font-weight:900; color:var(--blue); display:block; line-height:1; margin-bottom:7px; }
.stat-label { font-size:0.83rem; color:var(--gray); font-weight:500; }

/* ── FEATURE LIST ───────────────────────────────────────── */
.feature-list { list-style:none; display:flex; flex-direction:column; gap:12px; }
.feature-list li { display:flex; align-items:flex-start; gap:11px; font-size:0.94rem; color:var(--gray); }
.feature-list li::before {
  content:'✓'; width:21px; height:21px;
  background:var(--blue-light); color:var(--blue);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:0.68rem; font-weight:800; flex-shrink:0; margin-top:2px;
}

/* ── PHASE CARDS ────────────────────────────────────────── */
.phase-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:22px; }
.phase-card { background:var(--white); border-radius:var(--radius-lg); padding:26px; border:1px solid var(--blue-pale); border-left:4px solid var(--blue); transition:var(--transition); }
.phase-card:hover { border-left-color:var(--orange); box-shadow:var(--shadow-md); }
.phase-num { font-family:'Nunito',sans-serif; font-size:2.2rem; font-weight:900; color:var(--blue-pale); line-height:1; margin-bottom:6px; }
.phase-card h4 { color:var(--navy); margin-bottom:9px; }
.phase-card p { font-size:0.88rem; margin:0; }
.phase-tag { display:inline-block; background:var(--blue-light); color:var(--blue); font-size:0.73rem; font-weight:700; padding:4px 10px; border-radius:50px; margin-top:11px; }

/* ── CONTACT ────────────────────────────────────────────── */
.contact-info-item { display:flex; align-items:flex-start; gap:14px; padding:18px 0; border-bottom:1px solid var(--blue-pale); }
.contact-info-item:last-child { border-bottom:none; }
.contact-icon { width:42px; height:42px; background:var(--blue-light); border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; }
.contact-label { font-size:0.75rem; color:var(--gray); font-weight:700; text-transform:uppercase; letter-spacing:0.8px; }
.contact-value { font-size:0.98rem; font-weight:700; color:var(--navy); }
.form-group { margin-bottom:18px; }
.form-group label { display:block; font-size:0.86rem; font-weight:700; color:var(--gray-dark); margin-bottom:5px; }
.form-group input, .form-group textarea, .form-group select { width:100%; padding:12px 15px; border:2px solid var(--blue-pale); border-radius:var(--radius); font-family:'DM Sans',sans-serif; font-size:0.94rem; color:var(--gray-dark); background:var(--white); transition:var(--transition); outline:none; }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(30,136,229,0.12); }
.form-group textarea { min-height:138px; resize:vertical; }
.required-note { font-size:0.8rem; color:var(--gray); margin-bottom:18px; }
.alert { padding:14px 18px; border-radius:var(--radius); font-size:0.88rem; display:none; margin-top:14px; }
.alert-success { background:#E8F5E9; color:#2E7D32; border:1px solid #A5D6A7; }
.alert-error   { background:#FFEBEE; color:#C62828; border:1px solid #FFCDD2; }

/* ── LEGAL ──────────────────────────────────────────────── */
.legal-content h2 { font-size:1.35rem; margin:38px 0 14px; padding-bottom:8px; border-bottom:2px solid var(--blue-pale); color:var(--navy); }
.legal-content h2:first-child { margin-top:0; }
.legal-content ul { padding-left:22px; margin-bottom:14px; }
.legal-content ul li { margin-bottom:5px; color:var(--gray); font-size:0.94rem; }

/* ── CTA BANNER ─────────────────────────────────────────── */
.cta-banner { background:linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%); padding:68px 0; text-align:center; position:relative; overflow:hidden; }
.cta-banner::before { content:''; position:absolute; top:-60%; right:-4%; width:440px; height:440px; background:rgba(255,255,255,0.04); border-radius:50%; }
.cta-banner::after  { content:''; position:absolute; bottom:-40%; left:-4%; width:300px; height:300px; background:rgba(245,124,0,0.08); border-radius:50%; }
.cta-banner h2 { color:var(--white); margin-bottom:14px; position:relative; z-index:1; }
.cta-banner p  { color:rgba(255,255,255,0.82); margin-bottom:30px; font-size:1.05rem; max-width:520px; margin-left:auto; margin-right:auto; position:relative; z-index:1; }
.cta-banner .btn { position:relative; z-index:1; }

/* ── MISC ───────────────────────────────────────────────── */
.highlight-band { background:var(--blue-light); border-left:4px solid var(--blue); padding:18px 22px; border-radius:0 var(--radius) var(--radius) 0; margin:26px 0; }
.highlight-band p { margin:0; font-size:0.97rem; }
.partner-badge { display:inline-flex; align-items:center; gap:12px; background:var(--white); border:2px solid var(--blue-pale); border-radius:var(--radius); padding:11px 18px; box-shadow:var(--shadow); }
.partner-badge-icon { width:38px; height:38px; background:#00B000; border-radius:7px; display:flex; align-items:center; justify-content:center; color:var(--white); font-weight:900; font-size:0.88rem; }

/* ── FOOTER ─────────────────────────────────────────────── */
footer { background:var(--charcoal); color:rgba(255,255,255,0.75); }
.footer-color-strip { height:5px; background:linear-gradient(90deg, var(--logo-orange) 0%, var(--logo-orange) 25%, var(--logo-green) 25%, var(--logo-green) 50%, var(--logo-sky) 50%, var(--logo-sky) 75%, var(--logo-yellow) 75%); }
.footer-inner { padding:56px 0 0; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.07); }
.footer-brand p { color:rgba(255,255,255,0.55); font-size:0.88rem; margin-top:14px; line-height:1.7; }
.footer-col h5 { font-family:'DM Sans',sans-serif; font-size:0.78rem; font-weight:800; text-transform:uppercase; letter-spacing:1.5px; color:var(--blue-pale); margin-bottom:14px; }
.footer-col ul { list-style:none; }
.footer-col ul li { margin-bottom:7px; }
.footer-col ul li a { color:rgba(255,255,255,0.58); font-size:0.88rem; transition:var(--transition); }
.footer-col ul li a:hover { color:var(--white); }
.footer-contact-item { display:flex; align-items:center; gap:9px; color:rgba(255,255,255,0.58); font-size:0.88rem; margin-bottom:9px; }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; padding:18px 0; font-size:0.8rem; color:rgba(255,255,255,0.35); }

/* ── ANIMATIONS ─────────────────────────────────────────── */
@keyframes fadeUp { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } }
.animate { animation:fadeUp 0.65s ease both; }
.animate-delay-1 { animation-delay:0.1s; }
.animate-delay-2 { animation-delay:0.2s; }
.animate-delay-3 { animation-delay:0.3s; }

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width:1024px) { .grid-4 { grid-template-columns:repeat(2,1fr); } .stats-row { grid-template-columns:repeat(2,1fr); } .footer-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:768px) {
  section { padding:56px 0; }
  .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr; }
  .stats-row { grid-template-columns:repeat(2,1fr); }
  nav ul { display:none; }
  nav ul.open { display:flex; flex-direction:column; position:absolute; top:72px; left:0; right:0; background:var(--white); padding:14px; box-shadow:var(--shadow-lg); border-top:2px solid var(--blue-pale); z-index:999; }
  .hamburger { display:flex; }
  .footer-grid { grid-template-columns:1fr; gap:28px; }
  .footer-bottom { flex-direction:column; gap:6px; text-align:center; }
  .hero { padding:64px 0 52px; }
}
@media (max-width:480px) { .stats-row { grid-template-columns:1fr; } .hero-actions { flex-direction:column; } .btn { justify-content:center; } }