/* ============================================================
   Villalobos PC Hulp — portaalsite
   Huisstijl: groen/cream, Fraunces + DM Sans + Caveat
   ============================================================ */
:root {
  --cream: #EBF5EE;
  --cream-deep: #CDE3D5;
  --paper: #F4FAF6;
  --ink: #17291F;
  --ink-soft: #3A5E4A;
  --green: #25784A;
  --green-deep: #1A5736;
  --olive: #5A9E76;
  --mustard: #8FBE5A;
  --peach: #AADCBC;
  --shadow: rgba(23, 41, 31, 0.09);
  --shadow-strong: rgba(23, 41, 31, 0.16);
  --radius: 20px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: "DM Sans", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: "Fraunces", Georgia, serif; line-height: 1.15; font-weight: 700; }

a { color: var(--green-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { width: min(1120px, 92vw); margin: 0 auto; }

.accent {
  font-family: "Caveat", cursive;
  color: var(--green);
  font-weight: 700;
}

/* ---------- Navigatie ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(235, 245, 238, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cream-deep);
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: "Fraunces", serif; font-weight: 800; font-size: 1.15rem; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand .dot { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, var(--green), var(--olive)); display: grid; place-items: center; color: #fff; font-size: 1rem; }
.nav-links { display: flex; gap: 26px; align-items: center; }
.nav-links a { color: var(--ink-soft); font-weight: 600; font-size: .96rem; }
.nav-links a:hover { color: var(--green-deep); text-decoration: none; }
.nav-cta { background: var(--green); color: #fff !important; padding: 9px 18px; border-radius: 999px; }
.nav-cta:hover { background: var(--green-deep); text-decoration: none; }
@media (max-width: 720px) { .nav-links a:not(.nav-cta) { display: none; } }

/* ---------- Hero ---------- */
.hero { padding: 74px 0 56px; position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; right: -140px; top: -120px;
  width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--peach), transparent 70%);
  opacity: .6; z-index: 0;
}
.hero .wrap { position: relative; z-index: 1; }
.hero .kicker { font-family: "Caveat", cursive; font-size: 1.7rem; color: var(--green); }
.hero h1 { font-size: clamp(2.3rem, 5vw, 3.7rem); margin: 6px 0 18px; max-width: 15ch; }
.hero p { font-size: 1.18rem; color: var(--ink-soft); max-width: 56ch; }
.hero-actions { margin-top: 30px; display: flex; gap: 14px; flex-wrap: wrap; }
.btn { display: inline-block; padding: 13px 26px; border-radius: 999px; font-weight: 700; font-size: 1rem; cursor: pointer; border: none; transition: transform .12s, box-shadow .2s; }
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn-primary { background: var(--green); color: #fff; box-shadow: 0 10px 24px var(--shadow); }
.btn-primary:hover { background: var(--green-deep); }
.btn-ghost { background: var(--paper); color: var(--green-deep); border: 1.5px solid var(--cream-deep); }

/* ---------- Secties ---------- */
section { padding: 60px 0; }
.section-head { max-width: 60ch; margin-bottom: 38px; }
.section-head .eyebrow { font-family: "Caveat", cursive; font-size: 1.5rem; color: var(--olive-deep, var(--green)); }
.section-head h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); margin-top: 2px; }
.section-head p { color: var(--ink-soft); font-size: 1.08rem; margin-top: 10px; }
.tinted { background: var(--paper); }

/* ---------- Apps grid ---------- */
.apps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }
.app-card {
  background: var(--paper); border: 1px solid var(--cream-deep);
  border-radius: var(--radius); padding: 26px 24px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 4px 14px var(--shadow); transition: transform .15s, box-shadow .2s;
}
.app-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px var(--shadow-strong); }
.app-icon { width: 54px; height: 54px; border-radius: 15px; background: linear-gradient(135deg, var(--cream-deep), var(--peach)); display: grid; place-items: center; font-size: 1.7rem; }
.app-card h3 { font-size: 1.25rem; }
.app-card p { color: var(--ink-soft); font-size: .98rem; flex: 1; }
.chip { align-self: flex-start; font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 4px 11px; border-radius: 999px; }
.chip.win { background: #e3efe7; color: var(--green-deep); }
.chip.web { background: #fdf3d9; color: #8a6d1a; }
.chip.soon { background: #eee6f0; color: #6a4a78; }
.app-link { font-weight: 700; color: var(--green-deep); font-size: .95rem; margin-top: 2px; }

/* ---------- Blog ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.post-card {
  background: var(--paper); border: 1px solid var(--cream-deep); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 4px 14px var(--shadow); transition: transform .15s, box-shadow .2s;
}
.post-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px var(--shadow-strong); }
.post-card .thumb { height: 130px; background: linear-gradient(135deg, var(--olive), var(--green-deep)); display: grid; place-items: center; font-size: 2.6rem; }
.post-card .body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.post-card .date { font-size: .82rem; color: var(--olive); font-weight: 600; }
.post-card h3 { font-size: 1.2rem; }
.post-card p { color: var(--ink-soft); font-size: .96rem; flex: 1; }

/* ---------- Artikel ---------- */
.article { padding: 56px 0 40px; }
.article .wrap { max-width: 720px; }
.article .date { color: var(--olive); font-weight: 600; }
.article h1 { font-size: clamp(2rem, 4vw, 3rem); margin: 8px 0 24px; }
.article p, .article ul { color: var(--ink); font-size: 1.1rem; margin-bottom: 20px; }
.article ul { padding-left: 22px; }
.article li { margin-bottom: 8px; }
.article h2 { font-size: 1.6rem; margin: 34px 0 14px; }
.back-link { display: inline-block; margin-bottom: 26px; font-weight: 700; }

/* ---------- Contact ---------- */
.contact-box { background: linear-gradient(135deg, var(--green-deep), var(--green)); color: #fff; border-radius: 26px; padding: 48px 40px; text-align: center; }
.contact-box h2 { color: #fff; font-size: clamp(1.8rem, 3.5vw, 2.5rem); }
.contact-box p { color: #dcefe3; font-size: 1.12rem; margin: 12px auto 26px; max-width: 46ch; }
.contact-box .btn-primary { background: #fff; color: var(--green-deep); }
.contact-box .btn-primary:hover { background: var(--cream); }

/* ---------- Footer ---------- */
footer { background: var(--ink); color: #cde3d5; padding: 40px 0; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; align-items: center; }
footer a { color: var(--peach); }
footer .muted { color: #7fa48c; font-size: .9rem; }

/* ---------- Lightbox (klikbare screenshots) ---------- */
.app-card { cursor: pointer; }
.lb { position: fixed; inset: 0; background: rgba(23,41,31,.82); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 24px; }
.lb[hidden] { display: none; }
.lb-inner { position: relative; max-width: min(920px, 94vw); max-height: 92vh; display: flex; flex-direction: column; gap: 12px; }
.lb-inner img { max-width: 100%; max-height: 80vh; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.5); background: #fff; }
.lb-cap { color: #fff; text-align: center; font-weight: 600; font-size: 1.05rem; }
.lb-close { position: absolute; top: -16px; right: -16px; width: 42px; height: 42px; border-radius: 50%; border: none; background: #fff; color: var(--ink); font-size: 1.5rem; line-height: 1; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.35); }