/*
Theme Name: DeanV Divi 5 Child
Theme URI: https://www.deanv.nl/
Description: Rustige landingspagina voor DeanV IT Services. Vereist het Divi thema.
Author: DeanV IT Services
Template: Divi
Version: 1.0.0
Text Domain: deanv-divi5-child
*/

:root {
  --deanv-green: #01cc34;
  --deanv-grey: #666666;
  --deanv-black: #000000;
  --deanv-mist: #f4f8f4;
  --deanv-line: #dfe7e1;
}

body { color: var(--deanv-black); }
.deanv-page { overflow: hidden; background: #fff; }
.deanv-wrap { width: min(1120px, calc(100% - 48px)); margin: 0 auto; }
.deanv-kicker { margin: 0 0 16px; color: var(--deanv-green); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.deanv-h1, .deanv-h2, .deanv-h3 { color: var(--deanv-black); font-family: inherit; line-height: 1.12; }
.deanv-h1 { margin: 0; max-width: 690px; font-size: clamp(39px, 5.5vw, 68px); letter-spacing: -.045em; }
.deanv-h2 { margin: 0; max-width: 650px; font-size: clamp(30px, 4vw, 48px); letter-spacing: -.035em; }
.deanv-h3 { margin: 0 0 12px; font-size: 22px; }
.deanv-copy { color: var(--deanv-grey); font-size: 18px; line-height: 1.7; }
.deanv-copy--hero { max-width: 590px; margin: 26px 0 34px; }
.deanv-button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px; border: 1px solid var(--deanv-green); border-radius: 4px; background: var(--deanv-green); color: #fff !important; font-weight: 800; text-decoration: none !important; transition: .2s ease; }
.deanv-button:hover { transform: translateY(-2px); background: #00b72e; }
.deanv-button--line { background: transparent; color: var(--deanv-black) !important; }
.deanv-hero { position: relative; padding: 74px 0 94px; background: linear-gradient(105deg, #fff 0%, #fff 52%, var(--deanv-mist) 52%); }
.deanv-nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 80px; }
.deanv-logo { display: block; width: 125px; height: auto; }
.deanv-nav__link { color: var(--deanv-black); font-weight: 700; text-decoration: none; }
.deanv-hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); gap: 64px; align-items: center; }
.deanv-art { min-height: 420px; position: relative; overflow: hidden; border-radius: 12px; background: linear-gradient(150deg, #eaf5ed 0%, #fff 54%, #d5eedb 100%); }
.deanv-art:before, .deanv-art:after { position: absolute; content: ''; border-radius: 999px; }
.deanv-art:before { width: 370px; height: 370px; right: -75px; top: -52px; background: radial-gradient(circle at 35% 35%, #6fe588 0, var(--deanv-green) 45%, #00a629 100%); opacity: .94; }
.deanv-art:after { width: 310px; height: 310px; left: -100px; bottom: -125px; border: 52px solid rgba(1, 204, 52, .22); }
.deanv-art__panel { position: absolute; z-index: 2; inset: 98px 54px 62px; padding: 32px; border: 1px solid rgba(255,255,255,.8); border-radius: 10px; background: rgba(255,255,255,.78); box-shadow: 0 20px 50px rgba(25, 63, 35, .11); backdrop-filter: blur(10px); }
.deanv-art__line { display: block; height: 9px; margin-bottom: 14px; border-radius: 20px; background: #d9e5dc; }
.deanv-art__line--green { width: 55%; background: var(--deanv-green); }
.deanv-art__line--short { width: 72%; }
.deanv-art__checks { display: grid; gap: 12px; margin-top: 32px; color: #385041; font-size: 14px; font-weight: 700; }
.deanv-art__checks span:before { content: '✓'; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 9px; border-radius: 50%; background: var(--deanv-green); color: #fff; font-size: 12px; }
.deanv-section { padding: 102px 0; }
.deanv-section--soft { background: var(--deanv-mist); }
.deanv-intro { display: grid; grid-template-columns: .85fr 1.15fr; gap: 60px; align-items: end; }
.deanv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 46px; }
.deanv-card { padding: 32px 28px; border: 1px solid var(--deanv-line); border-radius: 9px; background: #fff; }
.deanv-card__number { display: block; margin-bottom: 28px; color: var(--deanv-green); font-size: 13px; font-weight: 800; letter-spacing: .08em; }
.deanv-card p { margin: 0; color: var(--deanv-grey); line-height: 1.65; }
.deanv-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin-top: 48px; }
.deanv-step { padding-top: 22px; border-top: 2px solid var(--deanv-green); }
.deanv-step strong { display: block; margin-bottom: 9px; font-size: 16px; }
.deanv-step span { color: var(--deanv-grey); font-size: 14px; line-height: 1.5; }
.deanv-cta { padding: 78px 0; background: var(--deanv-black); color: #fff; }
.deanv-cta .deanv-h2 { color: #fff; }
.deanv-cta__inside { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.deanv-cta p { max-width: 590px; margin: 18px 0 0; color: #d6d6d6; font-size: 17px; line-height: 1.65; }
.deanv-footer { padding: 30px 0; background: #fff; color: var(--deanv-grey); font-size: 14px; }
.deanv-footer__inside { display: flex; justify-content: space-between; gap: 18px; }
@media (max-width: 800px) { .deanv-hero { padding-top: 34px; background: #fff; } .deanv-nav { margin-bottom: 52px; } .deanv-hero-grid, .deanv-intro { grid-template-columns: 1fr; gap: 34px; } .deanv-art { min-height: 320px; } .deanv-art__panel { inset: 54px 28px 38px; } .deanv-grid { grid-template-columns: 1fr; } .deanv-steps { grid-template-columns: 1fr 1fr; } .deanv-cta__inside, .deanv-footer__inside { display: block; } .deanv-cta .deanv-button { margin-top: 28px; } }