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

/* Drivespex — component styles. Waarden komen uit tokens.css (var(--…)). */
.dx, .dx * { box-sizing: border-box; }
.dx { font-family: var(--font-body, "Open Sans", sans-serif); color: var(--text); -webkit-font-smoothing: antialiased; }
.dx-caps { text-transform: uppercase; }

/* ---------- Typografie ---------- */
.dx-h { font-family: var(--font-display, "Montserrat", sans-serif); text-transform: uppercase; margin: 0; color: var(--text); }
.dx-h--display-xl { font-size: 72px; line-height: 1; font-weight: 800; letter-spacing: -0.01em; }
.dx-h--display { font-size: 48px; line-height: 1.05; font-weight: 800; }
.dx-h--heading { font-size: 30px; line-height: 1.15; font-weight: 600; letter-spacing: .02em; }
.dx-h--subheading { font-size: 20px; line-height: 1.25; font-weight: 600; letter-spacing: .04em; }
.dx-accent { color: var(--accent-text); }
.dx-on-dark .dx-accent, .dx-canvas .dx-accent { color: var(--yellow); }
.dx-tagline { font-family: var(--font-display, "Montserrat", sans-serif); font-weight: 500; font-size: 14px; letter-spacing: .16em; text-transform: uppercase; }
.dx-url { font-family: var(--font-display, "Montserrat", sans-serif); font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.dx-caption { font-size: 12px; line-height: 16px; color: var(--text-muted); }

/* ---------- Logo ---------- */
.dx-logo { display: block; height: auto; }

/* ---------- Button ---------- */
.dx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-display, "Montserrat", sans-serif); font-weight: 700; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; line-height: 1; padding: 13px 20px; border-radius: var(--radius-sm); border: 2px solid transparent; cursor: pointer; text-decoration: none; transition: background-color .15s, color .15s, border-color .15s; }
.dx-btn--lg { font-size: 16px; padding: 17px 28px; }
.dx-btn--primary { background: var(--accent); color: var(--on-accent); }
.dx-btn--primary:hover { background: var(--yellow-deep); }
.dx-btn--secondary { background: transparent; color: var(--text); border-color: var(--border-control); }
.dx-btn--secondary:hover { border-color: var(--accent); }
.dx-btn--ghost { background: transparent; color: var(--accent-text); padding-left: 0; padding-right: 0; }
.dx-btn--ghost:hover { text-decoration: underline; text-underline-offset: 4px; }
.dx-btn:focus-visible, .dx-field input:focus-visible, .dx-field select:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.dx-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- Badge ---------- */
.dx-badge { display: inline-block; font-family: var(--font-display, "Montserrat", sans-serif); font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; line-height: 1; padding: 6px 8px; border-radius: var(--radius-sm); }
.dx-badge--yellow { background: var(--accent); color: var(--on-accent); }
.dx-badge--dark { background: var(--night); color: #fff; }

/* ---------- USP ---------- */
.dx-usp-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.dx-usp-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.dx-usp-icon--ring { border-radius: var(--radius-round); border: 2px solid var(--yellow); }
.dx-usp { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.dx-usp--left { flex-direction: row; align-items: flex-start; text-align: left; gap: 12px; }
.dx-usp__title { font-family: var(--font-display, "Montserrat", sans-serif); font-weight: 600; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; line-height: 1.3; }
.dx-usp__text { font-size: 13px; line-height: 20px; color: var(--text-muted); margin-top: 2px; }
.dx-uspbar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.dx-uspbar--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
.dx-uspbar--divided > * + * { border-left: 1px solid var(--border); padding-left: 24px; }
@media (max-width: 620px) { .dx-uspbar { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dx-uspbar--divided > * + * { border-left: 0; padding-left: 0; } }

/* ---------- InfoPanel ---------- */
.dx-panel { background: var(--overlay); color: var(--text-on-dark); padding: 24px; text-align: center; }
.dx-panel__title { font-family: var(--font-display, "Montserrat", sans-serif); font-weight: 600; font-size: 20px; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 16px; }
.dx-panel__body { font-size: 15px; line-height: 23px; }
.dx-panel__body p { margin: 0 0 12px; } .dx-panel__body p:last-child { margin: 0; }

/* ---------- BeforeAfter ---------- */
.dx-ba { position: relative; overflow: hidden; color: #fff; background: var(--night); }
.dx-ba img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dx-ba__labels { position: absolute; left: 0; right: 0; top: 0; display: grid; grid-template-columns: 1fr 1fr; }
.dx-ba__label { padding: 16px; text-align: center; font-family: var(--font-display, "Montserrat", sans-serif); font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; background: linear-gradient(rgba(0,0,0,.65), rgba(0,0,0,0)); }
.dx-ba__label--after { color: var(--yellow); }
.dx-ba__line { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: rgba(255,255,255,.7); transform: translateX(-1px); }

/* ---------- StatCard ---------- */
.dx-stat { display: flex; flex-direction: column; gap: 8px; padding: 24px; background: var(--surface); border-radius: var(--radius-md); }
.dx-stat__value { font-family: var(--font-display, "Montserrat", sans-serif); font-weight: 800; font-size: 56px; line-height: 1; color: var(--accent-text); }
.dx-stat__label { font-size: 16px; line-height: 24px; color: var(--text); }

/* ---------- PriceTag ---------- */
.dx-price { display: flex; flex-direction: column; gap: 4px; }
.dx-price__prefix { font-size: 20px; line-height: 28px; }
.dx-price__amount { font-weight: 700; font-size: 48px; line-height: 52px; }
.dx-price__suffix { font-size: 16px; }

/* ---------- ProductCard ---------- */
.dx-card { display: flex; flex-direction: column; background: #fff; color: var(--ink); border-radius: var(--radius-md); box-shadow: var(--shadow-card); overflow: hidden; border: 1px solid var(--grey-100); }
.dx-card__media { position: relative; aspect-ratio: 4 / 3; background: #fff; }
.dx-card__media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.dx-card__media .dx-badge { position: absolute; top: 12px; left: 12px; }
.dx-card__body { display: flex; flex-direction: column; gap: 4px; padding: 16px; flex: 1; }
.dx-card__name { font-weight: 700; font-size: 15px; line-height: 22px; }
.dx-card__sub { font-size: 13px; line-height: 20px; color: var(--grey-700); }
.dx-card__price { font-weight: 700; font-size: 18px; margin-top: 8px; }
.dx-card__cta { margin-top: 12px; width: 100%; }

/* ---------- Field ---------- */
.dx-field { display: flex; flex-direction: column; gap: 6px; }
.dx-field label { font-size: 13px; font-weight: 600; color: var(--text); }
.dx-field input, .dx-field select { font: inherit; font-size: 15px; min-height: 44px; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border-control); background: var(--bg); color: var(--text); }
.dx-field__hint { font-size: 12px; color: var(--text-muted); }
.dx-field__error { font-size: 13px; color: var(--error-text); background: var(--error-bg); padding: 8px 10px; border-radius: var(--radius-sm); }
.dx-field--invalid input { border-color: var(--error-text); }

/* ---------- Steps ---------- */
.dx-steps { display: flex; gap: 8px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; counter-reset: dxs; }
.dx-steps li { counter-increment: dxs; display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: var(--radius-sm); background: var(--navy-600); color: #fff; font-size: 13px; font-weight: 600; }
.dx-steps li::before { content: counter(dxs); display: inline-flex; width: 20px; height: 20px; border-radius: 50%; align-items: center; justify-content: center; font-size: 11px; background: rgba(255,255,255,.18); }
.dx-steps li.is-active { background: var(--accent); color: var(--on-accent); }
.dx-steps li.is-active::before { background: var(--ink); color: var(--yellow); }
.dx-steps li.is-done::before { content: "✓"; }

/* ---------- Canvas (vaste formaten: social, print, slides) ---------- */
.dx-canvas-wrap { position: relative; overflow: hidden; }
.dx-canvas { position: absolute; top: 0; left: 0; transform-origin: 0 0; overflow: hidden; background: var(--night); color: #fff; font-family: var(--font-body, "Open Sans", sans-serif); }
.dx-canvas .dx-h { color: #fff; }
.dx-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.dx-fade-bottom { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(rgba(0,0,0,0), #000 78%); }
.dx-fade-top { position: absolute; left: 0; right: 0; top: 0; background: linear-gradient(#000 0%, rgba(0,0,0,0)); }
.dx-abs { position: absolute; }
.dx-band { background: var(--navy-900); color: #fff; }
.dx-center { text-align: center; }
.dx-glow { border: 2px solid var(--yellow); border-radius: var(--radius-md); box-shadow: var(--glow-yellow); }
.dx-num { display: inline-flex; width: 1.5em; height: 1.5em; border-radius: 50%; align-items: center; justify-content: center; background: var(--yellow); color: var(--ink); font-weight: 800; }
.dx-rule { height: 4px; background: var(--yellow); border: 0; margin: 0; }