/*
Theme Name: SEOvragen Onepager
Theme URI: https://seovragen.nl
Author: John Klokgieter / OpenAI
Description: Pixel-perfect onepage WordPress theme for SEOvragen.nl with full Customizer controls and WhatsApp CTA flow.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: seovragen-onepager
*/

:root{
  --green:#0b9238;
  --wa:#25D366;
  --dark:#0f172a;
  --muted:#64748b;
  --soft:#f4fbf5;
  --line:#e8eef2;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--dark);background:#fff;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}
a{text-decoration:none;color:inherit}
.container{width:min(100%,1184px);margin:0 auto;padding:0 38px}

/* Header */
.site-header{height:89px;border-bottom:1px solid #eef2f5;background:#fff;display:flex;align-items:center}
.nav{display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:2px;font-size:34px;font-weight:800;letter-spacing:-1.6px;color:#102033;line-height:1}
.logo .brand-seo{color:#10a144}
.logo i{font-size:44px;color:var(--green);line-height:1}
.nav-links{display:flex;align-items:center;gap:43px;font-size:14px;font-weight:500;color:#263244;margin-left:86px}
.header-cta{margin-left:auto}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:11px;border-radius:8px;font-weight:800;white-space:nowrap;transition:.15s ease;line-height:1}
.btn i{display:inline-flex;align-items:center;justify-content:center;line-height:1}
.btn-green{height:50px;padding:0 21px;background:linear-gradient(180deg,#10a842 0%,#079333 100%);color:#fff;box-shadow:0 9px 20px rgba(11,146,56,.22)}
.btn-green i{font-size:23px;color:#fff}
.btn-white{height:58px;padding:0 31px;background:#fff;color:#079333;border:1px solid rgba(255,255,255,.8);box-shadow:0 12px 24px rgba(0,0,0,.12);font-size:17px}
.btn-white i{font-size:27px;color:var(--wa)}

/* Hero */
.hero{position:relative;overflow:hidden;background:radial-gradient(760px 520px at 77% 58%,rgba(11,146,56,.075),transparent 66%),linear-gradient(90deg,#fff 0%,#fff 48%,#fbfdfb 100%)}
.hero:after{content:"";position:absolute;right:-190px;top:148px;width:690px;height:690px;background:rgba(11,146,56,.045);border-radius:50%;z-index:0}
.hero-wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.08fr .92fr;min-height:580px;align-items:center;gap:24px;padding:18px 38px 26px}
.hero-copy{padding-top:10px}
.kicker{font-size:15px;font-weight:800;color:#0b9238;text-transform:uppercase;letter-spacing:.02em;margin-bottom:20px}
.hero h1{font-size:58px;line-height:1.17;letter-spacing:-2.35px;font-weight:800;margin-bottom:18px;color:#102033}
.hero h1 .green{color:#0aa23d}
.hero-text{max-width:545px;color:#465367;font-size:19px;line-height:1.75;margin-bottom:32px;font-weight:400}
.trust{display:flex;align-items:center;gap:11px;margin-top:24px;color:#445064;font-size:16px;font-weight:400}
.trust .check-circle{width:24px;height:24px;border:2px solid #22c55e;border-radius:999px;display:flex;align-items:center;justify-content:center;color:#16a34a;font-size:12px;line-height:1;flex:0 0 auto}
.hero-phone{display:flex;justify-content:flex-end;align-items:center;align-self:stretch;padding-right:0px;padding-top:12px}

/* Phone */
.phone-shell{width:298px;height:540px;background:#111;border-radius:42px;padding:9px;box-shadow:0 20px 34px rgba(15,23,42,.2),0 5px 8px rgba(15,23,42,.12);position:relative}
.phone-shell:before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:120px;height:28px;background:#111;border-radius:0 0 18px 18px;z-index:5}
.phone-screen{width:100%;height:100%;border-radius:33px;overflow:hidden;background:#f7f5f2;position:relative;border:1px solid #333}
.status{height:36px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 18px 0 19px;font-size:11px;font-weight:700;color:#111;position:relative;z-index:3}
.status-icons{display:flex;gap:5px;align-items:center;font-size:10px;color:#111}
.wa-head{height:50px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 15px;border-bottom:1px solid #eef0f2}
.wa-left{display:flex;align-items:center;gap:8px}
.back{color:#0aa23d;font-size:18px;font-weight:600;margin-right:1px}.avatar{width:28px;height:28px;border-radius:50%;background:#0aa23d;color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px}.name{font-size:12px;font-weight:800;line-height:1.05;color:#111827}.online{font-size:10px;color:#777;font-weight:500}.wa-actions{display:flex;gap:16px;color:#0aa23d;font-size:14px;align-items:center}
.chat-bg{height:397px;padding:14px 15px;background:linear-gradient(rgba(247,245,242,.95),rgba(247,245,242,.95)),radial-gradient(circle at 20% 20%,rgba(0,0,0,.04) 1px,transparent 1px);background-size:auto,18px 18px;display:flex;flex-direction:column;gap:12px}
.bubble{max-width:200px;padding:10px 11px 8px;border-radius:9px;font-size:11px;line-height:1.48;color:#111827;box-shadow:0 1px 1px rgba(0,0,0,.04)}
.bubble.me{align-self:flex-end;background:#dcf8c6;border-top-right-radius:3px}.bubble.them{align-self:flex-start;background:#fff;border-top-left-radius:3px}.bubble .meta{display:flex;justify-content:flex-end;gap:4px;align-items:center;margin-top:3px;font-size:9px;color:#8a8a8a}.ticks{color:#35a8e0;font-size:9px}
.chat-input{height:49px;background:#f1f3f4;display:flex;align-items:center;padding:7px 8px;gap:7px}.input-pill{height:34px;background:#fff;border-radius:20px;display:flex;align-items:center;gap:8px;padding:0 10px;flex:1;color:#9198a1;font-size:11px}.input-pill i{color:#9198a1;font-size:13px}.mic{width:36px;height:36px;border-radius:50%;background:#0aa23d;color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px}

/* Sections shared */
.section-label{text-align:center;font-size:14px;font-weight:800;letter-spacing:.02em;color:#0b9238;text-transform:uppercase;margin-bottom:5px}.section-title{text-align:center;font-size:28px;line-height:1.25;letter-spacing:-.75px;font-weight:800;margin-bottom:43px}.section-title .green{color:#0aa23d}

/* Benefits */
.benefits{background:#fff;padding:26px 0 61px;border-top:1px solid rgba(241,245,249,.65)}
.benefit-grid{display:grid;grid-template-columns:repeat(4,1fr);align-items:stretch}.benefit{position:relative;text-align:center;padding:0 37px}.benefit:not(:last-child):after{content:"";position:absolute;right:0;top:15px;width:1px;height:150px;background:#e5e7eb}.icon-disc{width:68px;height:68px;border-radius:50%;background:#eaf8ec;display:flex;align-items:center;justify-content:center;margin:0 auto 18px}.icon-disc i{font-size:33px;color:#0aa23d}.benefit h3{font-size:15px;font-weight:800;margin-bottom:10px;color:#121b2a}.benefit p{font-size:13px;line-height:1.75;color:#526071;max-width:190px;margin:0 auto}

/* Steps */
.steps{background:#fbfdfb;padding:26px 0 48px}.steps .section-title{margin-bottom:38px}.step-row{display:grid;grid-template-columns:1fr 100px 1fr 100px 1fr;align-items:start;max-width:850px;margin:0 auto}.step{text-align:center}.step-icons{display:flex;align-items:center;justify-content:center;gap:14px;height:72px;margin-bottom:10px}.num{width:42px;height:42px;border-radius:50%;background:#0aa23d;color:#fff;font-size:22px;font-weight:800;display:flex;align-items:center;justify-content:center}.step .icon-disc{width:68px;height:68px;margin:0}.step .icon-disc i{font-size:31px}.arrow{height:72px;display:flex;align-items:center;justify-content:center;color:#0aa23d;font-size:42px;font-weight:300;line-height:1}.step h3{font-size:15px;font-weight:800;margin-bottom:5px}.step p{font-size:12px;color:#64748b;line-height:1.65;max-width:190px;margin:0 auto}

/* Audience */
.audience{background:#fff;padding:13px 0 31px;text-align:center}.audience p{font-size:15px;color:#465367;max-width:800px;margin:0 auto 18px;line-height:1.65}.audience p strong{color:#0aa23d;font-weight:800}.tag-list{display:flex;justify-content:center;align-items:center;gap:13px;flex-wrap:wrap}.tag{min-width:94px;height:34px;border:1px solid rgba(11,146,56,.28);border-radius:6px;background:#fbfffb;color:#0b9238;font-size:14px;font-weight:500;display:flex;align-items:center;justify-content:center;padding:0 16px}

/* Final CTA */
.final-cta{background:linear-gradient(180deg,#06a642 0%,#078f34 100%);color:#fff;padding:18px 0 17px;box-shadow:inset 0 1px rgba(255,255,255,.12)}.final-inner{display:flex;align-items:center;justify-content:space-between;gap:30px}.final-left{display:flex;align-items:center;gap:24px}.final-left i{font-size:66px;color:#fff;line-height:1}.final-left h2{font-size:26px;font-weight:800;letter-spacing:-.4px;line-height:1.2}.final-left p{font-size:17px;line-height:1.35;opacity:.95}
.footer{background:#087d2e;color:rgba(255,255,255,.78);height:38px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:12px}

/* Page template */
.page-main{padding:72px 0;min-height:calc(100vh - 127px)}
.page-content{max-width:820px;margin:0 auto;color:#334155;font-size:17px;line-height:1.8}.page-content h1{font-size:42px;line-height:1.15;letter-spacing:-1.4px;color:#102033;margin-bottom:24px}.page-content h2,.page-content h3{color:#102033;margin:28px 0 12px}.page-content p{margin-bottom:18px}.page-content ul,.page-content ol{margin:0 0 20px 22px}

@media(max-width:900px){

  .container{
    padding:0 22px;
  }

  .site-header{
    height:auto;
    padding:17px 0;
  }

  .nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:12px;
  }

  .logo{
    font-size:28px;
  }

  .logo i{
    font-size:36px;
  }

  .header-cta{
    margin-left:auto;
  }

.nav-links{
  display:none;
}

  .hero-wrap{
    grid-template-columns:1fr;
    padding-top:48px;
  }

  .hero h1{
    font-size:44px;
  }

  .hero-phone{
    padding:20px 0 0;
    justify-content:center; /* BELANGRIJK: mobiel weer centreren */
  }

  .benefit-grid{
    grid-template-columns:1fr 1fr;
    gap:38px;
  }

  .benefit:nth-child(2):after{
    display:none;
  }

  .step-row{
    grid-template-columns:1fr;
  }

  .arrow{
    height:44px;
    transform:rotate(90deg);
  }

  .final-inner{
    flex-direction:column;
    text-align:center;
  }

  .final-left{
    justify-content:center;
  }

  .btn-white{
    width:100%;
    max-width:330px;
  }

}

/* =========================
   LINKTREE PAGINA — FINAL
   ========================= */

.linktree-page{
  padding:50px 0 80px;
  background:#ffffff;
  min-height:calc(100vh - 120px);
}

.linktree-container{
  max-width:520px;
  margin:0 auto;
  text-align:center;
}

/* =========================
   PROFIEL
   ========================= */

.linktree-profile{
  margin-top:10px;
  margin-bottom:32px;
}

.profile-icon{
  width:96px;
  height:96px;
  border-radius:50%;
  background:#eaf8ec;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 18px;
}

.profile-icon i{
  font-size:38px;
  color:#0b9238;
}

.linktree-profile h1{
  font-size:24px;
  font-weight:800;
  color:#102033;
  margin-bottom:8px;
  letter-spacing:-0.3px;
}

.linktree-profile p{
  font-size:14px;
  color:#64748b;
  line-height:1.6;
  max-width:420px;
  margin:0 auto;
}

/* =========================
   BUTTONS
   ========================= */

.linktree-links{
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* BASE BUTTON */

.linktree-btn{
  height:58px;
  padding:0 22px;
  border-radius:10px;
  background:#ffffff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-weight:700;
  font-size:15px;
  color:#102033;
  border:1px solid #e5e7eb;
  box-shadow:0 6px 14px rgba(0,0,0,0.06);
  transition:all .18s ease;
}

/* HOVER */

.linktree-btn:hover{
  transform:translateY(-2px);
  border-color:#0b9238;
  box-shadow:0 12px 26px rgba(11,146,56,0.18);
}

/* ACTIVE (klik gevoel) */

.linktree-btn:active{
  transform:translateY(0);
  box-shadow:0 4px 10px rgba(0,0,0,0.08);
}

/* ARROW */

.linktree-arrow{
  font-size:20px;
  color:#0b9238;
  transition:.15s ease;
}

.linktree-btn:hover .linktree-arrow{
  transform:translateX(3px);
}

/* =========================
   FEATURED BUTTON (optioneel)
   ========================= */

.linktree-btn:first-child{
  background:linear-gradient(180deg,#10a842 0%,#079333 100%);
  color:#ffffff;
  border:none;
  box-shadow:0 10px 22px rgba(11,146,56,0.25);
}

.linktree-btn:first-child .linktree-arrow{
  color:#ffffff;
}

.linktree-btn:first-child:hover{
  box-shadow:0 14px 30px rgba(11,146,56,0.35);
}

/* =========================
   RESPONSIVE
   ========================= */

@media(max-width:600px){

  .linktree-container{
    padding:0 16px;
  }

  .linktree-btn{
    font-size:14px;
    height:54px;
  }

  .profile-icon{
    width:84px;
    height:84px;
  }

  .profile-icon i{
    font-size:32px;
  }

}

/* Footer spacing fix */
.footer a {
  margin: 0 6px;
}

.footer .sep {
  margin: 0 10px;
  opacity: 0.6;
}

/* Affiliate disclosure bar */
.affiliate-bar {
  background: #f8faf9;
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
  padding: 14px 0;
  font-size: 13px;
  color: #5f6b7a;
  text-align: center;
}

.affiliate-bar .container {
  max-width: 820px;
}

/* Linktree background effect (zelfde vibe als homepage) */
.linktree-page {
  position: relative;
  overflow: hidden;
  background: radial-gradient(
      700px 500px at 80% 60%,
      rgba(11,146,56,0.06),
      transparent 65%
    ),
    linear-gradient(180deg, #ffffff 0%, #f8faf9 100%);
}

.linktree-page::after {
  content: "";
  position: absolute;
  right: -200px;
  bottom: -200px;
  width: 700px;
  height: 700px;
  background: rgba(11,146,56,0.05);
  border-radius: 50%;
  z-index: 0;
}

/* Zorg dat content erboven ligt */
.linktree-container {
  position: relative;
  z-index: 1;
}

@media(max-width:600px){

  .footer {
    flex-direction: column;
    height: auto;
    padding: 12px 16px;
    line-height: 1.6;
  }

  .footer .sep {
    display: none;
  }

  .footer a {
    display: inline-block;
    margin: 4px 6px;
  }

}

.linktree-only .site-header {
  display: none !important;
}