/*
Theme Name: Autonoom
Theme URI: https://autonoom.nl
Author: Infin
Description: Onepager voor Autonoom — softwarestack & continuïteit voor accountantskantoren
Version: 1.4
*/

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --blauw:#0047AB;
  --blauw-donker:#003280;
  --goud:#DAA52B;
  --goud-donker:#b8861e;
  --tekst:#333333;
  --grijs-zacht:#E0E0E0;
  --grijs-mid:#AAAAAA;
  --wit:#FFFFFF;
  --radius:10px;
  --radius-knop:8px;
}
body{font-family:'Inter',sans-serif;color:var(--tekst);background:#fff;font-size:16px;line-height:1.7}
h1,h2,h3,h4{font-family:'Poppins',sans-serif}
h1{font-size:clamp(2rem,4vw,3rem);font-weight:700;line-height:1.15}
h2{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:600;line-height:1.25}
h3{font-size:1.1rem;font-weight:600}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}

/* HEADER */
.site-header{position:sticky;top:0;z-index:100;background:#fff;height:64px;display:flex;align-items:center;border-bottom:1px solid transparent;transition:border-color .3s}
.site-header.scrolled{border-bottom-color:var(--grijs-zacht)}
.header-inner{max-width:1140px;margin:0 auto;padding:0 24px;width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo-blok{display:flex;align-items:center;gap:10px}
.logo-icon{width:36px;height:36px;background:var(--blauw);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.logo-icon span{color:#fff;font-family:'Poppins',sans-serif;font-weight:700;font-size:18px;line-height:1}
.logo-tekst{display:flex;flex-direction:column;gap:1px}
.logo-naam{font-family:'Poppins',sans-serif;font-weight:500;font-size:17px;color:var(--tekst);line-height:1.1}
.logo-sub{font-size:10px;color:var(--grijs-mid);text-transform:uppercase;letter-spacing:.12em;line-height:1}
nav{display:flex;gap:28px}
nav a{font-size:14px;font-weight:500;color:var(--tekst);transition:color .2s}
nav a:hover{color:var(--blauw)}
.btn{display:inline-block;padding:9px 20px;border-radius:var(--radius-knop);font-family:'Inter',sans-serif;font-size:14px;font-weight:500;cursor:pointer;transition:background .2s,transform .1s;border:none}
.btn:active{transform:scale(.98)}
.btn-goud{background:var(--goud);color:#333}
.btn-goud:hover{background:var(--goud-donker)}
.btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.7)}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px;border:none;background:none}
.hamburger span{display:block;width:22px;height:2px;background:var(--tekst);border-radius:2px;transition:all .3s}
.mobile-menu{display:none;position:fixed;top:64px;left:0;right:0;background:#fff;padding:20px 24px;border-bottom:1px solid var(--grijs-zacht);flex-direction:column;gap:16px;z-index:99}
.mobile-menu.open{display:flex}
.mobile-menu a{font-size:15px;font-weight:500;color:var(--tekst);padding:6px 0;border-bottom:1px solid var(--grijs-zacht)}

/* HERO */
.hero{background:var(--blauw-donker);padding:80px 24px;position:relative;overflow:hidden;min-height:520px}
.hero::after{content:'';position:absolute;right:-80px;top:50%;transform:translateY(-50%);width:420px;height:420px;border-radius:50%;border:60px solid rgba(255,255,255,.05);pointer-events:none}
.hero::before{content:'';position:absolute;right:100px;bottom:-100px;width:280px;height:280px;border-radius:50%;border:40px solid rgba(218,165,43,.07);pointer-events:none}
.hero-inner{max-width:1140px;margin:0 auto;width:100%;position:relative;z-index:1;display:flex;flex-direction:row;gap:56px;align-items:center}
.hero-content{flex:1 1 0;min-width:0}
.hero-foto-wrap{flex:1 1 0;display:flex;justify-content:center;align-items:center}
.hero-foto{width:100%;border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.3);object-fit:cover}
.badge-pill{display:inline-block;background:var(--blauw);color:#fff;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.12em;padding:5px 14px;border-radius:50px;margin-bottom:24px}
.hero h1{color:#fff;margin-bottom:20px}
.hero h1 .accent{color:var(--goud);font-style:italic}
.hero-sub{color:rgba(255,255,255,.8);font-size:17px;max-width:480px;margin-bottom:36px;line-height:1.65}
.hero-knoppen{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:32px}
.hero-attrib{font-size:12px;color:rgba(255,255,255,.5);letter-spacing:.02em}

/* STATS */
.stats-band{background:var(--grijs-zacht);padding:24px}
.stats-inner{max-width:1140px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.stat-item{text-align:center}
.stat-getal{font-family:'Poppins',sans-serif;font-size:22px;font-weight:600;color:var(--blauw);display:block;line-height:1.2}
.stat-label{font-size:13px;color:var(--tekst);margin-top:4px}

/* SECTIE */
.sectie{padding:96px 24px}
.sectie-inner{max-width:1140px;margin:0 auto}
.sectie-bg{background:#fafafa}
.sectie-label{font-size:12px;font-weight:500;color:var(--blauw);text-transform:uppercase;letter-spacing:.14em;margin-bottom:14px}
.sectie h2{margin-bottom:16px}
.sectie-intro{color:#555;font-size:15.5px;margin-bottom:48px;max-width:520px}
.sectie-intro.breed{max-width:none}

/* KAARTEN */
.kaarten-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}
.kaart{background:#fff;border:1px solid var(--grijs-zacht);border-radius:12px;padding:28px 24px;transition:border-color .2s,box-shadow .2s}
.kaart:hover{border-color:#b0c4e8;box-shadow:0 4px 18px rgba(0,71,171,.08)}
.kaart-icon-wrap{width:48px;height:48px;background:#EEF4FF;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.kaart-icon-wrap svg{width:24px;height:24px;stroke:var(--blauw);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kaart h3{margin-bottom:10px;color:var(--blauw)}
.kaart p{font-size:14.5px;color:#555;line-height:1.65}

/* AANPAK */
.aanpak-stappen{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.stap{padding:32px 28px;border-right:1px solid var(--grijs-zacht)}
.stap:last-child{border-right:none}
.stap.actief{background:#FFFBF0;border:1px solid var(--goud);border-radius:10px}
.stap-badge{width:36px;height:36px;background:var(--blauw);border-radius:50%;color:#fff;font-family:'Poppins',sans-serif;font-weight:600;font-size:15px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.stap.actief .stap-badge{background:var(--goud);color:#333}
.stap h3{margin-bottom:8px}
.stap p{font-size:14.5px;color:#555;line-height:1.6;margin-bottom:10px}
.stap-prijs{font-size:13px;color:var(--blauw);font-weight:500;background:#EEF4FF;display:inline-block;padding:4px 10px;border-radius:6px}
.stap.actief .stap-prijs{background:rgba(218,165,43,.15);color:#8a6500}
.stap-actief-label{font-size:11px;font-weight:600;color:var(--goud-donker);text-transform:uppercase;letter-spacing:.1em;margin-bottom:12px}

/* TARIEVEN */
.tarieven-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:28px}
.tarief-kaart{background:#fff;border:1px solid var(--grijs-zacht);border-radius:12px;padding:32px 28px}
.tarief-kaart.uitgelicht{border:2px solid var(--blauw)}
.tarief-label{font-size:12px;font-weight:600;color:var(--blauw);text-transform:uppercase;letter-spacing:.12em;margin-bottom:12px}
.tarief-kaart h3{font-size:1.25rem;margin-bottom:6px}
.tarief-prijs{font-size:15px;color:var(--grijs-mid);margin-bottom:20px}
.tarief-features{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.tarief-features li{font-size:14px;color:#555;padding-left:20px;position:relative;line-height:1.5}
.tarief-features li::before{content:'✓';position:absolute;left:0;color:var(--blauw);font-weight:700}
.tarief-vangnet{background:#EEF4FF;border-radius:8px;padding:10px 14px;font-size:13px;color:var(--blauw);display:flex;align-items:center;gap:8px}
.tarief-vangnet svg{width:16px;height:16px;stroke:var(--blauw);fill:none;stroke-width:1.8;flex-shrink:0}

/* VERTROUWEN */
.vertrouwen-sectie{background:#fafafa;padding:96px 24px}
.vertrouwen-inner{max-width:860px;margin:0 auto;text-align:center}
.vertrouwen-quote{font-style:italic;font-size:1.15rem;color:var(--tekst);line-height:1.75;max-width:680px;margin:0 auto 16px;font-family:'Poppins',sans-serif;font-weight:400}
.vertrouwen-attrib{font-size:13px;color:var(--grijs-mid);margin-bottom:32px}
.trust-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.badge-pill-licht{background:#fff;border:1px solid var(--grijs-zacht);border-radius:50px;padding:7px 16px;font-size:12px;color:var(--tekst);font-weight:500;white-space:nowrap}

/* CTA */
.cta-sectie{background:var(--blauw);padding:96px 24px;text-align:center}
.cta-sectie h2{color:#fff;margin-bottom:14px}
.cta-sectie p{color:rgba(255,255,255,.8);max-width:400px;margin:0 auto 36px;font-size:15.5px}
.cta-knoppen{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* FORMULIER */
.form-melding{padding:14px 18px;border-radius:8px;font-size:14px;margin-bottom:20px}
.form-melding.succes{background:#e6f4ea;color:#1a6b2e;border:1px solid #a8d5b0}
.form-melding.fout{background:#fdecea;color:#922;border:1px solid #f5c6c6}
.form-veld{width:100%;padding:11px 14px;border:1px solid var(--grijs-zacht);border-radius:8px;font-family:'Inter',sans-serif;font-size:14px;color:var(--tekst);outline:none;transition:border-color .2s;background:#fff}
.form-veld:focus{border-color:var(--blauw)}
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-label{font-size:13px;font-weight:500;color:var(--tekst);display:block;margin-bottom:6px}

/* CONTACT INFO (onder formulier) */
.contact-gegevens{display:flex;flex-wrap:wrap;gap:0;margin-top:36px;padding-top:28px;border-top:1px solid var(--grijs-zacht)}
.contact-gegeven{flex:1 1 180px;padding:16px 20px;border-right:1px solid var(--grijs-zacht)}
.contact-gegeven:last-child{border-right:none}
.contact-gegeven-label{font-size:11px;font-weight:600;color:var(--grijs-mid);text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px}
.contact-gegeven-waarde{font-size:14px;color:var(--tekst);line-height:1.5}
.contact-gegeven-waarde a{color:var(--blauw)}
.contact-gegeven-waarde a:hover{text-decoration:underline}

/* FOOTER */
.site-footer{background:#fff;border-top:1px solid var(--grijs-zacht);padding:40px 24px}
.footer-inner{max-width:1140px;margin:0 auto;display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:24px}
.footer-merk{display:flex;flex-direction:column;gap:4px}
.footer-naam{font-family:'Poppins',sans-serif;font-weight:600;font-size:16px;color:var(--tekst)}
.footer-onderdeel{font-size:13px;color:var(--grijs-mid)}
.footer-entiteiten{font-size:12px;color:var(--grijs-mid)}
.footer-nav{display:flex;gap:20px;flex-wrap:wrap}
.footer-nav a{font-size:13px;color:var(--grijs-mid);transition:color .2s}
.footer-nav a:hover{color:var(--blauw)}

/* RESPONSIVE */
@media(max-width:768px){
  nav,.btn-header{display:none}
  .hamburger{display:flex}
  .stats-inner{grid-template-columns:1fr}
  .aanpak-stappen{grid-template-columns:1fr}
  .stap{border-right:none;border-bottom:1px solid var(--grijs-zacht)}
  .stap:last-child{border-bottom:none}
  .stap.actief{margin:4px 0}
  .hero-inner{flex-direction:column;gap:36px}
  .hero-foto-wrap{display:none}
  .hero{padding:60px 24px;min-height:auto}
  .hero::after,.hero::before{display:none}
  .hero-knoppen{flex-direction:column;align-items:flex-start}
  .footer-inner{flex-direction:column}
  .footer-nav{flex-direction:column;gap:12px}
  .form-grid-2{grid-template-columns:1fr}
  .contact-gegevens{flex-direction:column}
  .contact-gegeven{border-right:none;border-bottom:1px solid var(--grijs-zacht);padding:12px 0}
  .contact-gegeven:last-child{border-bottom:none}
}