/* ══════════════════════════════════════════════════ Onesurance Design System — Merged Stylesheet Source of truth: inline CSS from pages/index.html AI Visual Upgrade additions appended at the end ══════════════════════════════════════════════════ */ /* Fonts loaded via in HTML for better performance */ /* ── Reset ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } /* ── Design Tokens ── */ :root { --navy: #111A51; --blue: #105EFA; --blue-on-dark: #7EB3FF; --blue2: #0D4ED4; --blue-hover:#0D4ED4; --teal: #00B1AE; --teal2: #33C1BE; --teal-pale: #CCEFEF; --white: #FFFFFF; --grey: #F1F1F1; --black: #000000; --muted: #6B7280; --soft: #6B7280; --border: rgba(17,26,81,0.09); --accent-bg: rgba(16,94,250,0.05); /* Sub-colors */ --green: #00AA76; --yellow: #F5BD4C; --amber: #F5BD4C; --red: #ED1C24; /* Spacing */ --max-w: 1180px; --px: 48px; } /* ── Typography ── */ body { font-family: 'Outfit', sans-serif; font-weight: 400; color: var(--black); background: var(--white); -webkit-font-smoothing: antialiased; line-height: 1.6; } h1, h2, h3, h4, h5, h6 { font-family: 'Urbanist', sans-serif; font-weight: 700; } /* ══════════════════════════════════════════════════ NAV ══════════════════════════════════════════════════ */ .nav { position: sticky; top: 0; z-index: 9999; height: 72px; padding: 0 var(--px); display: flex; align-items: center; background: rgba(255,255,255,0.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); } .nav--dark { background: var(--navy); border-bottom: none; box-shadow: 0 2px 16px rgba(17,26,81,0.15); } .nav-inner { max-width: var(--max-w); width: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; } .logo { display: flex; align-items: center; text-decoration: none; } .logo img { background: transparent !important; height: 40px !important; width: auto; } .logo-mark { width: 28px; height: 28px; background: var(--blue); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .logo-mark::after { content: ''; width: 9px; height: 9px; background: white; border-radius: 50%; } .nav--dark .logo { color: var(--white); } .nav-menu { display: flex; align-items: center; gap: 28px; } .nav-menu a { text-decoration: none; font-size: 14px; font-weight: 500; color: var(--muted); opacity: 1; transition: color .15s; } .nav-menu a:hover { color: var(--navy); } .nav--dark .nav-menu a { color: var(--white); opacity: 0.7; } .nav--dark .nav-menu a:hover { opacity: 1; } /* ── Hamburger ── */ .nav-right { display: flex; align-items: center; gap: 12px; } .hamburger { display: none; background: none; border: none; cursor: pointer; padding: 8px; } .hamburger span { display: block; width: 22px; height: 2.5px; background: var(--navy); border-radius: 2px; margin: 4.5px 0; transition: transform .2s, opacity .2s; } .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger.open span:nth-child(2) { opacity: 0; } .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .nav--dark .hamburger span { background: #fff; } @media (max-width: 1024px) { .hamburger { display: flex; flex-direction: column; align-items: center; justify-content: center; } } /* ── Buttons ── */ .btn-nav { background: var(--blue); color: var(--white) !important; opacity: 1 !important; padding: 9px 20px; border-radius: 999px; font-size: 14px; font-weight: 600; transition: background .15s !important; border: none; cursor: pointer; } .btn-nav:hover { background: var(--blue) !important; } .btn-primary { display: inline-flex; align-items: center; gap: 7px; background: var(--blue); color: var(--white); padding: 13px 28px; border-radius: 999px; font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 600; text-decoration: none; border: none; cursor: pointer; transition: background .15s; } .btn-primary:hover { background: var(--blue-hover); } .btn-ghost { display: inline-flex; align-items: center; gap: 7px; background: transparent; color: var(--navy); padding: 13px 28px; border-radius: 999px; font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 400; text-decoration: none; border: 1px solid var(--border); cursor: pointer; transition: background .15s; } .btn-ghost:hover { background: var(--grey); } .btn-ghost--dark { color: var(--white); border-color: rgba(255,255,255,0.2); } .btn-ghost--dark:hover { background: rgba(255,255,255,0.1); } .btn-submit { background: var(--blue); color: var(--white); border: none; padding: 14px 28px; border-radius: 999px; font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 700; cursor: pointer; transition: background .15s; display: flex; align-items: center; gap: 8px; width: fit-content; } .btn-submit:hover { background: var(--blue-hover); } .btn-text { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; color: var(--blue); font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer; transition: opacity .15s; } .btn-text:hover { opacity: 0.8; } .btn-blue { display: inline-flex; align-items: center; gap: 7px; background: var(--blue); color: var(--white); padding: 13px 24px; border-radius: 999px; font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 600; text-decoration: none; transition: background .15s; } .btn-blue:hover { background: var(--blue-hover); } .btn-teal { display: inline-flex; align-items: center; gap: 7px; background: var(--blue); color: white; padding: 13px 24px; border-radius: 999px; font-size: 14px; font-weight: 600; text-decoration: none; transition: background .15s; } .btn-teal:hover { background: var(--blue); } .btn-ghost-white { display: inline-flex; align-items: center; background: transparent; color: var(--navy); padding: 13px 24px; border-radius: 999px; font-size: 14px; font-weight: 400; text-decoration: none; border: 1px solid var(--border); transition: background .15s; } .btn-ghost-white:hover { background: var(--grey); } .btn-solid { display:block;text-align:center;text-decoration:none;background:var(--blue);color:white;padding:14px 24px;border-radius:999px;font-size:14px;font-weight:700;transition:background .15s;white-space:nowrap; } .btn-solid:hover { background:var(--blue); } .btn-outline { display:block;text-align:center;text-decoration:none;padding:13px 24px;border-radius:999px;font-size:14px;font-weight:600;border:1.5px solid var(--border);color:var(--navy);transition:border-color .15s; } .btn-outline:hover { border-color:var(--navy); } .btn-teal-solid { display:block;text-align:center;text-decoration:none;background:var(--blue);color:white;padding:14px 24px;border-radius:999px;font-size:14px;font-weight:700;transition:background .15s; } .btn-teal-solid:hover { background:var(--blue); } .btn-demo { display: inline-flex; align-items: center; gap: 7px; background: var(--blue); color: var(--white); padding: 12px 22px; border-radius: 999px; font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 600; text-decoration: none; transition: background .15s; } .btn-demo:hover { background: var(--blue-hover); } .btn-cta { display: inline-flex; align-items: center; gap: 7px; background: var(--blue); color: var(--white); padding: 13px 24px; border-radius: 999px; font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 600; text-decoration: none; transition: background .15s; } .btn-cta:hover { background: var(--blue-hover); } /* ══════════════════════════════════════════════════ HERO ══════════════════════════════════════════════════ */ .hero { padding: 48px 48px 40px; position: relative; overflow: hidden; border-bottom: 1px solid var(--border); background: #ffffff; } .hero:not(.hero--ai) { background: #ffffff; } .hero:not(.hero--ai)::before { content: ''; position: absolute; right: -5%; top: -20%; width: 65%; height: 140%; background: radial-gradient(ellipse at 80% 40%, rgba(16,94,250,.06) 0%, transparent 60%); pointer-events: none; } .hero::after { display: none; } .hero-inner { max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 72px; align-items: center; position: relative; z-index: 1; } .hero--split .hero-inner { grid-template-columns: 1fr 1fr; gap: 64px; } .hero--white { background: var(--white); border-bottom: 1px solid var(--border); } .hero--dark { background: var(--navy); color: var(--white); } .hero-pill { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(16,94,250,0.2); background: var(--blue-soft); padding: 5px 14px 5px 7px; border-radius: 100px; margin-bottom: 16px; } .hero-pill-dot { width: 20px; height: 20px; background: var(--blue); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .hero-pill-dot::after { content: ''; width: 7px; height: 7px; background: white; border-radius: 50%; } .hero-pill span { font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--blue); } .hero h1 { font-size: clamp(38px, 4.5vw, 62px); font-weight: 700; letter-spacing: -1.5px; line-height: 1.06; color: var(--navy); margin-bottom: 16px; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } .hero h1 .c { color: var(--blue); } .hero--dark h1 { color: var(--white); } .hero-sub { font-size: 17px; font-weight: 500; line-height: 1.6; color: var(--navy); margin-bottom: 0; max-width: 460px; } .hero--dark .hero-sub { color: rgba(255,255,255,0.6); } .hero-bullets { list-style: none; padding: 0; margin: 16px 0 28px; display: flex; flex-direction: column; gap: 0; border-left: 2px solid var(--blue); padding-left: 16px; } .hero-bullets li { font-size: 14px; color: var(--muted); line-height: 1.5; padding: 5px 0; } .hero-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 32px; } /* KPI strip hero */ .hero-kpis { display: grid; grid-template-columns: repeat(3,1fr); gap: 3px; } .hk { padding: 20px 18px; background: #ffffff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 1px 4px rgba(17,26,81,.05); } .hk-val { font-size: 28px; font-weight: 700; color: var(--navy); letter-spacing: -1.2px; line-height: 1; margin-bottom: 6px; } .hk-val .a { color: var(--blue); } .hk-lbl { font-size: 11.5px; color: var(--muted); line-height: 1.5; } /* Campagne metrics card (marketing hero) */ .metrics-card { background: #ffffff; border: 1.5px solid rgba(16,94,250,.25); border-radius: 20px; padding: 28px; box-shadow: 0 2px 12px rgba(17,26,81,.07); } .metrics-title { font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 20px; } .metrics-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; } .mk { padding: 14px 16px; background: var(--grey); border-radius: 10px; } .mk-val { font-size: 26px; font-weight: 700; color: var(--navy); letter-spacing: -1px; line-height: 1; margin-bottom: 4px; } .mk-val .a { color: var(--blue); } .mk-lbl { font-size: 11.5px; color: var(--muted); line-height: 1.4; } .metrics-bar { display: flex; flex-direction: column; gap: 10px; } .mb-title { font-size: 12px; font-weight: 600; color: var(--navy); margin-bottom: 4px; } .mb-row { display: flex; align-items: center; gap: 10px; } .mb-label { font-size: 12px; color: var(--muted); width: 100px; flex-shrink: 0; } .mb-track { flex: 1; height: 7px; background: var(--grey); border-radius: 99px; overflow: hidden; } .mb-fill { height: 100%; background: var(--blue); border-radius: 99px; transition: width .6s ease; } .mb-fill.teal { background: var(--blue); } .mb-fill.amber { background: var(--yellow); } .mb-pct { font-size: 12px; font-weight: 600; color: var(--navy); width: 36px; text-align: right; } @media (max-width: 600px) { .metrics-kpis { grid-template-columns: 1fr; } .mb-label { width: 80px; } } /* Hero right — platform visual */ /* ── Day Card (adviseur hero timeline) ── */ .day-card { background: #ffffff; border: 1.5px solid rgba(16,94,250,.25); border-radius: 20px; padding: 24px; box-shadow: 0 8px 40px rgba(16,94,250,.10); } .day-card-title { font-size: 13px; font-weight: 700; letter-spacing: -.2px; color: var(--navy); margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--border); } .day-items { display: flex; flex-direction: column; gap: 0; position: relative; } .day-items::before { content: ''; position: absolute; left: 23px; top: 8px; bottom: 8px; width: 1px; background: var(--border); } .day-item { display: flex; align-items: flex-start; gap: 16px; padding: 12px 0; position: relative; } .day-item:first-child { padding-top: 0; } .day-item:last-child { padding-bottom: 0; } .day-item + .day-item { border-top: 1px solid var(--border); } .day-time { font-size: 13px; font-weight: 700; color: var(--blue); min-width: 46px; padding-top: 1px; position: relative; z-index: 1; background: #fff; } .day-content { display: flex; flex-direction: column; gap: 3px; flex: 1; } .day-content strong { font-size: 13px; font-weight: 600; color: var(--navy); line-height: 1.3; } .day-content span { font-size: 12px; color: var(--muted); line-height: 1.5; font-weight: 300; } .day-tag { display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: .04em; color: var(--blue); background: var(--blue-soft); padding: 2px 8px; border-radius: 999px; margin-top: 4px; width: fit-content; } .hero-visual-img { width: 100%; max-width: 680px; height: auto; display: block; } .hero-visual-canvas { width: 100%; max-width: 680px; height: 480px; display: block; } .hero-bg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } .platform-card { background: #ffffff; border: 1.5px solid rgba(16,94,250,.25); border-radius: 20px; padding: 18px; position: relative; overflow: visible; box-shadow: 0 8px 40px rgba(16,94,250,.10); } .platform-card::before { display: none; } .pc-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border); } .pc-header-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 6px rgba(16,94,250,.4); flex-shrink: 0; } .pc-title { font-size: 13px; font-weight: 700; color: var(--navy); letter-spacing: -.2px; margin-bottom: 0; } .pc-subtitle { font-size: 11px; color: var(--muted); font-weight: 500; margin-left: auto; text-transform: uppercase; letter-spacing: .08em; } .pc-module-new { display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; background: var(--grey); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 4px; transition: background .15s; } .pc-module-new:hover { background: var(--blue-soft); } .pc-module-new:last-of-type { margin-bottom: 0; } .pc-mod-left { display: flex; align-items: center; gap: 12px; } .pc-mod-icon-wrap { width: 26px; height: 26px; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .pc-mod-icon-wrap.blue { background: var(--blue-soft); color: var(--blue); } .pc-mod-icon-wrap.muted { background: var(--grey); color: var(--muted); } .pc-mod-icon-wrap.amber { background: #FEF3C7; color: #D97706; } .pc-mod-title { font-size: 13px; font-weight: 400; color: var(--navy); line-height: 1.2; } .pc-mod-sub { font-size: 11px; color: var(--muted); margin-top: 1px; } .pc-badge { font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; } .pc-badge.live { background: var(--blue-soft); color: var(--blue); } .pc-badge.soon { background: var(--grey); color: var(--muted); } .pc-badge.ai { background: #FEF3C7; color: #D97706; } .pc-footer-new { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 12px; background: var(--blue-soft); border: 1px solid rgba(16,94,250,.2); border-radius: 10px; color: var(--blue); } .pc-footer-new span { font-size: 11.5px; font-weight: 500; color: var(--blue); } .pc-footer-new svg { flex-shrink: 0; } /* Legacy platform card classes */ .pc-module { display: flex; align-items: center; gap: 12px; padding: 11px 14px; background: #ffffff; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 6px; position: relative; } .pc-module:last-child { margin-bottom: 0; } .pc-mod-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .d-blue { background: var(--blue); } .d-teal { background: var(--blue); } .d-navy2 { background: var(--muted); } .d-green { background: var(--blue); } .d-amber { background: #F59E0B; } .d-grey { background: var(--muted); } .pc-mod-name { font-size: 13px; font-weight: 600; color: var(--navy); flex: 1; } .pc-mod-tag { font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 20px; } .tag-blue { background: rgba(16,94,250,.1); color: var(--blue); } .tag-teal { background: rgba(16,94,250,.08); color: var(--blue); } .tag-green { background: rgba(16,94,250,.08); color: var(--blue); } .tag-amber { background: #FEF3C7; color: #92400E; } .tag-grey { background: var(--grey); color: var(--muted); } .pc-footer { margin-top: 16px; padding: 12px 16px; background: var(--blue-soft); border: 1px solid rgba(16,94,250,.15); border-radius: 8px; display: flex; align-items: center; gap: 10px; } .pc-footer span { font-size: 12px; color: var(--blue); font-weight: 500; } /* ── Overline label ── */ .overline { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); margin-bottom: 14px; } /* ── Cards ── */ .card { background: var(--white); border-radius: 14px; border: 1px solid var(--border); padding: 28px; transition: transform .2s, box-shadow .2s; } .card:hover { transform: translateY(-3px); box-shadow: 0 10px 32px rgba(17,26,81,0.08); } .card-icon { width: 40px; height: 40px; background: var(--blue); border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .card-icon svg { width: 20px; height: 20px; color: var(--white); } .card h3 { font-size: 16px; color: var(--black); margin-bottom: 8px; letter-spacing: -0.2px; } .card p { font-size: 14px; color: var(--muted); font-weight: 400; line-height: 1.7; } /* ── Forms ── */ .form-group { display: flex; flex-direction: column; gap: 6px; } .form-group label { font-size: 12px; font-weight: 600; color: var(--navy); letter-spacing: .02em; } .form-group input, .form-group select, .form-group textarea { padding: 12px 16px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; font-family: 'Outfit', sans-serif; color: var(--navy); background: var(--white); outline: none; transition: border-color .15s, box-shadow .15s; -webkit-appearance: none; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(16,94,250,.08); } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--muted); } .form-group textarea { resize: vertical; min-height: 120px; line-height: 1.6; } .form-group select { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; } .form { display: flex; flex-direction: column; gap: 16px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .form-section h2 { font-size: 22px; font-weight: 800; letter-spacing: -.5px; color: var(--navy); margin-bottom: 6px; } .form-section p { font-size: 14px; font-weight: 300; color: var(--muted); margin-bottom: 32px; line-height: 1.7; } .form-note { font-size: 12px; color: var(--muted); margin-top: 8px; line-height: 1.6; } .form-success { display: none; padding: 32px; background: rgba(0,177,174,.06); border: 1px solid rgba(0,177,174,.2); border-radius: 12px; text-align: center; } .form-success .fs-icon { font-size: 36px; margin-bottom: 12px; } .form-success h3 { font-size: 18px; font-weight: 700; color: var(--navy); margin-bottom: 8px; } .form-success p { font-size: 14px; color: var(--muted); font-weight: 300; } .btn-submit { background: var(--blue); color: var(--white); border: none; padding: 14px 28px; border-radius: 8px; font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer; transition: background .15s; display: flex; align-items: center; gap: 8px; width: fit-content; margin-top: 6px; } .btn-submit:hover { background: var(--blue); } /* ── Contact page ── */ .main { padding: 48px 48px 72px; } .main-inner { max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; } .contact-info { display: flex; flex-direction: column; gap: 20px; } .kantoor-card { background: var(--grey); border-radius: 14px; padding: 28px; border: 1px solid var(--border); } .kantoor-label { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); margin-bottom: 14px; display: block; } .kantoor-list { display: flex; flex-direction: column; gap: 20px; } .kantoor { display: flex; gap: 14px; align-items: flex-start; } .kantoor-icon { width: 40px; height: 40px; background: var(--white); border: 1px solid var(--border); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; } .kantoor-body { flex: 1; min-width: 0; } .kantoor-body h4 { font-size: 14px; font-weight: 700; color: var(--navy); margin-bottom: 4px; } .kantoor-body p { font-size: 13px; color: var(--muted); line-height: 1.6; font-weight: 300; } .kantoor-name { display: block; font-size: 11px; font-weight: 600; color: var(--blue); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; margin-bottom: 6px; } .kantoor-photo { width: 84px; height: 84px; border-radius: 10px; object-fit: cover; flex-shrink: 0; border: 1px solid var(--border); } .kantoor-divider { height: 1px; background: var(--border); } .direct-card { background: var(--navy); border-radius: 14px; padding: 28px; position: relative; overflow: hidden; } .direct-card::before { content: ''; position: absolute; right: -30px; top: -30px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(16,94,250,.3) 0%, transparent 70%); } .direct-label { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); margin-bottom: 14px; display: block; position: relative; } .direct-card h3 { font-size: 17px; font-weight: 700; color: var(--white); margin-bottom: 6px; position: relative; letter-spacing: -.3px; } .direct-card p { font-size: 13px; color: rgba(255,255,255,.5); font-weight: 300; line-height: 1.7; position: relative; margin-bottom: 20px; } .direct-links { display: flex; flex-direction: column; gap: 10px; position: relative; } .direct-link { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); border-radius: 8px; text-decoration: none; transition: background .15s; } .direct-link:hover { background: rgba(255,255,255,.1); } .dl-icon { width: 32px; height: 32px; background: rgba(255,255,255,.1); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; } .dl-text span { font-size: 10px; color: rgba(255,255,255,.65); display: block; margin-bottom: 1px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; } .dl-text strong { font-size: 13px; color: var(--white); font-weight: 500; } .demo-card { background: var(--white); border: 1px solid var(--border); border-radius: 14px; padding: 28px; } .demo-card .demo-label { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); margin-bottom: 12px; display: block; } .demo-card h3 { font-size: 16px; font-weight: 700; color: var(--navy); margin-bottom: 8px; letter-spacing: -.2px; } .demo-card p { font-size: 13px; color: var(--muted); font-weight: 300; line-height: 1.7; margin-bottom: 18px; } .btn-demo { display: inline-flex; align-items: center; gap: 7px; background: var(--blue); color: var(--white); padding: 12px 22px; border-radius: 8px; font-size: 13px; font-weight: 600; text-decoration: none; transition: background .15s; } .btn-demo:hover { background: var(--blue); } /* ══════════════════════════════════════════════════ KLANTEN BALK ══════════════════════════════════════════════════ */ .client-logo:hover { opacity: .9; } /* ══════════════════════════════════════════════════ SECTIONS ══════════════════════════════════════════════════ */ .sec { padding: 96px 48px; } .sec-inner { max-width: var(--max-w); margin: 0 auto; } .bg-white { background: var(--white); } .bg-grey { background: var(--off-white); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .bg-navy { background: var(--navy); position: relative; overflow: hidden; background-size: cover; background-position: center; } .bg-navy::before { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 55%; background: radial-gradient(ellipse at 85% 50%, rgba(16,94,250,.18) 0%, transparent 60%); pointer-events: none; } .bg-wave::before { display: none; } .bg-navy .overline { color: var(--blue); } .h2 { font-size: clamp(26px, 3.2vw, 42px); font-weight: 700; letter-spacing: -1.2px; line-height: 1.15; color: var(--navy); margin-bottom: 20px; } .h2 .c { color: var(--blue); } .bg-navy .h2 { color: white; } .bg-navy .h2 .c { color: white; } .body-t { font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--muted); max-width: 560px; } .bg-navy .body-t { color: rgba(255,255,255,.5); } .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; } /* ══════════════════════════════════════════════════ PROBLEEM ══════════════════════════════════════════════════ */ .prob-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; margin-top: 48px; } .prob-card { padding: 28px 26px; background: white; border-radius: 12px; border: 1px solid var(--border); border-top: 3px solid var(--blue); } .prob-card.teal-top { border-top-color: var(--blue); } .prob-icon { margin-bottom: 14px; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; background: var(--blue-soft); color: var(--blue); } .prob-card h3 { font-size: 15px; font-weight: 700; margin-bottom: 8px; letter-spacing: -.2px; } .prob-card p { font-size: 13px; color: var(--muted); line-height: 1.7; font-weight: 300; } .prob-quote { margin-top: 32px; padding: 20px 24px; background: var(--navy); border-radius: 12px; font-size: 15px; font-style: italic; color: rgba(255,255,255,.75); line-height: 1.75; } .prob-quote .attr { margin-top: 12px; font-size: 11px; color: var(--blue); font-style: normal; } /* ══════════════════════════════════════════════════ HOE HET WERKT ══════════════════════════════════════════════════ */ .flow { display: flex; flex-direction: column; gap: 3px; } .flow-item { display: grid; grid-template-columns: 52px 1fr; background: white; border: 1px solid var(--border); border-bottom: none; } .flow-item:first-child { border-radius: 12px 12px 0 0; } .flow-item:last-child { border-radius: 0 0 12px 12px; border-bottom: 1px solid var(--border); } .flow-num { background: var(--navy); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; color: rgba(255,255,255,.5); font-family: 'Urbanist', sans-serif; } .flow-content { padding: 22px 28px; display: flex; align-items: center; gap: 20px; } .flow-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .fi-1 { background: rgba(16,94,250,.08); color: var(--blue); } .fi-2 { background: var(--blue-soft); color: var(--blue); } .fi-3 { background: rgba(0,128,89,.09); color: var(--blue); } .fi-4 { background: rgba(245,189,76,.15); color: #F5BD4C; } .flow-text h3 { font-size: 14px; font-weight: 700; margin-bottom: 4px; letter-spacing: -.2px; } .flow-text p { font-size: 13px; color: var(--muted); font-weight: 300; line-height: 1.6; } .flow-tag { display: inline-block; margin-top: 8px; font-size: 11px; font-weight: 700; color: var(--navy); background: rgba(17,26,81,.08); padding: 5px 12px; border-radius: 6px; letter-spacing: .3px; } .flow-link { display: inline-block; margin-top: 16px; font-size: 13px; font-weight: 600; color: var(--blue) !important; text-decoration: none; transition: opacity .15s; } .flow-link.r { color: #fff !important; } .flow-link:hover { opacity: .7; } .text-center { text-align: center; } .text-left { text-align: left; } /* Flow columns — horizontal card layout for "How it works" on homepages */ .flow-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 48px; } .flow-cols .flow-col { background: white; border: 1px solid var(--border); border-radius: 14px; padding: 32px 28px; display: flex; flex-direction: column; } .flow-cols .flow-num { width: 40px; height: 40px; border-radius: 10px; background: var(--navy); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; color: rgba(255,255,255,.5); font-family: 'Urbanist', sans-serif; margin-bottom: 20px; } .flow-cols h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; letter-spacing: -.2px; color: var(--navy); } .flow-cols p { font-size: 14px; color: var(--muted); font-weight: 300; line-height: 1.7; margin-bottom: 16px; flex: 1; } .flow-cols .flow-tag { display: inline-block; font-size: 11px; font-weight: 700; color: var(--navy); background: rgba(17,26,81,.08); padding: 5px 12px; border-radius: 6px; letter-spacing: .3px; align-self: flex-start; } .bg-navy .flow-cols .flow-col { background: #fff; border-color: transparent; } .bg-navy .flow-cols .flow-num { background: var(--navy); } .bg-navy .flow-cols h3 { color: var(--navy); } .bg-navy .flow-cols p { color: var(--muted); } .bg-navy .flow-cols .flow-tag { background: rgba(17,26,81,.08); color: var(--navy); } @media (max-width: 768px) { .flow-cols { grid-template-columns: 1fr; gap: 16px; } } /* ══════════════════════════════════════════════════ MODULES GRID ══════════════════════════════════════════════════ */ .modules-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 52px; } .mod { background: white; border-radius: 14px; padding: 28px 24px; border: 1px solid var(--border); position: relative; overflow: hidden; transition: transform .2s, box-shadow .2s, border-color .25s; } .mod:hover { transform: translateY(-3px); box-shadow: 0 12px 36px rgba(17,26,81,.08); } .mod::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--blue); } .mod.teal::before { background: var(--blue); } .mod.navy2::before { background: var(--navy); } .mod.green::before { background: #00553B; } .mod.amber::before { background: #BA7517; } .mod-icon { margin-bottom: 14px; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--blue-soft); color: var(--blue); } .mod-tag { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); margin-bottom: 8px; display: block; } .mod.teal .mod-tag { color: var(--blue); } .mod.green .mod-tag { color: #00553B; } .mod.amber .mod-tag { color: #BA7517; } .mod h3 { font-size: 17px; font-weight: 700; letter-spacing: -.3px; margin-bottom: 8px; } .mod p { font-size: 13px; color: var(--muted); line-height: 1.75; font-weight: 300; } .mod-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; } .mod-pill { font-size: 11px; font-weight: 500; color: var(--blue); background: rgba(16,94,250,.07); padding: 3px 10px; border-radius: 20px; } .mod.teal .mod-pill { color: var(--blue); background: rgba(16,94,250,.08); } .mod.green .mod-pill { color: #00553B; background: rgba(0,85,59,.07); } /* ══════════════════════════════════════════════════ RESULTATEN ══════════════════════════════════════════════════ */ .results-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-top: 52px; } .res-card { background: white; border-radius: 12px; padding: 28px 24px; border: 1px solid var(--border); text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; } .res-val { font-size: 38px; font-weight: 700; color: var(--blue); letter-spacing: -2px; line-height: 1; margin-bottom: 6px; } .res-lbl { font-size: 13px; color: var(--muted); font-weight: 300; line-height: 1.5; } .res-src { font-size: 10px; color: var(--muted); margin-top: 4px; font-style: italic; } .quote-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; } .q-card-light { background: var(--grey); border: 1px solid var(--border); border-radius: 10px; padding: 22px 24px; } .q-card-light p { font-size: 14px; font-style: italic; color: var(--navy); line-height: 1.75; } .q-card-light .attr { margin-top: 10px; font-size: 11px; color: var(--muted); font-style: normal; } /* ══════════════════════════════════════════════════ CASE HIGHLIGHT ══════════════════════════════════════════════════ */ .case-badge { display:inline-flex;align-items:center;gap:7px;background:var(--blue-soft);color:var(--navy);border-radius:20px;padding:5px 12px;font-size:11px;font-weight:700;letter-spacing:.04em;margin-bottom:20px; } .case-badge::before { content:'✓';font-size:10px;font-weight:700;color:var(--blue); } blockquote { margin:22px 0;padding:18px 22px;border-left:3px solid var(--blue);border-radius:0 8px 8px 0;background:rgba(16,94,250,0.04);font-size:14px;font-style:italic;color:var(--navy);line-height:1.75; } .case-p { font-size:14px;color:var(--muted);line-height:1.85;font-weight:300; } .quote-stack { display: flex; flex-direction: column; gap: 14px; } .q-card { background:var(--navy);border-radius:14px;padding:24px 26px; } .q-card p { font-size:14px;font-style:italic;color:rgba(255,255,255,.7);line-height:1.75; } .q-card .attr { margin-top:10px;font-size:11px;color:var(--blue);font-style:normal; } .stat-row { display: flex; gap: 12px; margin-top: 14px; } .stat { flex: 1; padding: 16px; background: var(--grey); border-radius: 8px; border: 1px solid var(--border); text-align: center; } .stat .s-val { font-size: 24px; font-weight: 700; color: var(--blue); letter-spacing: -1px; } .stat .s-lbl { font-size: 11px; color: var(--muted); margin-top: 2px; } /* ══════════════════════════════════════════════════ SEGMENTEN ══════════════════════════════════════════════════ */ .seg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; border-radius: 16px; overflow: hidden; margin-top: 52px; } .seg-card { padding: 48px 44px; } .seg-light { background: var(--grey); border: 1px solid var(--border); } .seg-dark { background: var(--navy); } .seg-tag { display: inline-block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 4px 12px; border-radius: 20px; margin-bottom: 14px; } .seg-light .seg-tag { background: var(--blue-soft); color: var(--blue); } .seg-dark .seg-tag { background: rgba(16,94,250,.2); color: rgba(255,255,255,.8); } .seg-sub { font-size: 13px; font-weight: 300; color: var(--muted); margin-bottom: 24px; } .seg-dark .seg-sub { color: rgba(255,255,255,.65); } .seg-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 20px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 16px; } .seg-pill-p { background: rgba(16,94,250,.1); color: var(--blue); } .seg-pill-z { background: rgba(16,94,250,.15); color: var(--blue); } .seg-light h3 { font-size: 22px; font-weight: 700; letter-spacing: -.5px; color: var(--navy); margin-bottom: 6px; } .seg-dark h3 { font-size: 22px; font-weight: 700; letter-spacing: -.5px; color: white; margin-bottom: 6px; } .seg-tagline { font-size: 13px; font-weight: 300; color: var(--muted); margin-bottom: 24px; } .seg-dark .seg-tagline { color: rgba(255,255,255,.65); } .seg-divider { width: 32px; height: 2px; background: var(--blue); margin-bottom: 24px; } .seg-list { list-style: none; display: flex; flex-direction: column; gap: 9px; } .seg-list li { font-size: 14px; display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; } .seg-light .seg-list li { color: var(--navy); } .seg-dark .seg-list li { color: rgba(255,255,255,.65); } .seg-list li::before { content: ''; width: 5px; height: 5px; background: var(--blue); border-radius: 50%; flex-shrink: 0; margin-top: 5px; } .seg-footer { text-align: center; margin-top: 28px; font-size: 15px; color: var(--navy); font-style: italic; } /* ══════════════════════════════════════════════════ ROL KAARTEN ══════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════ EBITDA SECTION ══════════════════════════════════════════════════ */ .ebitda-highlights { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; } .ebitda-hl { display: flex; gap: 14px; align-items: flex-start; padding: 16px 20px; background: rgba(255,255,255,.06); border-radius: 10px; border: 1px solid rgba(255,255,255,.08); } .ebitda-hl-icon { font-size: 18px; flex-shrink: 0; } .ebitda-hl-text { font-size: 14px; color: rgba(255,255,255,.65); line-height: 1.6; } .ebitda-hl-text strong { color: white; font-weight: 700; display: block; margin-bottom: 2px; } .ebitda-result { margin-top: 28px; padding: 24px 28px; background: rgba(16,94,250,.12); border: 1px solid rgba(16,94,250,.25); border-radius: 12px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .er-item { text-align: center; } .er-val { font-size: 32px; font-weight: 700; color: var(--blue); letter-spacing: -1.5px; line-height: 1; } .er-lbl { font-size: 11px; color: rgba(255,255,255,.65); margin-top: 4px; } .er-div { width: 1px; height: 48px; background: rgba(255,255,255,.1); } /* ══════════════════════════════════════════════════ POSITIONERING BAND ══════════════════════════════════════════════════ */ .pos-band { background: var(--navy); padding: 72px 48px; text-align: center; } .pos-band p { font-size: clamp(17px,2.5vw,26px); font-weight: 300; color: rgba(255,255,255,.8); max-width: 860px; margin: 0 auto; line-height: 1.65; letter-spacing: -.3px; } .pos-band strong { color: white; font-weight: 700; } .pos-band .c { color: var(--blue); } /* ══════════════════════════════════════════════════ NIEUWS ══════════════════════════════════════════════════ */ .nieuws-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 40px; } .nieuws-card { background: white; border-radius: 14px; border: 1px solid var(--border); padding: 22px; text-decoration: none; transition: transform .2s, box-shadow .2s; display: block; } .nieuws-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15,23,42,0.06); } .nc-type { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); margin-bottom: 8px; display: block; } .nieuws-card h3, .nieuws-card h4 { font-size: 14px; font-weight: 700; color: var(--navy); line-height: 1.5; letter-spacing: -.2px; } .nc-date { font-size: 11px; color: var(--muted); margin-top: 10px; display: block; } /* ══════════════════════════════════════════════════ KLANTEN LOGOS DETAIL ══════════════════════════════════════════════════ */ .landen-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 10px; margin-top: 32px; } .land { background: white; border: 1px solid var(--border); border-radius: 10px; padding: 16px 10px; text-align: center; transition: border-color .15s, transform .15s; } .land:hover { border-color: var(--blue); transform: translateY(-2px); } .land-flag { font-size: 26px; margin-bottom: 6px; } .land-name { font-size: 11px; font-weight: 600; color: var(--navy); } /* ══════════════════════════════════════════════════ SHIFT TABLE ══════════════════════════════════════════════════ */ .shift-wrap { margin-top: 52px; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); } .shift-grid { display: grid; grid-template-columns: 1fr 52px 1fr; } .sh-h { padding: 13px 28px; font-size: 10px; font-weight: 700; letter-spacing:.1em; text-transform:uppercase; } .sh-l { background: var(--grey); color: var(--muted); } .sh-m { background: white; border-left:1px solid var(--border); border-right:1px solid var(--border); } .sh-r { background: var(--navy); color: rgba(255,255,255,.4); } .sc { padding: 16px 28px; font-size: 14px; display:flex; align-items:center; border-top:1px solid var(--border); } .sc-l { background: var(--grey); color: var(--muted); text-decoration:line-through; text-decoration-color:rgba(107,114,128,.3); } .sc-m { background: white; justify-content:center; border-left:1px solid var(--border); border-right:1px solid var(--border); border-top:1px solid var(--border); } .sc-r { background: var(--navy); color:white; font-weight:500; border-top:1px solid rgba(255,255,255,.06); } .arr-btn { width:26px;height:26px;background:var(--blue);border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-size:11px;font-weight:700; } /* ══════════════════════════════════════════════════ CTA ══════════════════════════════════════════════════ */ .cta-grid { display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:52px; } .cta-card { border-radius:14px;padding:44px;display:flex;flex-direction:column; } .cta-dark { background:var(--navy); } .cta-light { background:white;border:1px solid var(--border); } .cta-ol { font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px;display:block; } .cta-dark .cta-ol { color:var(--blue); } .cta-light .cta-ol { color:var(--blue); } .cta-card h3 { font-size:22px;font-weight:700;letter-spacing:-.5px;line-height:1.2;margin-bottom:14px; } .cta-dark h3 { color:white; } .cta-light h3 { color:var(--navy); } .cta-bd { font-size:14px;line-height:1.8;margin-bottom:20px;font-weight:300; } .cta-dark .cta-bd { color:rgba(255,255,255,.45); } .cta-light .cta-bd { color:var(--muted); } .spacer { flex:1; } .cta-foot { text-align:center;margin-top:24px;font-size:13px;color:var(--muted);font-style:italic; } /* ══════════════════════════════════════════════════ HUBS ══════════════════════════════════════════════════ */ .hubs-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-top: 40px; } .hub { background: white; border: 1px solid var(--border); border-radius: 14px; padding: 28px 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; transition: transform .2s, box-shadow .2s; } .hub:hover { transform: translateY(-3px); box-shadow: 0 10px 32px rgba(17,26,81,.08); } .hub-dark { background: white; border-color: var(--border); } .hub-logo-wrap { height: 52px; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 8px; padding: 6px 12px; } .hub-logo { max-height: 40px; max-width: 160px; object-fit: contain; } .hub-name { font-size: 14px; font-weight: 700; color: var(--navy); } .hub-city { font-size: 11px; color: var(--navy); font-weight: 600; opacity: 0.7; } .hub-desc { font-size: 11px; color: var(--muted); line-height: 1.5; } /* ══════════════════════════════════════════════════ WAVE BACKGROUND ══════════════════════════════════════════════════ */ .wave-host { position: relative; overflow: hidden; } .wave-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .wave-bg svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120%; height: auto; min-height: 100%; } .wave-bg img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120%; height: auto; min-height: 100%; opacity: 0.3; } .wave-host > .sec-inner, .wave-host > * { position: relative; z-index: 1; } .wave-bg.wave-bg-bottom { position: absolute; z-index: 0; } .wave-bg.wave-bg-bottom img { top: auto; bottom: 0; transform: translateX(-50%); width: 100%; opacity: 1; } /* ══════════════════════════════════════════════════ ROLE CARDS ══════════════════════════════════════════════════ */ .role-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; margin-top: 48px; } .role-card { background: white; border-radius: 20px; padding: 36px 32px; border: 1px solid var(--border); text-decoration: none; display: flex; flex-direction: column; gap: 10px; transition: transform .2s, box-shadow .2s; } .role-card:hover { transform: translateY(-5px); box-shadow: 0 20px 48px rgba(17,26,81,.11); } .role-icon { width: 48px; height: 48px; background: rgba(16,94,250,0.08); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; color: var(--blue); } .role-label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); margin-bottom: 8px; display: block; } .role-card h3 { font-size: 20px; font-weight: 700; color: var(--navy); letter-spacing: -.4px; margin-bottom: 12px; } .role-card p { font-size: 14px; color: var(--muted); line-height: 1.75; font-weight: 300; flex: 1; } .role-cta { display: inline-block; margin-top: 24px; font-size: 14px; font-weight: 600; color: var(--blue); } /* ══════════════════════════════════════════════════ LOGO CAROUSEL ══════════════════════════════════════════════════ */ .logo-carousel-wrap { background: #ffffff; border-bottom: 1px solid rgba(17,26,81,0.09); overflow: hidden; padding: 20px 0; position: relative; } .logo-carousel-wrap::before, .logo-carousel-wrap::after { content: ''; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none; } .logo-carousel-wrap::before { left: 0; background: linear-gradient(to right, #ffffff, transparent); } .logo-carousel-wrap::after { right: 0; background: linear-gradient(to left, #ffffff, transparent); } .logo-carousel-track { display: flex; align-items: center; gap: 80px; width: max-content; animation: logoScroll 48s linear infinite; } .logo-carousel-track:hover { animation-play-state: paused; } .carousel-logo { height: 120px; width: auto; max-width: 360px; object-fit: contain; filter: grayscale(100%) opacity(0.65); transition: filter 0.2s; flex-shrink: 0; } .carousel-logo--lg { height: 160px; max-width: 440px; } .carousel-logo:hover { filter: grayscale(0%) opacity(1); } @keyframes logoScroll { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } } /* ══════════════════════════════════════════════════ PERSONA BLOKKEN ══════════════════════════════════════════════════ */ .persona-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; margin-top: 48px; align-items: stretch; } .persona-card { background: #ffffff; border: 1px solid var(--border); border-radius: 16px; padding: 32px 28px; text-decoration: none; display: flex; flex-direction: column; gap: 10px; transition: transform .2s, box-shadow .2s, border-color .2s; position: relative; overflow: hidden; } .persona-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--blue); opacity: 0; transition: opacity .2s; } .persona-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(15,23,42,0.08); border-color: var(--blue-border); } .persona-card:hover::before { opacity: 0; } .persona-icon { width: 44px; height: 44px; background: var(--blue-soft); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--blue); margin-bottom: 6px; flex-shrink: 0; } .persona-label { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); } .persona-title { font-size: 18px; font-weight: 700; color: var(--navy); letter-spacing: -.3px; line-height: 1.2; } .persona-desc { font-size: 13.5px; color: var(--muted); line-height: 1.7; flex: 1; } .persona-cta { font-size: 13px; font-weight: 600; color: var(--blue); margin-top: auto; padding-top: 16px; align-self: flex-start; } /* ══════════════════════════════════════════════════ NAV DROPDOWN ══════════════════════════════════════════════════ */ .nav-dropdown { position: relative; } .nav-dropdown-trigger { display: flex; align-items: center; text-decoration: none; font-size: 14px; font-weight: 500; color: var(--muted); opacity: 1; transition: color .15s; cursor: pointer; background: none; border: none; padding: 0; } .nav-dropdown-trigger:hover { color: var(--navy); } .nav-dropdown:hover .nav-dropdown-trigger { color: var(--navy); } .nav-dropdown-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: #ffffff; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 8px 40px rgba(17,26,81,.14); padding: 16px 8px 8px 8px; min-width: 280px; opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(-8px); transition: opacity .18s, transform .18s, visibility .18s; z-index: 10000; } .nav-dropdown:hover .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .nav-dropdown-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; text-decoration: none; transition: background .12s; } .nav-dropdown-item:hover { background: var(--blue-soft); } .nav-dd-icon { width: 34px; height: 34px; background: var(--blue-soft); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--blue); flex-shrink: 0; } .nav-dropdown-item:hover .nav-dd-icon { background: rgba(16,94,250,.15); } .nav-dd-label { font-size: 13px; font-weight: 600; color: var(--navy); line-height: 1.3; } .nav-dd-desc { font-size: 11.5px; color: var(--muted); margin-top: 1px; } /* ══════════════════════════════════════════════════ LANGUAGE SWITCHER ══════════════════════════════════════════════════ */ .nav-lang { position: relative; } .nav-lang-trigger { display: flex; align-items: center; gap: 5px; background: var(--grey); border: 1px solid var(--border); border-radius: 7px; padding: 6px 10px; cursor: pointer; color: var(--navy); font-size: 13px; font-weight: 600; font-family: inherit; transition: background .15s; } .nav-lang-trigger:hover { background: var(--off-white); } .nav-lang-flag { font-size: 16px; line-height: 1; } .nav-lang-code { font-size: 12px; font-weight: 700; letter-spacing: .04em; } .nav-lang-menu { position: absolute; top: calc(100% + 10px); right: 0; background: #ffffff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 32px rgba(17,26,81,.14); padding: 6px; min-width: 160px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .15s, transform .15s, visibility .15s; z-index: 10000; } .nav-lang-menu.open { opacity: 1; visibility: visible; transform: translateY(0); } .nav-lang-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 7px; text-decoration: none; font-size: 13px; font-weight: 500; color: var(--navy); transition: background .12s; } .nav-lang-item:hover { background: var(--blue-soft); } .nav-lang-item.active { background: var(--blue-soft); color: var(--blue); font-weight: 600; } .nav-lang-item span { font-size: 18px; } /* ══════════════════════════════════════════════════ ROTATING HERO ══════════════════════════════════════════════════ */ .hero-rotating-h1 { position: relative; min-height: clamp(220px, 24vw, 290px); margin-bottom: -16px; } .hero-slide { display: block; position: absolute; top: 0; left: 0; font-size: clamp(38px, 4.5vw, 62px); font-weight: 700; letter-spacing: -1.5px; line-height: 1.06; color: var(--navy); margin-bottom: 22px; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; opacity: 0; transform: translateY(12px); transition: opacity 0.8s ease, transform 0.8s ease; pointer-events: none; } .hero-slide--active { opacity: 1; transform: translateY(0); pointer-events: auto; } /* ══════════════════════════════════════════════════ INTERNATIONAL MEDIA ══════════════════════════════════════════════════ */ .body-t + .intl-media { margin-top: -4px; } .intl-media { display: flex; align-items: center; gap: 20px; padding: 16px 20px; background: var(--blue-soft); border: 1px solid rgba(16,94,250,.15); border-radius: 12px; margin-bottom: 36px; flex-wrap: wrap; } .intl-media-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); white-space: nowrap; flex-shrink: 0; padding-right: 20px; border-right: 1px solid rgba(16,94,250,.2); } .intl-media-logos { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .intl-media-item { display: flex; align-items: center; gap: 5px; background: #ffffff; border: 1px solid var(--border); border-radius: 20px; padding: 4px 10px 4px 7px; font-size: 12px; font-weight: 500; color: var(--navy); white-space: nowrap; } .intl-flag { font-size: 14px; line-height: 1; } .intl-pub { font-size: 12px; } /* ══════════════════════════════════════════════════ MEET US AT BANNER ══════════════════════════════════════════════════ */ /* ── Meet us at bar (under nav) ── */ .meet-us-bar { background: #fff; border-top: 2px solid rgba(255,255,255,.6); border-bottom: 1.5px solid var(--blue); position: relative; z-index: 90; } .meet-us-bar-inner { max-width: 1200px; margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; gap: 20px; } .meet-us-bar-label { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--navy); opacity: .5; text-transform: uppercase; letter-spacing: .1em; white-space: nowrap; flex-shrink: 0; } .meet-us-bar-events { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .meet-us-bar-events::-webkit-scrollbar { display: none; } .meet-us-bar-event { display: inline-flex; align-items: center; gap: 4px; padding: 5px 14px; background: rgba(16,94,250,.06); border: 1px solid rgba(16,94,250,.18); border-radius: 999px; font-size: 12.5px; color: var(--navy); text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s; flex-shrink: 0; } .meet-us-bar-event:hover { background: rgba(16,94,250,.12); border-color: rgba(16,94,250,.35); color: var(--navy); } .meet-us-bar-event strong { font-weight: 600; color: var(--blue); } .meet-us-bar-sep { color: rgba(17,26,81,.25); margin: 0 1px; } .meet-us-bar-cta { display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; background: rgba(16,94,250,.08); border: 1px solid rgba(16,94,250,.25); color: var(--navy); font-size: 12px; font-weight: 600; border-radius: 999px; text-decoration: none; white-space: nowrap; flex-shrink: 0; margin-left: auto; transition: background .15s, border-color .15s; } .meet-us-bar-cta:hover { background: rgba(16,94,250,.15); border-color: rgba(16,94,250,.4); color: var(--navy); } @media (max-width: 768px) { .meet-us-bar-inner { padding: 10px 16px; gap: 8px; flex-direction: column; align-items: stretch; } .meet-us-bar-label { display: none; } .meet-us-bar-cta { display: none; } .meet-us-bar-events { gap: 6px 6px; flex-wrap: wrap; justify-content: center; overflow-x: visible; } .meet-us-bar-event { font-size: 11.5px; padding: 5px 11px; } } /* ══════════════════════════════════════════════════ FAQ ══════════════════════════════════════════════════ */ .faq-list { display:flex; flex-direction:column; gap:0; border-radius:14px; overflow:hidden; border:1px solid var(--border); box-shadow:0 2px 12px rgba(17,26,81,.05); } .faq-item { background:white; border-bottom:1px solid var(--border); } .faq-item:last-child { border-bottom:none; } .faq-q { width:100%; background:none; border:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 28px; text-align:left; font-family:inherit; } .faq-q span { font-size:15px; font-weight:700; color:var(--navy); letter-spacing:-.2px; line-height:1.4; } .faq-q:hover span { color:var(--blue); } .faq-arrow { color:var(--muted); flex-shrink:0; transition:transform .25s ease; } .faq-q[aria-expanded="true"] .faq-arrow { transform:rotate(180deg); color:var(--blue); } .faq-a { max-height:0; overflow:hidden; transition:max-height .3s ease, padding .3s ease; padding:0 28px; } .faq-a.open { max-height:400px; padding:0 28px 22px; } .faq-a p { font-size:14px; color:var(--muted); line-height:1.8; font-weight:300; } /* FAQ CTA block */ .faq-cta { margin-top:52px; } .faq-cta-inner { background:var(--navy); border-radius:16px; padding:48px 52px; display:flex; flex-direction:column; align-items:flex-start; gap:6px; position:relative; overflow:hidden; } .faq-cta-inner::after { content:''; position:absolute; right:-40px; top:-40px; width:300px; height:300px; background:radial-gradient(circle, rgba(16,94,250,.25) 0%, transparent 70%); pointer-events:none; } .faq-cta-pre { font-size:13px; font-weight:600; color:var(--blue); text-transform:uppercase; letter-spacing:.08em; margin-bottom:4px; } .faq-cta-h { font-size:clamp(20px,2.4vw,28px); font-weight:700; color:white; letter-spacing:-.5px; line-height:1.25; margin-bottom:16px; max-width:600px; } .faq-cta-list { display:flex; flex-direction:column; gap:8px; margin-bottom:20px; list-style:none; padding:0; } .faq-cta-list li { font-size:14px; color:rgba(255,255,255,.65); font-weight:300; padding-left:20px; position:relative; } .faq-cta-list li::before { content:'✓'; position:absolute; left:0; color:var(--blue); font-weight:700; } .faq-cta-sub { font-size:12px; color:rgba(255,255,255,.65); margin-top:12px; font-style:italic; } /* ══════════════════════════════════════════════════ FOOTER ══════════════════════════════════════════════════ */ footer { background:var(--navy);padding:36px var(--px);display:flex;align-items:center;justify-content:space-between; } footer .logo { color:white; } .footer-links { display:flex;gap:28px; } .footer-links a { font-size:12px;color:rgba(255,255,255,.65);text-decoration:none;transition:color .15s; } .footer-links a:hover { color:rgba(255,255,255,.6); } footer p { font-size:12px;color:rgba(255,255,255,.55); } /* ══════════════════════════════════════════════════ FOCUS STYLES (WCAG AA) ══════════════════════════════════════════════════ */ *:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .btn-nav:focus-visible, .btn-primary:focus-visible, .btn-ghost:focus-visible, .btn-solid:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; box-shadow: 0 0 0 4px var(--blue); } /* ══════════════════════════════════════════════════ SKIP LINK (WCAG AA) ══════════════════════════════════════════════════ */ .skip-link { position: absolute; top: -100%; left: 16px; z-index: 99999; background: var(--blue); color: var(--white); padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 500; text-decoration: none; transition: top .15s; } .skip-link:focus { top: 8px; } /* ══════════════════════════════════════════════════ REVEAL ANIMATION ══════════════════════════════════════════════════ */ .r { opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease; } .r.v { opacity:1;transform:none; } @media(prefers-reduced-motion:reduce){ .r { opacity:1;transform:none;transition:none; } } /* ══════════════════════════════════════════════════ RESPONSIVE — Inline CSS (source of truth) ══════════════════════════════════════════════════ */ @media(max-width:1024px){ /* Nav: hide menu, show hamburger instead */ .nav { padding:0 20px; } .nav-menu { display:none; } .nav-right { margin-left: auto; } .nav-right .nav-lang { display: block; } } @media(max-width:960px){ :root { --px: 20px; } .sec { padding:68px 20px; } .hero { padding:60px 20px 64px; } .hero-inner, .hero--split .hero-inner { grid-template-columns:1fr; gap:40px; } .hero-rotating-h1 { min-height: 250px; } .day-card { max-width: 420px; } .clients { padding:20px; } .two-col,.cta-grid,.seg-grid,.aud-grid { grid-template-columns:1fr;gap:32px; } .prob-grid,.modules-grid { grid-template-columns:1fr !important; } .results-grid { grid-template-columns:repeat(2,1fr); } .hero-kpis { grid-template-columns:1fr; } .hubs-grid { grid-template-columns:1fr 1fr; } .landen-grid { grid-template-columns:repeat(2,1fr); } footer { flex-direction:column;gap:16px;text-align:center;padding:28px 20px; } .footer-links { flex-wrap:wrap;justify-content:center; } .nieuws-grid { grid-template-columns:1fr; } .role-grid { grid-template-columns:1fr 1fr; } .shift-grid { grid-template-columns:1fr; } .sh-m,.sc-m { display:none; } .nav-right .nav-lang-trigger { padding: 4px 8px; font-size: 12px; } .nav-right .nav-lang-flag { font-size: 14px; } } @media (max-width: 900px) { .persona-grid { grid-template-columns: repeat(2,1fr); } } @media (max-width: 560px) { .persona-grid { grid-template-columns: 1fr; } } @media (max-width: 600px) { .hubs-grid { grid-template-columns: 1fr; } .results-grid { grid-template-columns: 1fr; } .landen-grid { grid-template-columns: 1fr; } .role-grid { grid-template-columns: 1fr; } .stats-grid { grid-template-columns: 1fr; } } @media (max-width: 1024px) { /* When menu is open, show everything properly */ .nav-menu.mobile-open { display: flex !important; position: fixed !important; top: 72px !important; left: 0 !important; right: 0 !important; z-index: 9998 !important; flex-direction: column !important; height: auto !important; background: var(--navy) !important; padding: 16px 24px !important; gap: 8px !important; } /* Show all nav links in open mobile menu with correct colors */ .nav-menu.mobile-open a, .nav-menu.mobile-open .nav-dropdown-trigger { display: flex !important; color: rgba(255,255,255,0.8) !important; font-size: 15px; padding: 8px 0; } .nav-menu.mobile-open a:hover, .nav-menu.mobile-open .nav-dropdown-trigger:hover { color: #fff !important; } /* Show btn-nav in open mobile menu */ .nav-menu.mobile-open .btn-nav { display: inline-flex !important; color: #fff !important; margin-top: 8px; align-self: flex-start; } /* Dropdown toggle on mobile (tap instead of hover) */ .nav-dropdown .nav-dropdown-menu { position: static !important; transform: none !important; box-shadow: none !important; border: none !important; border-radius: 0 !important; padding: 0 !important; min-width: 0 !important; max-height: 0; overflow: hidden; opacity: 1 !important; visibility: visible !important; transition: max-height .25s ease; background: transparent !important; width: 100% !important; } .nav-dropdown.dd-open .nav-dropdown-menu { max-height: 400px; padding: 8px 0 0 0; } .nav-dropdown-item { color: #fff; } .nav-dd-label { color: rgba(255,255,255,.9) !important; } .nav-dd-desc { color: rgba(255,255,255,.5) !important; } .nav-dd-icon { background: rgba(255,255,255,.1) !important; color: #fff !important; } .nav-dropdown-trigger svg { transition: transform .2s; } .nav-dropdown.dd-open .nav-dropdown-trigger svg { transform: rotate(180deg); } } @media(max-width:960px){ .faq-q { padding:18px 20px; } .faq-a { padding:0 20px; } .faq-a.open { padding:0 20px 18px; } .faq-cta-inner { padding:32px 28px; } } /* ══════════════════════════════════════════════════ AI Visual Upgrade — Styling enhancements (from main.css — non-conflicting additions) ══════════════════════════════════════════════════ */ /* ── Hero Dark Mode ── */ .hero--ai { background: var(--navy); color: var(--white); position: relative; overflow: hidden; } .hero--ai::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 25% 50%, rgba(16,94,250,.12) 0%, transparent 50%), radial-gradient(ellipse at 75% 30%, rgba(16,94,250,.08) 0%, transparent 45%); pointer-events: none; z-index: 0; } .hero--ai .hero-inner { position: relative; z-index: 1; } .hero--ai h1 { color: var(--white); } .hero--ai .hero-sub { color: rgba(255,255,255,0.55); } .hero--ai .hero-pill { border-color: rgba(16,94,250,0.35); background: rgba(16,94,250,0.08); } .hero--ai .btn-ghost-white, .hero--ai .btn-ghost { color: var(--white); border-color: rgba(255,255,255,0.2); } .hero--ai .btn-ghost-white:hover, .hero--ai .btn-ghost:hover { background: rgba(255,255,255,0.08); } /* ── Hero Wave Background ── */ .hero-wave-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .hero-wave-bg img, .hero-wave-bg svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 110%; height: auto; min-height: 100%; opacity: 0.35; } /* ── Pulse Animation on Hero Dot ── */ @keyframes aiPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(16,94,250,0.5); } 50% { box-shadow: 0 0 0 8px rgba(16,94,250,0); } } .hero--ai .hero-pill-dot, .ai-pulse { animation: aiPulse 2.4s ease-in-out infinite; } /* ── Platform Card Glow (on dark hero) ── */ .hero--ai .platform-card { background: rgba(255,255,255,0.04); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 8px 40px rgba(16,94,250,0.12); } .hero--ai .pc-header { border-bottom-color: rgba(255,255,255,0.08); } .hero--ai .pc-header-dot { box-shadow: 0 0 10px rgba(16,94,250,0.6); } .hero--ai .pc-title { color: var(--white); } .hero--ai .pc-subtitle { color: rgba(255,255,255,0.65); } .hero--ai .pc-module-new { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.06); } .hero--ai .pc-module-new:hover { background: rgba(16,94,250,0.08); } .hero--ai .pc-mod-title { color: rgba(255,255,255,0.9); } .hero--ai .pc-mod-sub { color: rgba(255,255,255,0.65); } .hero--ai .pc-mod-icon-wrap.blue { background: rgba(16,94,250,0.15); } .hero--ai .pc-mod-icon-wrap.muted { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.65); } .hero--ai .pc-mod-icon-wrap.amber { background: rgba(245,189,76,0.12); } .hero--ai .pc-badge.live { background: rgba(16,94,250,0.15); color: var(--blue); } .hero--ai .pc-badge.soon { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.65); } .hero--ai .pc-badge.ai { background: rgba(245,189,76,0.12); color: #F5BD4C; } .hero--ai .pc-footer-new { background: rgba(16,94,250,0.08); border-color: rgba(16,94,250,0.2); } /* ── Hero KPIs on Dark ── */ .hero--ai .hk { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); box-shadow: none; } .hero--ai .hk-val { color: var(--white); } .hero--ai .hk-lbl { color: rgba(255,255,255,0.4); } /* ── Gradient Mesh Backgrounds ── */ .bg-navy.ai-gradient::before { background: radial-gradient(ellipse at 20% 50%, rgba(16,94,250,.18) 0%, transparent 50%), radial-gradient(ellipse at 80% 20%, rgba(16,94,250,.10) 0%, transparent 45%), radial-gradient(ellipse at 60% 80%, rgba(0,177,174,.06) 0%, transparent 40%); width: 100%; right: auto; left: 0; } /* ── Glassmorphism Cards on Dark Sections ── */ .glass-card { background: rgba(255,255,255,0.05); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; transition: background .2s, box-shadow .2s, transform .2s; } .glass-card:hover { background: rgba(255,255,255,0.08); box-shadow: 0 12px 40px rgba(16,94,250,0.12); transform: translateY(-3px); } /* ── Glow Effects on Buttons ── */ .btn-primary:hover, .btn-teal:hover, .btn-solid:hover, .btn-teal-solid:hover, .btn-blue:hover, .btn-cta:hover, .btn-demo:hover, .btn-nav:hover { box-shadow: 0 4px 20px rgba(16,94,250,0.35); } .btn-submit:hover { box-shadow: 0 4px 20px rgba(16,94,250,0.35); } /* ── Card Icon Glow ── */ .card-icon, .role-icon, .persona-icon { transition: box-shadow .2s; } .card:hover .card-icon, .role-card:hover .role-icon, .persona-card:hover .persona-icon { box-shadow: 0 0 16px rgba(16,94,250,0.2); } /* ── Staggered Reveal Animation ── */ .r-stagger > .r:nth-child(1) { transition-delay: 0s; } .r-stagger > .r:nth-child(2) { transition-delay: .08s; } .r-stagger > .r:nth-child(3) { transition-delay: .16s; } .r-stagger > .r:nth-child(4) { transition-delay: .24s; } .r-stagger > .r:nth-child(5) { transition-delay: .32s; } .r-stagger > .r:nth-child(6) { transition-delay: .40s; } /* ── Noise Texture Overlay ── */ .ai-noise::after { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E"); background-size: 128px 128px; pointer-events: none; z-index: 0; mix-blend-mode: overlay; } /* ── Floating Glow Orbs (decorative) ── */ @keyframes orbFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(15px, -20px) scale(1.05); } 66% { transform: translate(-10px, 10px) scale(0.97); } } .ai-orb { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; filter: blur(60px); animation: orbFloat 12s ease-in-out infinite; } .ai-orb--1 { width: 300px; height: 300px; background: rgba(16,94,250,0.12); top: 10%; left: 5%; } .ai-orb--2 { width: 200px; height: 200px; background: rgba(16,94,250,0.08); bottom: 15%; right: 10%; animation-delay: -4s; } /* ── Section Divider Glow Line ── */ .ai-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(16,94,250,0.3), transparent); border: none; margin: 0; } /* ── CTA Section on Navy ── */ .bg-navy .cta-card.cta-dark.glass-card { background: rgba(16,94,250,0.08); border: 1px solid rgba(16,94,250,0.2); } .bg-navy .cta-card.cta-light.glass-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); } .bg-navy .cta-card.cta-light.glass-card h3 { color: var(--white); } .bg-navy .cta-card.cta-light.glass-card .cta-ol { color: var(--blue); } .bg-navy .cta-card.cta-light.glass-card .cta-bd { color: rgba(255,255,255,0.45); } /* ── Flow Items on Navy ── */ .bg-navy .flow-item { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.08); } .bg-navy .flow-item:last-child { border-bottom-color: rgba(255,255,255,0.08); } .bg-navy .flow-num { background: rgba(16,94,250,0.2); color: rgba(255,255,255,0.5); } .bg-navy .flow-text h3 { color: var(--white); } .bg-navy .flow-text p { color: rgba(255,255,255,0.5); } .bg-navy .flow-icon { background: rgba(16,94,250,0.12); } .bg-navy .flow-tag { background: rgba(16,94,250,0.15); color: var(--white); font-weight: 700; } /* ── Module Cards on Navy ── */ .bg-navy .mod { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.08); } .bg-navy .mod:hover { background: rgba(255,255,255,0.08); box-shadow: 0 12px 36px rgba(16,94,250,0.12); } .bg-navy .mod h3 { color: var(--white); } .bg-navy .mod p { color: rgba(255,255,255,0.5); } .bg-navy .vd-card h3 { color: var(--white); } .bg-navy .vd-card p { color: rgba(255,255,255,0.5); } .bg-navy .vd-num { color: var(--white); } .bg-navy .mod-pill { background: rgba(16,94,250,0.15); color: var(--blue); } /* ── AI Visual Upgrade Responsive ── */ @media(max-width:960px) { .ai-orb { display: none; } } /* ══ FAQ ══ */ .faq-list { display:flex; flex-direction:column; gap:0; border-radius:14px; overflow:hidden; border:1px solid var(--border); box-shadow:0 2px 12px rgba(17,26,81,.05); } .faq-item { background:white; border-bottom:1px solid var(--border); } .faq-item:last-child { border-bottom:none; } .faq-q { width:100%; background:none; border:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 28px; text-align:left; font-family:inherit; } .faq-q span { font-size:15px; font-weight:700; color:var(--navy); letter-spacing:-.2px; line-height:1.4; } .faq-q:hover span { color:var(--blue); } .faq-arrow { color:var(--muted); flex-shrink:0; transition:transform .25s ease; } .faq-q[aria-expanded="true"] .faq-arrow { transform:rotate(180deg); color:var(--blue); } .faq-a { max-height:0; overflow:hidden; transition:max-height .3s ease, padding .3s ease; padding:0 28px; } .faq-a.open { max-height:400px; padding:0 28px 22px; } .faq-a p { font-size:14px; color:var(--muted); line-height:1.8; font-weight:300; } /* FAQ CTA block */ .faq-cta { margin-top:52px; } .faq-cta-inner { background:var(--navy); border-radius:16px; padding:48px 52px; display:flex; flex-direction:column; align-items:flex-start; gap:6px; position:relative; overflow:hidden; } .faq-cta-inner::after { content:''; position:absolute; right:-40px; top:-40px; width:300px; height:300px; background:radial-gradient(circle, rgba(16,94,250,.25) 0%, transparent 70%); pointer-events:none; } .faq-cta-pre { font-size:13px; font-weight:600; color:var(--blue); text-transform:uppercase; letter-spacing:.08em; margin-bottom:4px; } .faq-cta-h { font-size:clamp(20px,2.4vw,28px); font-weight:700; color:white; letter-spacing:-.5px; line-height:1.25; margin-bottom:16px; max-width:600px; } .faq-cta-list { display:flex; flex-direction:column; gap:8px; margin-bottom:20px; list-style:none; padding:0; } .faq-cta-list li { font-size:14px; color:rgba(255,255,255,.65); font-weight:300; padding-left:20px; position:relative; } .faq-cta-list li::before { content:'✓'; position:absolute; left:0; color:var(--blue); font-weight:700; } .faq-cta-sub { font-size:12px; color:rgba(255,255,255,.65); margin-top:12px; font-style:italic; } @media(max-width:960px){ .faq-q { padding:18px 20px; } .faq-a { padding:0 20px; } .faq-a.open { padding:0 20px 18px; } .faq-cta-inner { padding:32px 28px; } } /* Use-case cards (marketing campagne types) */ .use-cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; } .uc-card { padding: 28px 26px; background: white; border-radius: 14px; border: 1px solid var(--border); border-top: 3px solid var(--blue); box-shadow: 0 1px 4px rgba(17,26,81,.05); } .uc-card.teal { border-top-color: var(--blue); } .uc-card.teal .uc-icon { background: rgba(0,177,174,0.1); color: var(--blue); } .uc-card.teal .uc-tag { background: rgba(0,177,174,0.08); color: var(--blue); } .uc-card.amber { border-top-color: var(--yellow); } .uc-card.amber .uc-icon { background: #FEF3C7; color: #D97706; } .uc-card.amber .uc-tag { background: #FEF3C7; color: #D97706; } .uc-tag { display: inline-block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 4px 10px; border-radius: 20px; background: var(--blue-soft); color: var(--blue); margin-bottom: 12px; } .uc-card h3 { font-size: 17px; font-weight: 700; color: var(--navy); margin-bottom: 8px; letter-spacing: -0.3px; } .uc-card p { font-size: 13px; color: var(--muted); line-height: 1.7; margin-bottom: 16px; } .uc-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; } .uc-list li { font-size: 13px; color: var(--navy); padding-left: 18px; position: relative; line-height: 1.5; } .uc-list li::before { content: ''; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); } .uc-card.teal .uc-list li::before { background: var(--blue); } .uc-card.amber .uc-list li::before { background: var(--yellow); } @media (max-width: 900px) { .use-cases { grid-template-columns: 1fr; } } /* How-it-works steps (marketing navy section) */ .how-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; } .how-steps { display: flex; flex-direction: column; gap: 20px; } .how-step { display: flex; gap: 16px; align-items: flex-start; } .hs-num { width: 32px; height: 32px; border-radius: 50%; background: rgba(16,94,250,.2); color: var(--blue); font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .hs-body h3 { font-size: 16px; font-weight: 700; color: white; margin-bottom: 4px; letter-spacing: -0.2px; } .hs-body p { font-size: 13px; color: rgba(255,255,255,.55); line-height: 1.65; margin-bottom: 8px; } .hs-tag { display: inline-block; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; padding: 3px 10px; border-radius: 20px; background: rgba(16,94,250,.15); color: var(--blue); } /* Campaign preview card (marketing navy section) */ .camp-preview { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 24px; } .camp-prev-title { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 16px; } .camp-item { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.08); } .camp-item:last-child { border-bottom: none; } .camp-item-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .camp-item-name { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: white; } .camp-icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; background: rgba(16,94,250,.15); color: var(--blue); flex-shrink: 0; } .camp-item-status { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 20px; } .status-live { background: rgba(0,177,174,.12); color: var(--blue); } .status-klaar { background: #FEF3C7; color: #D97706; } .status-draft { background: rgba(255,255,255,.08); color: rgba(255,255,255,.4); } .camp-item-meta { font-size: 11.5px; color: rgba(255,255,255,.35); margin-bottom: 8px; } .camp-item-bar { padding-right: 4px; } .camp-item-track { height: 5px; background: rgba(255,255,255,.08); border-radius: 99px; overflow: hidden; } .camp-item-fill { height: 100%; border-radius: 99px; transition: width .6s ease; } @media (max-width: 900px) { .how-grid { grid-template-columns: 1fr; gap: 40px; } .quote-row { grid-template-columns: 1fr; } } /* ══════════════════════════════════════════════════ SVG Icon System ══════════════════════════════════════════════════ */ .prob-icon svg, .mod-icon svg, .flow-icon svg, .vd-icon svg, .uc-icon svg, .pf-icon svg, .zf-icon svg, .wb-icon svg, .thesis-icon svg, .risk-icon svg, .vc-icon-col svg, .kantoor-icon svg, .dl-icon svg, .ch-icon svg, .cc-head-icon svg, .diff-icon svg, .press-icon svg, .camp-icon svg { width: 20px; height: 20px; flex-shrink: 0; } .vd-icon { margin-bottom: 12px; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: rgba(16,94,250,0.15); color: var(--blue); } .uc-icon { margin-bottom: 14px; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--blue-soft); color: var(--blue); } .pf-icon, .zf-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0; } .pf-icon.pf-teal { background: rgba(0,177,174,0.1); color: var(--blue); } .pf-icon.pf-blue { background: var(--blue-soft); color: var(--blue); } .pf-icon.pf-green { background: rgba(0,170,118,0.1); color: var(--green); } .zf-icon { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); } .thesis-icon, .risk-icon { margin-bottom: 12px; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; background: var(--blue-soft); color: var(--blue); } .vc-icon-col { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0; background: var(--blue-soft); color: var(--blue); } .kantoor-icon, .dl-icon { margin-bottom: 10px; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; background: var(--blue-soft); color: var(--blue); } .wb-icon { margin-bottom: 10px; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; background: var(--blue-soft); color: var(--blue); } .ch-icon, .cc-head-icon { margin-bottom: 12px; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; background: var(--blue-soft); color: var(--blue); } .diff-icon, .press-icon { margin-bottom: 10px; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; background: var(--blue-soft); color: var(--blue); } .camp-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; vertical-align: -2px; margin-right: 4px; color: var(--blue); } .camp-icon svg { width: 14px; height: 14px; } /* ── Blog Detail Pages ── */ .blog-photo { max-width: 480px; margin: 0 0 24px; } .blog-photo .blog-inline-img { display: block; width: 100%; border-radius: 10px; } .blog-photo figcaption { font-size: 12px; color: var(--muted); margin-top: 6px; } .nav-back { display: inline-flex; align-items: center; gap: 6px; color: rgba(255,255,255,.7); text-decoration: none; font-size: 13px; font-weight: 400; transition: color .15s; } .nav-back:hover { color: #fff; } .nav-back svg { width: 16px; height: 16px; } .blog-hero { background: var(--grey); border-bottom: 1px solid var(--border); padding: 48px var(--px) 36px; } .blog-hero-inner { max-width: 800px; margin: 0 auto; } .blog-badge { display: inline-flex; padding: 3px 10px; border-radius: 999px; background: var(--blue-soft); color: var(--blue); font-weight: 600; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px; } .blog-type-label { font-size: 10px; font-weight: 400; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 10px; display: block; } .blog-h1 { font-size: clamp(22px, 3.5vw, 36px); font-weight: 700; letter-spacing: -.8px; line-height: 1.15; color: var(--navy); margin-bottom: 14px; } .blog-streamer { font-size: 15px; font-weight: 400; color: var(--blue); line-height: 1.6; padding-left: 14px; border-left: 3px solid var(--blue); margin-bottom: 18px; } .blog-tags { display: flex; flex-wrap: wrap; gap: 6px; } .blog-tag { font-size: 11px; font-weight: 400; color: var(--muted); background: white; border: 1px solid var(--border); padding: 3px 9px; border-radius: 999px; } .blog-body { max-width: 800px; margin: 0 auto; padding: 48px var(--px) 72px; } .blog-body p { font-size: 15px; color: #475569; line-height: 1.85; margin-bottom: 18px; font-weight: 300; } .blog-body h2 { font-size: 16px; font-weight: 600; color: var(--navy); letter-spacing: -.2px; margin: 32px 0 10px; padding-top: 8px; border-top: 1px solid var(--border); } .blog-body ul { margin: 0 0 18px 20px; } .blog-body li { font-size: 15px; color: #475569; line-height: 1.85; font-weight: 300; margin-bottom: 6px; } .blog-download { margin: 36px 0 0; padding: 28px 0 0; border-top: 1px solid var(--border); } .blog-download .btn-ghost { gap: 8px; } .press-block { display: flex; align-items: center; gap: 14px; background: #F0F7FF; border: 1px solid #BFDBFE; border-radius: 10px; padding: 16px 18px; margin: 0 0 28px; } .press-text { font-size: 13px; color: #1E3A5F; line-height: 1.5; font-weight: 300; } .press-text a { color: var(--blue); font-weight: 500; text-decoration: none; } .press-text a:hover { text-decoration: underline; } .press-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--blue); margin-bottom: 3px; } .blog-full-img { max-width: 800px; margin: 0 auto; padding: 0 var(--px); } .blog-photo { width: 100%; border-radius: 12px; margin: 28px 0; display: block; object-fit: cover; border: 1px solid var(--border); } .blog-photo-caption { font-size: 12px; color: var(--muted); font-weight: 300; text-align: center; margin-top: -20px; margin-bottom: 28px; } .li-card { border: 1px solid var(--border); border-radius: 12px; padding: 20px 22px; margin: 28px 0; background: #fff; } .li-header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .li-avatar { width: 40px; height: 40px; border-radius: 8px; background: #0A66C2; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .li-meta { flex: 1; } .li-name { font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 1px; } .li-sub { font-size: 11px; color: var(--muted); font-weight: 300; } .li-badge { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #0A66C2; background: #E8F0FC; padding: 2px 8px; border-radius: 999px; margin-left: auto; } .li-body { font-size: 13px; color: #475569; line-height: 1.8; border-left: 3px solid #DBEAFE; padding-left: 14px; font-weight: 300; } .li-tags { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; } .li-tag { font-size: 11px; color: #0A66C2; font-weight: 400; } .li-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 12px; font-weight: 500; color: #0A66C2; text-decoration: none; } .li-link:hover { text-decoration: underline; } .inline-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--border); margin-top: 36px; padding-top: 28px; } .inline-cta-text { font-size: 15px; color: #475569; font-weight: 300; } .inline-cta-text strong { color: var(--navy); font-weight: 600; } .inline-cta-btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; background: var(--blue); color: #fff; padding: 11px 20px; border-radius: 999px; font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background .15s; } .inline-cta-btn:hover { background: var(--blue); } @media (max-width: 768px) { .blog-hero, .blog-body { padding-left: 20px; padding-right: 20px; } .blog-hero { padding-top: 32px; padding-bottom: 24px; } .inline-cta { flex-direction: column; align-items: flex-start; } } /* ── Partners Page ── */ .partners-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; } .partner-card { background: #fff; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; transition: box-shadow .2s; } .partner-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.06); } .partner-logo-wrap { display: flex; align-items: center; justify-content: center; height: 120px; padding: 24px; } .partner-logo-wrap img { max-height: 48px; max-width: 160px; object-fit: contain; mix-blend-mode: multiply; } .partner-cat { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); padding: 18px 22px 0; } .partner-desc { font-size: 13px; color: var(--muted); line-height: 1.75; padding: 8px 22px 0; font-weight: 300; } .partner-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 22px 22px; } .partner-tags .tag { font-size: 11px; font-weight: 500; color: var(--blue); background: rgba(16,94,250,.07); padding: 3px 10px; border-radius: 20px; } .cta-btns { display: flex; gap: 14px; justify-content: center; margin-top: 28px; } .btn-white { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--navy); padding: 13px 28px; border-radius: 999px; font-size: 14px; font-weight: 600; text-decoration: none; transition: background .15s; } .btn-white:hover { background: rgba(255,255,255,.85); } @media (max-width: 900px) { .partners-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .partners-grid { grid-template-columns: 1fr; } } /* ── Cases Page ── */ .case-section { padding: 96px 32px; } .case-section.alt { background: var(--grey); } .case-inner { max-width: var(--max-w); margin: 0 auto; } .case-label { display: flex; align-items: center; gap: 16px; margin-bottom: 48px; padding-bottom: 24px; border-bottom: 2px solid var(--blue); } .case-num { width: 40px; height: 40px; border-radius: 50%; background: var(--blue); color: white; font-family: 'Outfit', sans-serif; font-size: 18px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .case-label-text h2 { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); margin-bottom: 4px; } .case-label-text p { font-size: 22px; font-weight: 800; color: var(--navy); letter-spacing: -.5px; } .case-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; } .case-client-badge { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; } .case-title { font-size: clamp(22px, 2.5vw, 32px); font-weight: 800; color: var(--navy); letter-spacing: -1px; line-height: 1.15; margin-bottom: 16px; } .case-title span { color: var(--blue); } .case-intro { font-size: 15px; color: var(--muted); line-height: 1.8; margin-bottom: 28px; } /* Quote blocks */ .quote-block { border-radius: 0 10px 10px 0; padding: 16px 20px; margin-bottom: 14px; } .quote-block p { font-size: 13px; font-style: italic; line-height: 1.7; margin-bottom: 6px; } .quote-block cite { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; } .quote-orange { background: #fef9f0; border-left: 3px solid #f97316; } .quote-orange p { color: #7c3d12; } .quote-orange cite { color: #ea580c; } .quote-green { background: #f0fdf4; border-left: 3px solid #059669; } .quote-green p { color: #14532d; } .quote-green cite { color: #059669; } .quote-blue { background: #eff6ff; border-left: 3px solid var(--blue); } .quote-blue p { color: #1e3a5f; } .quote-blue cite { color: var(--blue); } .quote-navy { background: var(--navy); border-radius: 12px; padding: 20px 24px; margin-top: 6px; } .quote-navy p { color: rgba(255,255,255,.7); font-style: italic; font-size: 14px; line-height: 1.7; margin-bottom: 6px; } .quote-navy cite { color: rgba(255,255,255,.35); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; } .video-wrap { margin-top: 20px; } /* Stats */ .stats-box { background: var(--navy); border-radius: 20px; padding: 40px; margin-bottom: 20px; } .stats-label { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-bottom: 28px; display: flex; align-items: center; gap: 12px; } .stats-label::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,.2), transparent); } .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .stat-item { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 24px 20px; text-align: center; transition: background .2s, border-color .2s; } .stat-item:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); } .stat-item.full { grid-column: span 2; } .stat-val { font-family: 'Urbanist', sans-serif; font-size: 34px; font-weight: 800; color: #FFFFFF; letter-spacing: -1.2px; line-height: 1; margin-bottom: 8px; } .stat-lbl { font-size: 12px; color: rgba(255,255,255,.65); line-height: 1.5; } /* Case cards */ .cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 40px; } .case-card { background: white; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; } .case-card.on-grey { background: white; } .card-top { padding: 22px 22px 18px; border-bottom: 1px solid var(--border); } .result-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 700; margin-bottom: 12px; } .result-win { background: #f0fdf4; color: #059669; } .result-loss { background: #fef2f2; color: #dc2626; } .card-title { font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 8px; line-height: 1.3; } .card-desc { font-size: 13px; color: var(--muted); line-height: 1.7; } .card-quote { background: var(--grey); border-left: 3px solid var(--blue); padding: 12px 14px; margin-top: 14px; border-radius: 0 8px 8px 0; font-size: 12px; color: #475569; font-style: italic; line-height: 1.6; } .card-bottom { padding: 14px 22px; display: flex; gap: 20px; flex-wrap: wrap; } .card-metric { font-size: 12px; color: var(--muted); } .card-metric strong { color: var(--navy); font-weight: 700; } .card-metric.green strong { color: #059669; } .card-metric.red strong { color: #dc2626; } /* KPI strip */ .kpi-label { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.35); margin-bottom: 20px; } .kpi-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; max-width: 960px; margin: 0 auto; } .kpi-cell { text-align: left; } .kpi-box { background: var(--grey); border: 1px solid var(--border); border-radius: 12px; padding: 24px 20px; text-align: center; } .kpi-val { font-size: 32px; font-weight: 800; color: #fff; letter-spacing: -1.5px; line-height: 1; margin-bottom: 6px; font-family: 'Urbanist', sans-serif; } .kpi-val .a { color: var(--blue); } .kpi-desc { font-size: 12px; color: rgba(255,255,255,.5); line-height: 1.5; font-weight: 300; } .kpi-lbl { font-size: 12px; color: var(--muted); line-height: 1.5; } /* Impact section — homepage */ #impact .kpi-strip { grid-template-columns: repeat(4, 1fr); max-width: 860px; gap: 32px; } #impact .kpi-cell { text-align: center; } #impact .kpi-val { font-size: 40px; margin-bottom: 10px; color: #fff; } #impact .kpi-val .a { color: #fff; } #impact .kpi-desc { font-size: 14px; } @media (max-width: 900px) { #impact .kpi-strip { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { #impact .kpi-strip { grid-template-columns: 1fr 1fr; gap: 24px; } #impact .kpi-val { font-size: 32px; } } /* Layer grid (stack diagram) */ .layer-grid { display: flex; flex-direction: column; gap: 0; max-width: 800px; margin: 40px auto 0; } .layer { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 20px 24px; } .layer-label { font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 12px; letter-spacing: -.2px; } .layer-modules { display: flex; flex-wrap: wrap; gap: 8px; } .lm { font-size: 12px; font-weight: 500; padding: 6px 14px; border-radius: 20px; white-space: nowrap; } .lm-blue { background: var(--blue); color: #fff; } .lm-ghost { background: rgba(255,255,255,.08); color: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.12); } .lm-teal { background: rgba(0,177,174,.15); color: #005755; border: 1px solid rgba(0,177,174,.25); } .layer-arrow { text-align: center; font-size: 20px; color: rgba(255,255,255,.3); padding: 6px 0; } @media (max-width: 600px) { .layer { padding: 16px; } .lm { font-size: 11px; padding: 5px 10px; } } /* Modules box */ .modules-box { background: var(--grey); border: 1px solid var(--border); border-radius: 16px; padding: 24px; } .modules-label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; } .module-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .module-row:last-child { margin-bottom: 0; } .mod-badge { font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 20px; white-space: nowrap; } .mod-defend { background: #EEF4FF; color: var(--blue); } .mod-sales { background: #f0fdf4; color: #059669; } .mod-agent { background: #f5f3ff; color: #7c3aed; } .mod-desc { font-size: 13px; color: var(--muted); } .modules-footer { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); font-size: 12px; color: #94A3B8; } /* Cases CTA */ .cta-sec { background: var(--navy); padding: 80px 32px; text-align: center; color: #fff; } .cta-sec h2 { color: #fff; } .cta-sec p { color: rgba(255,255,255,.65); } /* Cases responsive */ @media (max-width: 900px) { .case-grid { grid-template-columns: 1fr; } .kpi-strip { grid-template-columns: 1fr 1fr; } .cards-grid { grid-template-columns: 1fr; } .stats-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .case-section { padding: 64px 20px; } .kpi-strip { grid-template-columns: 1fr 1fr; } .stats-grid { grid-template-columns: 1fr; } .stat-item.full { grid-column: span 1; } } /* ══════════════════════════════════════════════════ Oplossingen Page ══════════════════════════════════════════════════ */ /* ── Market Cards (Twee Marktmodellen) ── */ .market-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 52px; } .market-card { border-radius: 16px; padding: 40px; display: flex; flex-direction: column; } .mc-light { background: white; border: 1px solid var(--border); } .mc-dark { background: var(--navy); } .mc-pill { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 6px 16px; border-radius: 999px; margin-bottom: 20px; width: fit-content; } .mc-pill-p { background: rgba(0,177,174,.1); color: var(--blue); } .mc-pill-z { background: rgba(16,94,250,.15); color: #7BA8FC; } .mc-light h3 { font-size: 20px; font-weight: 700; line-height: 1.3; margin-bottom: 8px; color: var(--navy); } .mc-dark h3 { font-size: 20px; font-weight: 700; line-height: 1.3; margin-bottom: 8px; color: white; } .mc-tagline { font-size: 13px; font-weight: 400; margin-bottom: 20px; } .mc-light .mc-tagline { color: var(--muted); } .mc-dark .mc-tagline { color: rgba(255,255,255,.5); } .mc-divider { height: 1px; margin-bottom: 24px; } .mc-light .mc-divider { background: var(--border); } .mc-dark .mc-divider { background: rgba(255,255,255,.1); } /* ── Particulier Flow ── */ .part-flow { display: flex; flex-direction: column; gap: 16px; } .pf-item { display: flex; gap: 14px; align-items: flex-start; } .pf-body h3, .pf-body h4 { font-size: 14px; font-weight: 700; color: var(--navy); margin-bottom: 4px; } .pf-body p { font-size: 13px; color: var(--muted); line-height: 1.6; margin-bottom: 6px; } .pf-tag { font-size: 11px; color: var(--blue); font-weight: 500; } .part-footer { margin-top: 24px; padding: 14px 20px; background: rgba(16,94,250,.08); border: 1px solid rgba(16,94,250,.2); border-radius: 10px; font-size: 13px; font-weight: 700; color: var(--blue); text-align: center; letter-spacing: .01em; } /* ── Zakelijk Flow ── */ .zak-flow { display: flex; flex-direction: column; gap: 16px; } .zf-item { display: flex; gap: 14px; align-items: flex-start; } .zf-body h3, .zf-body h4 { font-size: 14px; font-weight: 700; color: white; margin-bottom: 4px; } .zf-body p { font-size: 13px; color: rgba(255,255,255,.5); line-height: 1.6; margin-bottom: 6px; } .zf-tag { font-size: 11px; color: #7BA8FC; font-weight: 500; } .zak-footer { margin-top: 24px; padding: 14px 20px; background: rgba(123,168,252,.12); border: 1px solid rgba(123,168,252,.3); border-radius: 10px; font-size: 13px; font-weight: 700; color: #A8C5FD; text-align: center; letter-spacing: .01em; } /* ── Risk Context Frame ── */ .rcf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .rcf-col { padding: 28px 24px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; } .rcf-col h5 { font-size: 15px; font-weight: 700; color: white; margin-bottom: 8px; font-family: 'Urbanist', sans-serif; } .rcf-col p { font-size: 13px; color: rgba(255,255,255,.5); line-height: 1.6; } .rcf-footer { display: flex; align-items: center; justify-content: center; gap: 24px; } .rcf-stat { font-size: 14px; font-weight: 700; color: white; } .rcf-badges { display: flex; gap: 8px; } .rcf-badge { font-size: 11px; font-weight: 600; color: #7BA8FC; background: rgba(123,168,252,0.1); border: 1px solid rgba(123,168,252,0.2); border-radius: 6px; padding: 4px 12px; letter-spacing: .05em; } @media (max-width: 640px) { .rcf-grid { grid-template-columns: 1fr; } .rcf-footer { flex-wrap: wrap; justify-content: center; } } /* ── Implementation Grid ── */ .impl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 52px; } .impl-card { background: white; border: 1px solid var(--border); border-radius: 14px; padding: 36px 28px; text-align: center; } .impl-num { font-size: 36px; font-weight: 800; color: var(--blue); letter-spacing: -1px; margin-bottom: 12px; font-family: 'Urbanist', sans-serif; } .impl-card h3 { font-size: 17px; font-weight: 700; color: var(--navy); margin-bottom: 10px; } .impl-card p { font-size: 13px; color: var(--muted); line-height: 1.7; } /* ── AI Engine Architecture (Tabs + Panels) ── */ .atab { background: var(--grey); border: 1px solid var(--border); border-bottom: none; padding: 14px 8px; cursor: pointer; text-align: center; font-family: 'Outfit', sans-serif; transition: background .15s; } .atab:first-child { border-radius: 12px 0 0 0; } .atab:last-child { border-radius: 0 12px 0 0; } .atab-on { background: white; border-bottom-color: white; } .atab-n { display: block; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; } .atab-on .atab-n { color: var(--blue); } .atab-l { display: block; font-size: 13px; font-weight: 600; color: var(--navy); } /* Panels */ .apanel { display: none; } .apanel-on { display: block; } .aph { padding: 32px 28px 24px; border-bottom: 1px solid var(--border); } .aph-tag { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); margin-bottom: 8px; } .aph-title { font-size: 22px; font-weight: 800; color: var(--navy); margin-bottom: 8px; font-family: 'Urbanist', sans-serif; } .aph-sub { font-size: 14px; color: var(--muted); line-height: 1.7; } .apb { padding: 24px 28px 28px; } /* Architecture grid cards */ .ag4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .ac { background: var(--grey); border-radius: 8px; padding: 12px 14px; } .ac-hi { background: rgba(16,94,250,.06); border: 1px solid rgba(16,94,250,.12); } .ac-dash { border: 1px dashed var(--border); background: transparent; } .act { font-size: 12px; font-weight: 700; color: var(--navy); margin-bottom: 2px; } .acs { font-size: 11px; color: var(--muted); line-height: 1.4; } .actag { font-size: 10px; font-weight: 600; color: var(--blue); margin-top: 4px; } .asl { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; } .ahl { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); line-height: 1.6; } .acol-h { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--navy); margin-bottom: 12px; } .a-arrow { text-align: center; font-size: 12px; color: var(--muted); margin: 8px 0; } /* Tab progress dots */ .apb-s { flex: 1; height: 3px; border-radius: 2px; background: var(--border); transition: background .2s; } .apb-on { background: var(--blue); } /* ── Oplossingen Responsive ── */ @media (max-width: 900px) { .market-intro { grid-template-columns: 1fr; } .impl-grid { grid-template-columns: 1fr; } .ag4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .market-card { padding: 28px 20px; } .atab { padding: 10px 6px; } .atab-l { font-size: 11px; } .aph { padding: 24px 20px 18px; } .apb { padding: 18px 20px 22px; } .ag4 { grid-template-columns: 1fr; } } /* ══════════════════════════════════════════════════ LEGAL PAGES (Privacy, Algemene Voorwaarden, SLA) ══════════════════════════════════════════════════ */ /* ── Back link ── */ .back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--blue); text-decoration: none; margin-bottom: 20px; transition: opacity .15s; } .back-link:hover { opacity: 0.7; } /* ── Legal Hero ── */ .legal-hero { background: var(--white); padding: 72px var(--px) 56px; border-bottom: 1px solid var(--border); } .legal-hero-inner { max-width: var(--max-w); margin: 0 auto; } .legal-hero h1 { font-size: clamp(32px, 4vw, 48px); font-weight: 700; color: var(--navy); letter-spacing: -1px; line-height: 1.1; margin-bottom: 12px; } .legal-hero p { font-size: 16px; color: var(--muted); line-height: 1.7; max-width: 600px; } .legal-hero-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } .hero-badge { display: inline-block; font-size: 12px; color: var(--muted); background: var(--grey); padding: 5px 14px; border-radius: 999px; } .hero-badge strong { color: var(--navy); font-weight: 600; } /* ── Legal Body ── */ .legal-body { max-width: var(--max-w); margin: 0 auto; padding: 56px var(--px) 80px; } /* ── Legal Intro ── */ .legal-intro { font-size: 16px; line-height: 1.8; color: var(--muted); max-width: 720px; margin-bottom: 40px; } /* ── Table of Contents ── */ .legal-toc { background: var(--grey); border-radius: 12px; padding: 28px 32px; margin-bottom: 48px; } .legal-toc h3 { font-size: 16px; font-weight: 700; color: var(--navy); margin-bottom: 14px; } .legal-toc ol { list-style: decimal; padding-left: 20px; columns: 2; column-gap: 40px; } .legal-toc li { margin-bottom: 6px; break-inside: avoid; } .legal-toc a { font-size: 14px; color: var(--blue); text-decoration: none; font-weight: 500; } .legal-toc a:hover { text-decoration: underline; } /* ── Legal Section ── */ .legal-section { margin-bottom: 56px; } .legal-section > h2 { font-size: 28px; font-weight: 700; color: var(--navy); margin-bottom: 32px; padding-bottom: 16px; border-bottom: 2px solid var(--blue); } /* ── Legal Article ── */ .legal-article { margin-bottom: 36px; padding-bottom: 36px; border-bottom: 1px solid var(--border); } .legal-article:last-child { border-bottom: none; } .legal-article h3 { font-size: 20px; font-weight: 700; color: var(--navy); margin-bottom: 14px; } .legal-article p { font-size: 15px; line-height: 1.8; color: #333; margin-bottom: 12px; } .legal-article ul, .legal-article ol { padding-left: 20px; margin-bottom: 14px; } .legal-article li { font-size: 15px; line-height: 1.8; color: #333; margin-bottom: 4px; } .legal-article a { color: var(--blue); text-decoration: none; } .legal-article a:hover { text-decoration: underline; } /* ── Legal Subsection ── */ .legal-subsection { background: var(--grey); border-radius: 10px; padding: 24px 28px; margin-bottom: 20px; } .legal-subsection-title { font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 10px; font-family: 'Urbanist', sans-serif; } /* ── Processing Table ── */ .proc-table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 14px; } .proc-table th { text-align: left; font-weight: 600; color: var(--navy); padding: 10px 14px; background: rgba(17,26,81,0.04); border-bottom: 2px solid var(--border); } .proc-table td { padding: 10px 14px; border-bottom: 1px solid var(--border); color: #333; line-height: 1.6; } .proc-table tr:last-child td { border-bottom: none; } /* ── Legal Table (SLA) ── */ .legal-table-wrap { overflow-x: auto; margin: 14px 0; } .legal-table { width: 100%; border-collapse: collapse; font-size: 14px; } .legal-table th { text-align: left; font-weight: 600; color: var(--navy); padding: 10px 14px; background: rgba(17,26,81,0.04); border-bottom: 2px solid var(--border); } .legal-table td { padding: 10px 14px; border-bottom: 1px solid var(--border); color: #333; line-height: 1.6; } .legal-table tr:last-child td { border-bottom: none; } /* ── Badges ── */ .badge-ok { display: inline-block; font-size: 13px; font-weight: 600; color: var(--green); } /* ── Legal Definition List ── */ .legal-def { margin: 14px 0; } .legal-def dt { font-weight: 600; color: var(--navy); font-size: 14px; margin-bottom: 2px; } .legal-def dd { font-size: 14px; color: #333; line-height: 1.7; margin-left: 0; margin-bottom: 14px; } /* ── Legal Formula ── */ .legal-formula { background: var(--grey); border-radius: 8px; padding: 16px 20px; font-family: monospace; font-size: 14px; color: var(--navy); margin: 14px 0; } /* ── Legal Contact CTA ── */ .legal-contact-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; background: var(--navy); border-radius: 14px; padding: 36px 40px; margin-top: 48px; } .legal-contact-cta h2 { font-size: 20px; font-weight: 700; color: var(--white); margin-bottom: 6px; } .legal-contact-cta p { font-size: 14px; color: rgba(255,255,255,0.6); } .legal-contact-cta .btn-cta { white-space: nowrap; flex-shrink: 0; } /* ── Legal Contact (Algemene Voorwaarden) ── */ .legal-contact { background: var(--grey); border-radius: 10px; padding: 24px 28px; margin-top: 24px; } .legal-contact h3 { font-size: 18px; font-weight: 700; color: var(--navy); margin-bottom: 10px; } .legal-contact p { font-size: 14px; color: #333; line-height: 1.7; } .legal-contact a { color: var(--blue); text-decoration: none; } .legal-contact a:hover { text-decoration: underline; } /* ── Download Button ── */ .download-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--blue); color: var(--white); text-decoration: none; padding: 11px 24px; border-radius: 999px; font-size: 14px; font-weight: 600; margin-top: 16px; transition: background .15s; } .download-btn:hover { background: var(--blue); } .download-btn svg { flex-shrink: 0; } /* ── Legal Responsive ── */ @media (max-width: 768px) { .legal-hero { padding: 56px 20px 40px; } .legal-body { padding: 40px 20px 60px; } .legal-toc { padding: 20px 24px; } .legal-toc ol { columns: 1; } .legal-subsection { padding: 20px; } .legal-contact { padding: 20px 24px; } .legal-contact-cta { flex-direction: column; text-align: center; padding: 28px 24px; } .proc-table th, .proc-table td { padding: 8px 10px; font-size: 13px; } } @media (max-width: 480px) { .legal-hero-meta { flex-direction: column; gap: 6px; } } /* ── Contact Responsive ── */ @media (max-width: 768px) { .main { padding: 48px 20px 72px; } .main-inner { grid-template-columns: 1fr; gap: 20px; } .form-row { grid-template-columns: 1fr; } } /* ══════════════════════════════════════════════════ PRIVATE EQUITY PAGE ══════════════════════════════════════════════════ */ /* ── Hero trust bar ── */ .hero-trust { margin-top: 32px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .ht-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .ht-logos { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ht-logo { font-size: 13px; font-weight: 500; color: var(--navy); opacity: .6; } /* ── btn-navy ── */ .btn-navy { display: inline-flex; align-items: center; background: var(--navy); color: white; padding: 14px 28px; border-radius: 999px; font-size: 14px; font-weight: 600; text-decoration: none; transition: background .15s; } .btn-navy:hover { background: #1a2566; } /* ── Clients bar ── */ .clients { background: var(--white); padding: 40px 48px; border-bottom: 1px solid var(--border); } .clients-inner { max-width: var(--max-w); margin: 0 auto; display: flex; align-items: center; gap: 32px; flex-wrap: wrap; } .clients-lbl { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } .clients-logos img { height: 32px; object-fit: contain; filter: grayscale(1) opacity(.5); transition: filter .2s; } .clients-logos img:hover { filter: grayscale(0) opacity(1); } /* ── Valuation bridge card ── */ .val-card { background: var(--navy); border-radius: 16px; padding: 36px; color: white; max-width: 440px; } .val-title { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 24px; } .val-bridge { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; } .vb-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.08); } .vb-label { font-size: 13px; color: rgba(255,255,255,.7); } .vb-val { font-size: 14px; font-weight: 600; color: white; } .vb-val.pos { color: #2dd4bf; } .val-result { display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,.06); border-radius: 12px; padding: 20px; } .vr-left { flex: 1; } .vr-label { font-size: 12px; color: rgba(255,255,255,.4); margin-bottom: 4px; } .vr-val { font-size: 32px; font-weight: 800; color: #2dd4bf; letter-spacing: -1px; line-height: 1; } .vr-sub { font-size: 12px; color: rgba(255,255,255,.4); margin-top: 4px; } .vr-badge { width: 72px; height: 72px; border-radius: 50%; background: rgba(45,212,191,.12); display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; } .vr-badge-val { font-size: 18px; font-weight: 800; color: #2dd4bf; line-height: 1; } .vr-badge-lbl { font-size: 10px; font-weight: 600; color: rgba(45,212,191,.6); text-transform: uppercase; letter-spacing: .06em; } /* ── Investment thesis grid ── */ .thesis-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; } .thesis-card { background: white; border: 1px solid var(--border); border-radius: 14px; padding: 32px 28px; border-top: 3px solid var(--border); } .thesis-card.blue-top { border-top-color: var(--blue); } .thesis-card.teal-top { border-top-color: var(--blue); } .thesis-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--blue-soft); color: var(--blue); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } .thesis-card h3 { font-size: 16px; font-weight: 700; color: var(--navy); margin-bottom: 10px; line-height: 1.3; } .thesis-card p { font-size: 13px; color: var(--muted); line-height: 1.7; } /* ── Value creation grid ── */ .vc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; } .vc-items { display: flex; flex-direction: column; gap: 28px; margin-top: 36px; } .vc-item { display: flex; gap: 16px; align-items: flex-start; } .vc-icon-col { width: 40px; height: 40px; border-radius: 10px; background: var(--blue-soft); color: var(--blue); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .vc-body h3 { font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 6px; } .vc-body p { font-size: 13px; color: var(--muted); line-height: 1.7; margin-bottom: 8px; } .vc-impact { font-size: 12px; font-weight: 600; color: var(--blue); background: var(--blue-soft); display: inline-block; padding: 4px 12px; border-radius: 20px; } /* ── EBITDA model card ── */ .ebitda-model { background: var(--navy); border-radius: 16px; padding: 36px; color: white; } .em-title { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 28px; } .em-section { margin-bottom: 20px; } .em-section-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.3); margin-bottom: 12px; } .em-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.06); } .em-label { font-size: 13px; color: rgba(255,255,255,.7); } .em-val { font-size: 14px; font-weight: 600; } .em-val.pos { color: #2dd4bf; } .em-val.neg { color: #f87171; } .em-val.neu { color: white; } .em-total { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; padding-top: 16px; border-top: 2px solid rgba(255,255,255,.12); } .em-total-label { font-size: 14px; font-weight: 600; color: white; } .em-total-val { font-size: 24px; font-weight: 800; color: #2dd4bf; } .em-multiple { display: flex; gap: 20px; margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.08); } .em-mult-item { flex: 1; text-align: center; background: rgba(255,255,255,.06); border-radius: 10px; padding: 16px; } .em-mult-val { font-size: 28px; font-weight: 800; color: white; line-height: 1; margin-bottom: 4px; } .em-mult-val .c { color: #2dd4bf; } .em-mult-lbl { font-size: 11px; color: rgba(255,255,255,.4); } /* ── Risk grid (navy section) ── */ .risk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; } .risk-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 28px 24px; } .risk-icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(16,94,250,.15); color: var(--blue); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .risk-card h3 { font-size: 16px; font-weight: 700; color: white; margin-bottom: 10px; } .risk-card p { font-size: 13px; color: rgba(255,255,255,.5); line-height: 1.7; margin-bottom: 14px; } .risk-tag { display: inline-block; font-size: 11px; font-weight: 600; color: #2dd4bf; background: rgba(45,212,191,.1); padding: 4px 12px; border-radius: 20px; } /* ── Benchmark grid ── */ .bench-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 48px; } .bench-card { background: white; border: 1px solid var(--border); border-radius: 14px; padding: 28px 24px; text-align: center; } .bench-val { font-size: 36px; font-weight: 800; color: var(--blue); letter-spacing: -1px; line-height: 1; margin-bottom: 10px; } .bench-lbl { font-size: 13px; color: var(--navy); font-weight: 500; line-height: 1.4; margin-bottom: 8px; } .bench-src { font-size: 11px; color: var(--muted); } /* ── Due diligence section ── */ .dd-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; } .dd-list { display: flex; flex-direction: column; gap: 20px; margin-top: 32px; } .dd-item { display: flex; gap: 14px; align-items: flex-start; } .dd-check { width: 28px; height: 28px; border-radius: 8px; background: rgba(16,94,250,.15); color: var(--blue); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; font-weight: 700; } .dd-text h3, .dd-text h4 { font-size: 14px; font-weight: 700; color: white; margin-bottom: 4px; } .dd-text p { font-size: 13px; color: rgba(255,255,255,.5); line-height: 1.6; } .dd-quote { background: rgba(255,255,255,.06); border-radius: 14px; padding: 28px; margin-bottom: 24px; } .dd-quote-text { font-size: 15px; font-style: italic; color: rgba(255,255,255,.8); line-height: 1.7; margin-bottom: 12px; } .dd-quote-attr { font-size: 12px; color: rgba(255,255,255,.35); } .dd-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .dd-stat { background: rgba(255,255,255,.06); border-radius: 12px; padding: 20px; text-align: center; } .dd-stat-val { font-size: 24px; font-weight: 800; color: #2dd4bf; letter-spacing: -1px; line-height: 1; margin-bottom: 6px; } .dd-stat-lbl { font-size: 11px; color: rgba(255,255,255,.5); } /* ── Authority / market context grid ── */ .auth-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 48px; } .auth-card { background: white; border: 1px solid var(--border); border-radius: 14px; padding: 28px; } .auth-logo { height: 40px; object-fit: contain; margin-bottom: 16px; display: block; } .auth-src { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); margin-bottom: 12px; } .auth-card p { font-size: 14px; color: var(--muted); line-height: 1.7; } .auth-link { display: inline-block; margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--blue); text-decoration: none; } .auth-link:hover { text-decoration: underline; } .auth-note { margin-top: 32px; font-size: 15px; font-weight: 300; color: var(--muted); text-align: center; font-style: italic; } /* ── CTA points (PE page) ── */ .cta-pts { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .cta-pts li { font-size: 13px; line-height: 1.6; padding-left: 20px; position: relative; } .cta-pts li::before { content: ''; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); } .cta-dark .cta-pts li { color: rgba(255,255,255,.6); } .cta-dark .cta-pts li::before { background: var(--blue); } .cta-light .cta-pts li { color: var(--muted); } /* ── Nav link helper ── */ .nav-link { text-decoration: none; } /* ── PE page responsive ── */ @media (max-width: 900px) { .thesis-grid { grid-template-columns: 1fr; } .vc-grid { grid-template-columns: 1fr; gap: 40px; } .risk-grid { grid-template-columns: 1fr; } .bench-grid { grid-template-columns: 1fr 1fr; } .dd-cols { grid-template-columns: 1fr; gap: 40px; } .auth-grid { grid-template-columns: 1fr; } .risk-card[style*="grid-column"] { grid-column: auto !important; max-width: none !important; } } @media (max-width: 768px) { .hamburger { display: flex; } .hero-inner { flex-direction: column; } .val-card { max-width: 100%; margin-top: 32px; } .clients { padding: 24px 20px; } .clients-inner { flex-direction: column; align-items: flex-start; gap: 16px; } .hero-trust { flex-direction: column; align-items: flex-start; } .bench-grid { grid-template-columns: 1fr; } .dd-stats { grid-template-columns: 1fr; } .cta-grid { grid-template-columns: 1fr; } } /* ====================================================== RESOURCES PAGE ====================================================== */ .sec-header { margin-bottom: 48px; } .sec-count { font-size: 13px; color: var(--muted); font-weight: 300; margin-top: 6px; } .nav-menu a.active { opacity: 1; font-weight: 600; } .hero-counts { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; margin-top: 8px; } .hero-count { text-align: center; padding: 20px 12px; background: var(--grey); border-radius: 12px; border: 1px solid var(--border); } .hero-count-val { font-size: 28px; font-weight: 700; color: var(--blue); letter-spacing: -1px; line-height: 1; margin-bottom: 6px; } .hero-count-lbl { font-size: 12px; color: var(--navy); font-weight: 400; } /* -- Event announcement banner (top of page) -- */ .event-banner { background: var(--navy); padding: 18px var(--px); position: relative; overflow: hidden; } .event-banner::before { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 40%; background: radial-gradient(ellipse at 90% 50%, rgba(16,94,250,.15) 0%, transparent 65%); pointer-events: none; } .event-inner { max-width: var(--max-w); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; position: relative; z-index: 1; } .ev-left { display: flex; align-items: center; gap: 16px; } .ev-badge { display: flex; flex-direction: column; align-items: center; min-width: 62px; padding: 8px 10px; background: rgba(16,94,250,.15); border: 1px solid rgba(16,94,250,.3); border-radius: 10px; } .ev-badge-month { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue); line-height: 1; } .ev-badge-day { font-size: 20px; font-weight: 700; color: var(--white); line-height: 1.2; font-family: 'Urbanist', sans-serif; } .ev-badge-city { font-size: 10px; font-weight: 500; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: 0.06em; line-height: 1; } .ev-text h3, .ev-text h4 { font-size: 15px; color: var(--white); margin-bottom: 2px; } .ev-text p { font-size: 13px; color: rgba(255,255,255,.55); line-height: 1.4; margin: 0; } .ev-text .hl { color: rgba(255,255,255,.75); font-weight: 500; } .ev-btns { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .ev-btn-primary { display: inline-flex; align-items: center; gap: 6px; background: var(--blue); color: var(--white); padding: 9px 20px; border-radius: 999px; font-size: 13px; font-weight: 600; text-decoration: none; transition: background .15s; white-space: nowrap; } .ev-btn-primary:hover { background: var(--blue-hover); } .ev-btn-ghost { display: inline-flex; align-items: center; gap: 6px; background: transparent; color: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.2); padding: 9px 20px; border-radius: 999px; font-size: 13px; font-weight: 500; text-decoration: none; transition: border-color .15s, color .15s; white-space: nowrap; } .ev-btn-ghost:hover { border-color: rgba(255,255,255,.5); color: var(--white); } @media (max-width: 960px) { .event-banner { padding: 16px 20px; } .event-inner { flex-direction: column; align-items: flex-start; gap: 14px; } .ev-btns { width: 100%; } } @media (max-width: 480px) { .ev-btns { flex-direction: column; } .ev-btn-primary, .ev-btn-ghost { width: 100%; justify-content: center; } } .events-banner { background: var(--navy); padding: 64px 48px; position: relative; overflow: hidden; } .events-banner::before { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 55%; background: radial-gradient(ellipse at 85% 50%, rgba(16,94,250,.18) 0%, transparent 60%); pointer-events: none; } .events-banner-inner { max-width: var(--max-w); margin: 0 auto; position: relative; z-index: 1; } .events-banner .overline { color: var(--blue); } .events-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 24px; } .event-card { display: block; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 24px; text-decoration: none; transition: background .2s, border-color .2s, transform .2s; } .event-card:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); transform: translateY(-3px); } .event-flag { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); background: rgba(16,94,250,.15); padding: 3px 10px; border-radius: 20px; margin-bottom: 12px; } .event-card h3 { font-size: 16px; font-weight: 700; color: white; margin-bottom: 8px; letter-spacing: -.2px; } .event-date { font-size: 13px; color: rgba(255,255,255,.55); margin-bottom: 4px; } .event-loc { font-size: 13px; color: rgba(255,255,255,.35); margin-bottom: 14px; } .event-link { font-size: 13px; font-weight: 600; color: var(--blue); } .event-grid { display: flex; flex-direction: column; gap: 20px; margin-top: 32px; } .sec .event-card { display: flex; gap: 28px; background: white; border: 1px solid var(--border); border-radius: 14px; padding: 28px 32px; text-decoration: none; transition: border-color .2s, box-shadow .2s; } .sec .event-card:hover { border-color: var(--blue); box-shadow: 0 4px 20px rgba(16,94,250,.08); } .event-date-block { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 64px; padding: 8px 0; border-right: 2px solid var(--blue); padding-right: 24px; } .event-month { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--blue); } .event-day { font-size: 26px; font-weight: 800; color: var(--navy); font-family: 'Urbanist', sans-serif; line-height: 1.1; } .event-info h3 { font-size: 18px; font-weight: 700; color: var(--navy); margin-bottom: 4px; } .event-location { font-size: 13px; font-weight: 500; color: var(--muted); margin-bottom: 10px; } .event-info > p { font-size: 14px; line-height: 1.6; color: #444; margin-bottom: 14px; } .event-actions { display: flex; gap: 20px; } .event-actions .event-link { font-size: 13px; font-weight: 600; color: var(--blue); text-decoration: none; } .event-actions .event-link:hover { text-decoration: underline; } @media (max-width: 640px) { .sec .event-card { flex-direction: column; gap: 16px; padding: 20px; } .event-date-block { flex-direction: row; gap: 8px; border-right: none; border-bottom: 2px solid var(--blue); padding-right: 0; padding-bottom: 12px; } } /* Timeline */ .tl { position: relative; padding-left: 32px; margin-top: 40px; } .tl::before { content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, var(--blue) 0%, rgba(16,94,250,.12) 100%); } .tl-dot--now { background: var(--blue); border-color: var(--blue); box-shadow: 0 0 0 4px rgba(16,94,250,.15); } .tl-dot--origin { background: var(--navy); border-color: var(--navy); } .tl-item { position: relative; padding-bottom: 36px; } .tl-item:last-child { padding-bottom: 0; } .tl-dot { position: absolute; left: -32px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: white; border: 3px solid var(--blue); z-index: 1; transition: background .2s; } .tl-item:hover .tl-dot { background: var(--blue); } .tl-content { padding-left: 8px; } .tl-year { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); background: rgba(16,94,250,.08); padding: 3px 10px; border-radius: 20px; margin-bottom: 8px; } .tl-content h3 { font-size: 17px; font-weight: 700; color: var(--navy); margin-bottom: 6px; letter-spacing: -.2px; } .tl-content p { font-size: 14px; line-height: 1.6; color: #555; margin-bottom: 8px; } .tl-link { display: inline-block; font-size: 13px; font-weight: 600; color: var(--blue); text-decoration: none; background: rgba(16,94,250,.08); padding: 6px 14px; border-radius: 8px; margin-top: 4px; transition: background .15s, color .15s; } .tl-link:hover { background: var(--blue); color: white; } @media (max-width: 768px) { .tl { padding-left: 24px; } .tl-dot { left: -24px; width: 12px; height: 12px; border-width: 2px; } .tl::before { left: 5px; } } .filter-bar { background: white; border-bottom: 1px solid var(--border); padding: 0 48px; position: sticky; top: 72px; z-index: 90; } .filter-bar-inner { max-width: var(--max-w); margin: 0 auto; display: flex; gap: 4px; overflow-x: auto; padding: 12px 0; -webkit-overflow-scrolling: touch; } .filter-tab { background: none; border: 1px solid var(--border); border-radius: 999px; padding: 7px 18px; font-size: 13px; font-weight: 500; color: var(--muted); cursor: pointer; white-space: nowrap; transition: background .15s, color .15s, border-color .15s; font-family: inherit; } .filter-tab:hover { border-color: var(--blue); color: var(--navy); } .filter-tab.active { background: var(--blue); color: white; border-color: var(--blue); font-weight: 600; } .shortcut-bar-inner { max-width: var(--max-w); margin: 0 auto; display: flex; gap: 10px; align-items: center; padding: 10px 0 14px; border-top: 1px dashed var(--border); flex-wrap: wrap; } .shortcut-label { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-right: 4px; } .shortcut-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--navy); background: var(--grey); border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px; text-decoration: none; transition: background .15s, border-color .15s, color .15s; } .shortcut-pill:hover { background: white; border-color: var(--blue); color: var(--blue); } .shortcut-arrow { color: var(--blue); font-weight: 600; transition: transform .15s; } .shortcut-pill:hover .shortcut-arrow { transform: translateX(2px); } .featured { padding: 96px 48px; background: white; } .featured-inner { max-width: var(--max-w); margin: 0 auto; } .featured-card { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 64px; align-items: center; background: var(--navy); border-radius: 20px; padding: 52px; position: relative; overflow: hidden; } .featured-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 50%, rgba(16,94,250,.18) 0%, transparent 60%); pointer-events: none; } .featured-card > * { position: relative; z-index: 1; } .featured-badge { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); background: rgba(16,94,250,.15); padding: 4px 12px; border-radius: 20px; margin-bottom: 18px; } .featured-card h2 { font-size: clamp(22px, 2.5vw, 30px); font-weight: 700; color: white; letter-spacing: -.5px; line-height: 1.2; margin-bottom: 16px; } .featured-card p { font-size: 14px; color: rgba(255,255,255,.55); line-height: 1.8; font-weight: 300; margin-bottom: 16px; } .featured-date { font-size: 12px; color: rgba(255,255,255,.3); display: block; margin-bottom: 12px; } .featured-link { font-size: 14px; font-weight: 600; color: var(--blue); text-decoration: none; } .featured-link:hover { text-decoration: underline; } .featured-right { display: flex; flex-direction: column; gap: 16px; } .featured-stat { display: flex; flex-direction: column; gap: 12px; } .featured-stat-item { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 20px; text-align: center; } .featured-stat-val { font-size: 32px; font-weight: 700; color: var(--blue); letter-spacing: -1.5px; line-height: 1; margin-bottom: 4px; } .featured-stat-lbl { font-size: 12px; color: rgba(255,255,255,.4); } .blog-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; } .blog-card { display: flex; flex-direction: column; background: white; border: 1px solid var(--border); border-radius: 14px; padding: 28px 24px; text-decoration: none; transition: transform .2s, box-shadow .2s; } .blog-card:hover { transform: translateY(-3px); box-shadow: 0 10px 32px rgba(17,26,81,.08); } .blog-cat { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); margin-bottom: 10px; display: block; } .blog-card h3 { font-size: 16px; font-weight: 700; color: var(--navy); letter-spacing: -.2px; line-height: 1.35; margin-bottom: 10px; } .blog-card p { font-size: 13px; color: var(--muted); line-height: 1.7; font-weight: 300; flex: 1; } .blog-card .blog-tags { margin-top: 14px; } .blog-date { font-size: 11px; color: var(--muted); margin-top: 10px; display: block; } .timeline { display: flex; flex-direction: column; gap: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); } .timeline-item { display: grid; grid-template-columns: 200px 1fr; border-bottom: 1px solid var(--border); } .timeline-item:last-child { border-bottom: none; } .tl-date { padding: 18px 22px; font-size: 13px; font-weight: 600; color: var(--navy); background: var(--grey); display: flex; align-items: center; gap: 12px; white-space: nowrap; } .tl-nr { font-size: 11px; font-weight: 400; color: var(--muted); } .tl-content { padding: 18px 22px; background: white; } .tl-content h3 { font-size: 15px; font-weight: 700; color: var(--navy); letter-spacing: -.2px; margin-bottom: 6px; line-height: 1.4; } .tl-content p { font-size: 13px; color: var(--muted); line-height: 1.7; font-weight: 300; margin-bottom: 10px; } .tl-pdf { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--blue); text-decoration: none; transition: opacity .15s; } .tl-pdf:hover { opacity: 0.7; } .tl-pdf svg { width: 16px; height: 16px; flex-shrink: 0; } .li-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; } .sec .li-card { border: 1px solid var(--border); border-radius: 12px; padding: 22px; background: white; margin: 0; display: flex; flex-direction: column; } .li-author { font-size: 12px; font-weight: 700; color: var(--navy); display: block; margin-bottom: 2px; } .sec .li-date { font-size: 11px; color: var(--muted); display: block; margin-bottom: 12px; } .sec .li-card p { font-size: 13px; color: var(--muted); line-height: 1.7; font-weight: 300; flex: 1; } .sec .li-link { margin-top: 14px; } .de-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; } .de-card { display: flex; flex-direction: column; background: white; border: 1px solid var(--border); border-radius: 14px; padding: 24px; text-decoration: none; transition: transform .2s, box-shadow .2s; } .de-card:hover { transform: translateY(-3px); box-shadow: 0 10px 32px rgba(17,26,81,.08); } .de-source { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); margin-bottom: 10px; display: block; } .de-card h3 { font-size: 15px; font-weight: 700; color: var(--navy); letter-spacing: -.2px; line-height: 1.35; margin-bottom: 8px; } .de-card p { font-size: 13px; color: var(--muted); line-height: 1.7; font-weight: 300; flex: 1; } .de-link { font-size: 13px; font-weight: 600; color: var(--blue); margin-top: 14px; display: block; } .more-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; } .more-card { display: flex; flex-direction: column; background: white; border: 1px solid var(--border); border-radius: 14px; padding: 32px 28px; text-decoration: none; transition: transform .2s, box-shadow .2s, border-color .2s; } .more-card:hover { transform: translateY(-3px); box-shadow: 0 10px 32px rgba(17,26,81,.08); border-color: var(--blue); } .more-ol { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); margin-bottom: 12px; display: block; } .more-card h3 { font-size: 20px; font-weight: 700; color: var(--navy); letter-spacing: -.3px; line-height: 1.3; margin-bottom: 10px; } .more-card p { font-size: 14px; color: var(--muted); line-height: 1.65; font-weight: 300; flex: 1; margin-bottom: 16px; } .more-link { font-size: 13px; font-weight: 600; color: var(--blue); display: block; } .coming-soon { text-align: center; padding: 52px 28px; background: var(--grey); border-radius: 14px; border: 1px solid var(--border); } .coming-soon-badge { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); background: white; border: 1px solid var(--border); padding: 4px 14px; border-radius: 20px; margin-bottom: 16px; } .coming-soon h3 { font-size: 17px; font-weight: 700; color: var(--navy); letter-spacing: -.3px; margin-bottom: 8px; } .coming-soon p { font-size: 13px; color: var(--muted); font-weight: 300; } @media (max-width: 960px) { .hero-counts { grid-template-columns: repeat(2,1fr); } .events-banner { padding: 52px 20px; } .events-grid { grid-template-columns: 1fr; } .filter-bar { padding: 0 20px; } .featured { padding: 68px 20px; } .featured-card { grid-template-columns: 1fr; gap: 32px; padding: 36px 28px; } .blog-grid { grid-template-columns: 1fr; } .timeline-item { grid-template-columns: 1fr; } .tl-date { border-bottom: 1px solid var(--border); } .li-grid { grid-template-columns: 1fr; } .de-grid { grid-template-columns: 1fr; } .more-grid { grid-template-columns: 1fr; } .shortcut-bar-inner { padding: 10px 0 12px; gap: 8px; } } @media (max-width: 600px) { .hero-counts { grid-template-columns: 1fr 1fr; gap: 10px; } .featured-card { padding: 28px 22px; } } .hero--resources { padding: 40px 48px 32px; } .hero--resources .hero-inner { grid-template-columns: 1fr; max-width: 720px; text-align: center; } .hero--resources .hero-sub { max-width: 100%; margin-left: auto; margin-right: auto; } .hero--resources .hero-pill { justify-content: center; } /* ====================================================== Over Ons Page ====================================================== */ /* -- Nav utility classes -- */ .nav-link { text-decoration: none; font-size: 14px; font-weight: 400; color: #ffffff; opacity: 0.7; transition: opacity .15s; } .nav-link:hover { opacity: 1; } /* nav-right already defined at top of file */ /* hamburger already defined at top of file */ /* -- Hero Stats -- */ .hero-stats { background: var(--navy); border-radius: 16px; padding: 32px; } .hs-label { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.35); margin-bottom: 20px; } .hs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .hs-val { font-size: 32px; font-weight: 800; color: #fff; letter-spacing: -1.5px; line-height: 1; margin-bottom: 6px; font-family: 'Urbanist', sans-serif; } .hs-val .a { color: var(--blue); } .hs-desc { font-size: 12px; color: rgba(255,255,255,.5); line-height: 1.5; font-weight: 300; } @media (max-width: 768px) { .hs-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .hero-stats { padding: 20px; } .hs-val { font-size: 24px; } } /* -- Verhaal section -- */ .verhaal-p { font-size: 15px; font-weight: 300; line-height: 1.85; color: var(--muted); margin-bottom: 16px; } .verhaal-p strong { color: var(--navy); font-weight: 600; } .verhaal-quote { margin-top: 24px; padding: 22px 24px; background: var(--navy); border-radius: 12px; font-size: 15px; font-style: italic; color: rgba(255,255,255,.75); line-height: 1.75; } .verhaal-quote .attr { margin-top: 12px; font-size: 11px; color: var(--blue); font-style: normal; font-weight: 700; letter-spacing: .04em; } /* -- Vijfde Golf timeline -- */ .vijfde-golf { background: white; border: 1px solid var(--border); border-radius: 16px; padding: 32px; } .vg-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); margin-bottom: 20px; } .vg-waves { display: flex; flex-direction: column; gap: 0; } .vg-wave { display: flex; align-items: flex-start; gap: 16px; padding: 14px 0; border-top: 1px solid var(--border); } .vg-wave:first-child { border-top: none; } .vg-num { width: 30px; height: 30px; border-radius: 50%; background: var(--grey); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--muted); flex-shrink: 0; } .vg-wave.active .vg-num { background: var(--blue); color: white; } .vg-text { font-size: 13px; color: var(--muted); line-height: 1.6; font-weight: 300; padding-top: 4px; } .vg-text strong { color: var(--navy); font-weight: 600; } .vg-wave.active .vg-text { color: var(--navy); } /* -- People / Team grid -- */ .people-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; } .person-card { background: var(--white); border: 1px solid var(--border); border-radius: 14px; padding: 32px 24px; text-align: center; transition: transform .2s, box-shadow .2s; } .person-card:hover { transform: translateY(-3px); box-shadow: 0 10px 32px rgba(17,26,81,.08); } .person-avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--blue); color: white; font-size: 18px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-family: 'Outfit', sans-serif; } .person-card h3 { font-size: 17px; font-weight: 700; color: var(--navy); margin-bottom: 4px; letter-spacing: -.3px; } .person-role { display: block; font-size: 13px; font-weight: 500; color: var(--blue); margin-bottom: 14px; } .person-card p { font-size: 13px; color: var(--muted); line-height: 1.7; font-weight: 300; margin-bottom: 16px; } .person-tag { display: inline-block; font-size: 11px; font-weight: 500; color: var(--blue); background: var(--blue-soft); padding: 4px 12px; border-radius: 20px; } /* -- Investor card -- */ .investor-card { background: var(--white); border: 1px solid var(--border); border-radius: 14px; padding: 32px; margin-top: 40px; max-width: 640px; } .investor-card-top { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; } .investor-logo { height: 48px; width: auto; filter: grayscale(1); opacity: .7; transition: filter .2s, opacity .2s; } .investor-card:hover .investor-logo { filter: grayscale(0); opacity: 1; } .investor-meta h3 { font-size: 17px; font-weight: 700; color: var(--navy); margin-bottom: 2px; letter-spacing: -.3px; } .investor-card blockquote { margin: 0 0 20px; padding: 16px 20px; border-left: 3px solid var(--blue); border-radius: 0 8px 8px 0; background: var(--grey); font-size: 14px; font-style: italic; color: var(--navy); line-height: 1.75; } .investor-card blockquote p { margin-bottom: 8px; } .investor-card blockquote cite { font-size: 12px; font-weight: 600; font-style: normal; color: var(--blue); } .investor-links { display: flex; gap: 24px; flex-wrap: wrap; } .investor-links a { font-size: 13px; font-weight: 500; color: var(--blue); text-decoration: none; } .investor-links a:hover { text-decoration: underline; } /* -- Erik de Voogd spotlight card -- */ .erik-card { margin-top: 56px; background: var(--navy); border-radius: 16px; padding: 40px; color: white; position: relative; overflow: hidden; } .erik-card::before { content: ''; position: absolute; right: -10%; top: -30%; width: 50%; height: 160%; background: radial-gradient(ellipse at center, rgba(16,94,250,.12) 0%, transparent 60%); pointer-events: none; } .erik-card h3 { font-size: 22px; font-weight: 700; letter-spacing: -.5px; margin-bottom: 8px; position: relative; } .erik-badge { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); background: rgba(16,94,250,.15); padding: 5px 14px; border-radius: 20px; margin-bottom: 16px; } .subt { font-size: 14px; font-weight: 300; color: rgba(255,255,255,.5); margin-bottom: 28px; line-height: 1.6; } .erik-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; position: relative; } .erik-quote-main { font-size: 16px; font-style: italic; color: rgba(255,255,255,.75); line-height: 1.75; margin-bottom: 12px; } .erik-attr { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--blue); font-style: normal; } /* Erik bullets */ .erik-bullets { display: flex; flex-direction: column; gap: 16px; } .erik-bullet { display: flex; align-items: flex-start; gap: 12px; } .eb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); flex-shrink: 0; margin-top: 6px; } .eb-text { font-size: 14px; color: rgba(255,255,255,.7); line-height: 1.65; font-weight: 300; } .eb-text strong { color: white; font-weight: 600; } /* -- Missie founders (over-ons) -- */ .missie-photo-wrap { margin-top: 20px; height: 280px; border-radius: 10px; overflow: hidden; } .missie-photo-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; } .missie-founders { display: flex; flex-direction: column; gap: 24px; margin-top: 24px; } .missie-founder { display: flex; align-items: flex-start; gap: 16px; padding: 24px; background: var(--accent-bg, #f4f7ff); border-left: 3px solid var(--blue, #105EFA); border-radius: 10px; } .missie-founder .person-linkedin { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; font-size: 13px; font-weight: 500; color: var(--blue); text-decoration: none; } .missie-founder .person-linkedin:hover { text-decoration: underline; } .missie-founder .person-avatar { margin: 0; flex-shrink: 0; width: 48px; height: 48px; font-size: 15px; } .missie-founder h3 { font-size: 16px; font-weight: 700; color: var(--navy); letter-spacing: -.3px; } .missie-founder .person-role { margin-bottom: 0; } .missie-founder p { color: var(--muted, #555); line-height: 1.65; } /* -- Erik vision card (over-ons visie) -- */ .erik-vision-card { background: var(--navy); border-radius: 12px; padding: 24px; color: white; } .erik-vision-card .person-avatar { margin: 0; width: 48px; height: 48px; font-size: 15px; } .erik-vision-card h3 { font-size: 16px; font-weight: 700; color: white; letter-spacing: -.3px; } .erik-vision-card .person-role { color: rgba(255,255,255,.5); margin-bottom: 0; } .erik-vision-card p { color: rgba(255,255,255,.7); font-weight: 300; } @media (max-width: 768px) { .missie-founder { flex-direction: column; } } /* -- Article download link -- */ .article-download-link { display: flex; align-items: center; gap: 14px; padding: 16px 20px; background: rgba(16,94,250,.08); border: 1px solid rgba(16,94,250,.15); border-radius: 10px; text-decoration: none; color: var(--blue); transition: background .15s, border-color .15s; } .article-download-link:hover { background: rgba(16,94,250,.14); border-color: rgba(16,94,250,.3); } .article-download-title { font-size: 14px; font-weight: 600; color: var(--navy); line-height: 1.3; } .article-download-meta { font-size: 12px; font-weight: 400; color: var(--muted, #666); margin-top: 2px; } /* -- Werken bij Hero banner -- */ .wb-hero { background: var(--navy); border-radius: 16px; padding: 56px 48px; margin-bottom: 40px; position: relative; overflow: hidden; } .wb-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 50%, rgba(16,94,250,.1) 0%, transparent 50%), radial-gradient(ellipse at 80% 30%, rgba(16,94,250,.08) 0%, transparent 45%); pointer-events: none; } .wb-hero-inner { position: relative; max-width: 640px; } .wb-hero-inner h2 { font-size: clamp(24px, 3vw, 36px); font-weight: 700; letter-spacing: -1px; line-height: 1.15; color: white; margin-bottom: 16px; } .wb-hero-inner h2 .c { color: var(--blue); } .wb-hero-inner p { font-size: 15px; font-weight: 300; color: rgba(255,255,255,.55); line-height: 1.8; margin-bottom: 28px; } .wb-hero-btn { display: inline-flex; align-items: center; gap: 7px; background: var(--blue); color: var(--white); padding: 13px 24px; border-radius: 999px; font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 600; text-decoration: none; transition: background .15s; } .wb-hero-btn:hover { background: var(--blue-hover); } /* -- Foto strip -- */ .wb-foto-strip { margin-bottom: 48px; overflow: hidden; border-radius: 12px; } .wb-foto-strip-inner { display: flex; gap: 6px; animation: foto-scroll 30s linear infinite; width: max-content; } @keyframes foto-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .wb-foto { width: 120px; height: 120px; border-radius: 10px; overflow: hidden; flex-shrink: 0; } .wb-foto img { width: 100%; height: 100%; object-fit: cover; display: block; } /* -- Voordelen grid (werken bij) -- */ .wb-voordelen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 56px; } .wb-card { background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 28px 22px; transition: transform .2s, box-shadow .2s; } .wb-card:hover { transform: translateY(-3px); box-shadow: 0 10px 32px rgba(17,26,81,.08); } .wb-card .wb-icon { width: 40px; height: 40px; background: var(--blue-soft); border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; color: var(--blue); } .wb-card h4 { font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 8px; letter-spacing: -.2px; } .wb-card p { font-size: 13px; color: var(--muted); line-height: 1.7; font-weight: 300; } /* -- Vacature header and list -- */ .wb-vac-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .wb-vac-header h3 { font-size: 22px; font-weight: 700; color: var(--navy); letter-spacing: -.5px; } .wb-vac-link { font-size: 14px; font-weight: 500; color: var(--blue); text-decoration: none; transition: opacity .15s; } .wb-vac-link:hover { opacity: 0.8; } .vacature-list { display: flex; flex-direction: column; gap: 0; } .vacature { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; background: var(--white); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 8px; text-decoration: none; transition: box-shadow .2s, border-color .2s; } .vacature:hover { box-shadow: 0 4px 16px rgba(17,26,81,.06); border-color: rgba(16,94,250,.2); } .vac-left h4 { font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 4px; } .vac-left span { font-size: 13px; color: var(--muted); font-weight: 300; } /* ── Process Steps ── */ .wb-process h3 { margin-bottom: 32px; } .wb-process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .wb-process-step { display: flex; flex-direction: column; gap: 16px; } .wb-step-nr { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--primary); color: #fff; font-family: 'Urbanist', sans-serif; font-weight: 700; font-size: 1.125rem; flex-shrink: 0; } .wb-process-step h4 { margin: 0 0 4px; font-size: 1.125rem; } .wb-process-step p { margin: 0; font-size: 0.938rem; color: #444; line-height: 1.6; } .vac-tag { font-size: 11px; font-weight: 600; color: var(--blue); background: var(--blue-soft); padding: 5px 14px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; } /* ====================================================== Over Ons Responsive ====================================================== */ @media (max-width: 960px) { .hamburger { display: flex; } .hero-stats { margin-top: 8px; } .hs-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } .people-grid { grid-template-columns: repeat(2, 1fr); } .erik-grid { grid-template-columns: 1fr; gap: 24px; } .wb-voordelen { grid-template-columns: repeat(2, 1fr); } .wb-hero { padding: 40px 28px; } } @media (max-width: 768px) { .hs-grid { grid-template-columns: repeat(2, 1fr); } .hs-val { font-size: 26px; } .people-grid { grid-template-columns: 1fr; } .erik-card { padding: 28px 20px; } .erik-grid { grid-template-columns: 1fr; } .wb-voordelen { grid-template-columns: 1fr; } .wb-hero { padding: 32px 20px; } .wb-process-steps { grid-template-columns: repeat(2, 1fr); } .wb-vac-header { flex-direction: column; align-items: flex-start; gap: 8px; } .wb-foto { width: 90px; height: 90px; } .vacature { flex-direction: column; align-items: flex-start; gap: 12px; } } @media (max-width: 600px) { .wb-process-steps { grid-template-columns: 1fr; } .hs-grid { grid-template-columns: 1fr 1fr; gap: 12px; } .hero-stats { padding: 24px 20px; } .vijfde-golf { padding: 24px 20px; } } .event-logo-wrap { height: 48px; width: 80px; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 8px; padding: 6px; margin-bottom: 14px; overflow: hidden; } .event-logo-wrap img { max-height: 36px; max-width: 68px; width: auto; object-fit: contain; } /* ══════════════════════════════════════════════════ Versicherer Page — AO Diagram ══════════════════════════════════════════════════ */ .ao-diagram { display: flex; flex-direction: column; gap: 0; } .ao-level { background: var(--grey); border: 1px solid var(--border); border-radius: 12px; padding: 18px 22px; } .ao-level-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; } .ao-boxes { display: flex; flex-wrap: wrap; gap: 8px; } .ao-box { font-size: 12px; font-weight: 600; padding: 7px 14px; border-radius: 8px; white-space: nowrap; } .ao-box.zentrale { background: var(--navy); color: #fff; } .ao-box.ki { background: var(--blue); color: #fff; } .ao-box.region { background: rgba(16,94,250,.1); color: var(--blue); border: 1px solid rgba(16,94,250,.18); } .ao-box.agentur { background: rgba(0,177,174,.1); color: var(--blue); border: 1px solid rgba(0,177,174,.2); } .ao-arrow { text-align: center; font-size: 13px; color: var(--muted); padding: 8px 0; font-weight: 400; } .ao-highlight { margin-top: 14px; background: rgba(16,94,250,.04); border: 1px solid rgba(16,94,250,.12); border-radius: 10px; padding: 16px 18px; font-size: 13px; color: var(--navy); line-height: 1.7; } /* ══════════════════════════════════════════════════ Versicherer Page — Challenge Grid ══════════════════════════════════════════════════ */ .challenge-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 48px; } .ch-card { padding: 28px 26px; background: white; border-radius: 12px; border: 1px solid var(--border); border-top: 3px solid var(--blue); } .ch-card.blue { border-top-color: var(--navy); } .ch-card.red { border-top-color: var(--red); } .ch-card.teal { border-top-color: var(--blue); } .ch-card h3 { font-size: 15px; font-weight: 700; margin-bottom: 8px; letter-spacing: -.2px; } .ch-card p { font-size: 13px; color: var(--muted); line-height: 1.7; font-weight: 300; } .ch-stat { margin-top: 14px; font-size: 12px; font-weight: 600; color: var(--blue); padding: 8px 12px; background: var(--blue-soft); border-radius: 8px; } /* ══════════════════════════════════════════════════ Versicherer Page — Cockpit Grid ══════════════════════════════════════════════════ */ .cockpit-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 48px; } .cockpit-card { background: white; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; } .cc-head { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--border); background: var(--grey); } .cc-head h4 { font-size: 14px; font-weight: 700; color: var(--navy); margin-bottom: 2px; } .cc-head span { font-size: 11px; color: var(--muted); font-weight: 400; } .cc-body { padding: 16px 22px; } .cc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(17,26,81,.04); } .cc-row:last-child { border-bottom: none; } .cc-row-left { font-size: 13px; color: var(--navy); font-weight: 400; } .cc-row-right { font-size: 12px; font-weight: 600; white-space: nowrap; } .r-red { color: var(--red); } .r-green { color: var(--green); } .r-amber { color: var(--yellow); } .cc-bar { height: 5px; background: var(--grey); border-radius: 3px; margin-top: 6px; overflow: hidden; } .cc-bar-fill { height: 100%; border-radius: 3px; transition: width .6s ease; } /* ══════════════════════════════════════════════════ Versicherer Page — Business Case ══════════════════════════════════════════════════ */ .bc-two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 48px; } .bc-calc { background: var(--grey); border: 1px solid var(--border); border-radius: 14px; padding: 32px 28px; } .bc-calc h3 { font-size: 16px; font-weight: 700; color: var(--navy); margin-bottom: 20px; } .bc-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(17,26,81,.06); font-size: 13px; } .bc-row:last-child { border-bottom: none; } .bc-lbl { color: var(--muted); font-weight: 400; } .bc-val { font-weight: 600; color: var(--navy); } .bc-val.pos { color: var(--green); } .bc-val.neg { color: var(--red); } .bc-total { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding: 16px 18px; background: var(--navy); border-radius: 10px; } .bc-total-lbl { font-size: 14px; font-weight: 600; color: rgba(255,255,255,.7); } .bc-total-val { font-size: 28px; font-weight: 800; color: var(--blue); font-family: 'Urbanist', sans-serif; letter-spacing: -1px; } .bc-results { display: flex; flex-direction: column; gap: 14px; } .bc-result { background: var(--grey); border: 1px solid var(--border); border-radius: 12px; padding: 22px 24px; } .bc-result.hl { background: var(--navy); border-color: transparent; } .bc-result.hl .bcr-label { color: var(--blue); } .bc-result.hl .bcr-val { color: #fff; } .bc-result.hl .bcr-desc { color: rgba(255,255,255,.55); } .bcr-label { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; display: block; } .bcr-val { font-size: 24px; font-weight: 800; color: var(--navy); font-family: 'Urbanist', sans-serif; letter-spacing: -1px; margin-bottom: 6px; } .bcr-desc { font-size: 12px; color: var(--muted); line-height: 1.7; font-weight: 300; } /* ══════════════════════════════════════════════════ Versicherer Page — Differentiator Grid ══════════════════════════════════════════════════ */ .diff-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; } .diff-card { padding: 28px 24px; background: white; border: 1px solid var(--border); border-radius: 12px; } .diff-card h3 { font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 8px; letter-spacing: -.2px; } .diff-card p { font-size: 13px; color: var(--muted); line-height: 1.7; font-weight: 300; } .diff-tag { display: inline-block; margin-top: 14px; font-size: 11px; font-weight: 600; color: var(--blue); background: var(--blue-soft); padding: 4px 12px; border-radius: 20px; } /* ══════════════════════════════════════════════════ Versicherer Page — Testimonial & Press ══════════════════════════════════════════════════ */ .testimonial-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 48px; } .test-dark { background: var(--navy); border-radius: 16px; padding: 40px 36px; } .test-quote { font-size: 15px; font-weight: 300; color: rgba(255,255,255,.85); line-height: 1.8; font-style: italic; margin-bottom: 18px; } .test-attr { font-size: 12px; color: rgba(255,255,255,.45); font-weight: 400; display: block; margin-bottom: 28px; } .test-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.08); } .ts-item { text-align: center; } .ts-val { font-size: 24px; font-weight: 800; color: var(--blue); font-family: 'Urbanist', sans-serif; letter-spacing: -1px; margin-bottom: 4px; } .ts-lbl { font-size: 11px; color: rgba(255,255,255,.45); line-height: 1.5; font-weight: 300; } .test-light { background: white; border: 1px solid var(--border); border-radius: 16px; padding: 36px 32px; } .test-light h3 { font-size: 16px; font-weight: 700; color: var(--navy); margin-bottom: 20px; } .press-items { display: flex; flex-direction: column; gap: 10px; } .press-item { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; background: var(--grey); border: 1px solid var(--border); border-radius: 10px; } .press-body h3, .press-body h4 { font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 3px; } .press-body p { font-size: 12px; color: var(--muted); line-height: 1.6; font-weight: 300; } /* ══════════════════════════════════════════════════ Versicherer Page — Responsive ══════════════════════════════════════════════════ */ @media (max-width: 900px) { .challenge-grid, .cockpit-grid, .bc-two, .testimonial-grid { grid-template-columns: 1fr; } .diff-grid { grid-template-columns: repeat(2, 1fr); } .test-stats { grid-template-columns: repeat(3, 1fr); gap: 8px; } } @media (max-width: 600px) { .diff-grid { grid-template-columns: 1fr; } .test-stats { grid-template-columns: 1fr; gap: 16px; } .ao-boxes { flex-direction: column; } .bc-calc { padding: 24px 20px; } .test-dark { padding: 28px 22px; } .test-light { padding: 28px 22px; } } /* ====================================================== NIEUWS DUITSLAND PAGE ====================================================== */ .breadcrumb { background: var(--grey); border-bottom: 1px solid var(--border); padding: 12px 48px; } .breadcrumb-inner { max-width: var(--max-w); margin: 0 auto; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); } .breadcrumb-inner a { color: var(--blue); text-decoration: none; font-weight: 500; } .breadcrumb-inner a:hover { text-decoration: underline; } .breadcrumb-inner span { color: var(--muted); } .hero-date { font-size: 13px; color: var(--muted); margin-top: 16px; font-weight: 400; } .hero-flag { display: flex; gap: 0; width: 80px; height: 52px; border-radius: 8px; overflow: hidden; align-self: center; } .flag-black { flex: 1; background: #000; } .flag-red { flex: 1; background: #DD0000; } .flag-gold { flex: 1; background: #FFCC00; } .media-sec { padding: 72px 48px; background: white; } .media-inner { max-width: var(--max-w); margin: 0 auto; } .media-header { margin-bottom: 48px; } .media-eyebrow { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); margin-bottom: 14px; } .media-title { font-size: clamp(26px, 3.2vw, 42px); font-weight: 700; letter-spacing: -1.2px; line-height: 1.15; color: var(--navy); margin-bottom: 16px; } .media-sub { font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--muted); max-width: 640px; } .media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .media-card { display: flex; flex-direction: column; background: white; border: 1px solid var(--border); border-radius: 14px; padding: 28px 24px; text-decoration: none; transition: transform .2s, box-shadow .2s; } .media-card:hover { transform: translateY(-3px); box-shadow: 0 10px 32px rgba(17,26,81,.08); } .mc-pub { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); margin-bottom: 12px; } .mc-title { font-size: 16px; font-weight: 700; color: var(--navy); letter-spacing: -.2px; line-height: 1.35; margin-bottom: 10px; } .mc-snippet { font-size: 13px; color: var(--muted); line-height: 1.7; font-weight: 300; flex: 1; } .mc-date { font-size: 11px; color: var(--muted); margin-top: 14px; display: block; } .mc-cta { font-size: 13px; font-weight: 600; color: var(--blue); margin-top: 8px; display: block; } @media (max-width: 960px) { .breadcrumb { padding: 12px 20px; } .media-sec { padding: 52px 20px; } .media-grid { grid-template-columns: 1fr; } .hero-flag { width: 60px; height: 40px; } } .hero-photo { display: flex; align-items: center; justify-content: center; } .hero-photo img { width: 100%; max-width: 480px; border-radius: 16px; object-fit: cover; box-shadow: 0 12px 40px rgba(17,26,81,.12); } /* ══════════════════════════════════════════════════ Strukturvertriebe Page ══════════════════════════════════════════════════ */ /* Quote block text/attr */ .quote-text { font-size: 15px; font-style: italic; color: var(--navy); line-height: 1.75; margin-bottom: 8px; } .quote-attr { font-size: 12px; color: var(--muted); font-weight: 500; } /* Challenge grid — amber variant */ .ch-card.amber { border-top-color: var(--yellow); } /* Flow grid (card-based layout for "How it works") */ .flow-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 48px; } .flow-card { background: white; border: 1px solid var(--border); border-radius: 12px; padding: 28px 24px; } .flow-card .flow-num { width: 36px; height: 36px; border-radius: 8px; background: var(--navy); color: rgba(255,255,255,.4); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; margin-bottom: 16px; } .flow-card h3 { font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 8px; letter-spacing: -.2px; } .flow-card p { font-size: 13px; color: var(--muted); line-height: 1.7; font-weight: 300; } /* Benefits section */ .benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; } .benefit-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 32px 28px; text-align: center; } .benefit-val { font-size: 42px; font-weight: 800; color: var(--blue); font-family: 'Urbanist', sans-serif; letter-spacing: -1.5px; line-height: 1; margin-bottom: 8px; } .benefit-label { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 12px; } .benefit-desc { font-size: 13px; color: rgba(255,255,255,.55); line-height: 1.7; font-weight: 300; } /* Modules grid */ .mod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; } .mod-card { background: white; border: 1px solid var(--border); border-radius: 14px; padding: 32px 28px; } .mod-card h3 { font-size: 16px; font-weight: 700; color: var(--navy); margin-bottom: 4px; letter-spacing: -.3px; } .mod-sub { font-size: 12px; font-weight: 600; color: var(--blue); margin-bottom: 12px; } .mod-card p { font-size: 13px; color: var(--muted); line-height: 1.7; font-weight: 300; } /* Hierarchy diagram (Strukturvertriebe) */ .sv-diagram { display: flex; flex-direction: column; gap: 0; } .sv-level { background: var(--grey); border: 1px solid var(--border); border-radius: 12px; padding: 20px 22px; } .sv-level-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; } .sv-boxes { display: flex; gap: 8px; flex-wrap: wrap; } .sv-box { flex: 1; min-width: 120px; padding: 12px 16px; border-radius: 8px; font-size: 12px; font-weight: 600; text-align: center; } .sv-box.zentrale { background: rgba(17,26,81,.08); color: var(--navy); border: 1px solid rgba(17,26,81,.12); } .sv-box.ki { background: var(--blue-soft); color: var(--blue); border: 1px solid rgba(16,94,250,.12); } .sv-box.region { background: rgba(0,177,174,.08); color: var(--blue); border: 1px solid rgba(0,177,174,.15); } .sv-box.berater { background: rgba(0,170,118,.08); color: var(--green); border: 1px solid rgba(0,170,118,.15); } .sv-arrow { text-align: center; font-size: 13px; color: var(--muted); padding: 8px 0; font-weight: 400; } .sv-highlight { margin-top: 14px; background: rgba(16,94,250,.04); border: 1px solid rgba(16,94,250,.12); border-radius: 10px; padding: 16px 18px; font-size: 13px; color: var(--navy); line-height: 1.7; } /* Case study — dark/light split */ .case-dark { background: var(--navy); border-radius: 16px; padding: 40px 36px; } .case-quote { font-size: 15px; font-weight: 300; color: rgba(255,255,255,.85); line-height: 1.8; font-style: italic; margin-bottom: 18px; } .case-attr { font-size: 12px; color: rgba(255,255,255,.45); font-weight: 400; display: block; margin-bottom: 28px; } .module-group-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 12px 0 4px; } .module-group-label:first-child { padding-top: 0; } .case-stat-strip { display: flex; gap: 0; margin-bottom: 12px; } .case-stat { display: flex; flex-direction: column; padding: 16px 24px 16px 0; margin-right: 24px; border-right: 1px solid var(--border); } .case-stat:last-child { border-right: none; margin-right: 0; } .case-stat-val { font-size: 32px; font-weight: 800; font-family: 'Urbanist', sans-serif; color: var(--blue); letter-spacing: -1.5px; line-height: 1; } .case-stat-label { font-size: 12px; color: var(--muted); margin-top: 6px; } .case-context { font-size: 12px; color: var(--muted); margin-bottom: 20px; margin-top: 0; } .case-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.08); } .cs-item { text-align: center; } .cs-val { font-size: 24px; font-weight: 800; color: var(--blue); font-family: 'Urbanist', sans-serif; letter-spacing: -1px; margin-bottom: 4px; } .cs-lbl { font-size: 11px; color: rgba(255,255,255,.45); line-height: 1.5; font-weight: 300; } .case-light { background: white; border: 1px solid var(--border); border-radius: 16px; padding: 36px 32px; } .case-light h3 { font-size: 16px; font-weight: 700; color: var(--navy); margin-bottom: 20px; } /* Timeline items (case study) */ .timeline-items { display: flex; flex-direction: column; gap: 10px; } .tl-item { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; background: var(--grey); border: 1px solid var(--border); border-radius: 10px; } .tl-icon { width: 28px; height: 28px; border-radius: 8px; background: var(--blue-soft); color: var(--blue); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .tl-body h4 { font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 3px; } .tl-body p { font-size: 12px; color: var(--muted); line-height: 1.6; font-weight: 300; } /* Strukturvertriebe — Responsive */ @media (max-width: 900px) { .flow-grid { grid-template-columns: repeat(2, 1fr); } .benefit-grid { grid-template-columns: 1fr; } .mod-grid { grid-template-columns: 1fr; } .case-grid { grid-template-columns: 1fr; } .sv-boxes { flex-direction: column; } } @media (max-width: 600px) { .flow-grid { grid-template-columns: 1fr; } .case-dark { padding: 28px 22px; } .case-light { padding: 28px 22px; } .case-stats { grid-template-columns: 1fr; gap: 16px; } .benefit-card { padding: 24px 20px; } } /* ══════════════════════════════════════════════════ TRUST CENTER ══════════════════════════════════════════════════ */ /* ── Page Header (dark, with breadcrumb) ── */ .tc-header { padding: 72px 48px 56px; background: var(--navy); color: var(--white); position: relative; overflow: hidden; } .tc-header::before { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 55%; background: radial-gradient(ellipse at 85% 50%, rgba(16,94,250,.18) 0%, transparent 60%); pointer-events: none; } .tc-header .sec-inner { position: relative; z-index: 1; } .tc-header h1 { color: var(--white); margin-bottom: 8px; } .tc-header p { color: rgba(255,255,255,.5); font-size: 15px; font-weight: 300; line-height: 1.8; max-width: 560px; } .tc-header-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 10px; background: rgba(16,94,250,.2); margin-bottom: 16px; } .tc-header-icon svg { width: 24px; height: 24px; color: var(--white); } .tc-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,.35); margin-bottom: 24px; } .tc-breadcrumb a { color: rgba(255,255,255,.5); text-decoration: none; } .tc-breadcrumb a:hover { color: var(--white); } .tc-breadcrumb span { color: rgba(255,255,255,.2); } /* ── Trust Signals (floating cards below hero) ── */ .tc-signals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: -48px; position: relative; z-index: 10; } .tc-signal { background: var(--white); border-radius: 14px; padding: 24px; text-align: center; border: 1px solid var(--border); box-shadow: 0 8px 40px rgba(17,26,81,.08); } .tc-signal-icon { width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 10px; } .tc-signal-icon svg { width: 20px; height: 20px; } .tc-signal-icon.blue { background: var(--blue); color: var(--white); } .tc-signal-icon.green { background: var(--green); color: var(--white); } .tc-signal h3, .tc-signal h4 { font-size: 14px; margin-bottom: 4px; } .tc-signal p { font-size: 12px; color: var(--muted); margin: 0; font-weight: 300; } @media (max-width: 960px) { .tc-signals { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .tc-signals { grid-template-columns: 1fr; margin-top: -24px; } } /* ── Stats grid ── */ .tc-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .tc-stat { background: var(--grey); border-radius: 14px; padding: 24px; text-align: center; border: 1px solid var(--border); } .tc-stat-val { font-family: 'Urbanist', sans-serif; font-size: 32px; font-weight: 700; color: var(--navy); line-height: 1; margin-bottom: 6px; letter-spacing: -1.2px; } .tc-stat-lbl { font-size: 12px; color: var(--muted); } /* ── Badges ── */ .tc-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border-radius: 20px; font-size: 11px; font-weight: 600; white-space: nowrap; } .tc-badge.success { background: rgba(0,170,118,.08); color: #005a3a; } .tc-badge.info { background: var(--blue-soft); color: var(--blue); } .tc-badge.warning { background: #FEF3C7; color: #92400E; } .tc-badge-grid { display: flex; flex-wrap: wrap; gap: 8px; } /* ── Tabs ── */ .tc-tabs-nav { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 32px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .tc-tab-btn { padding: 14px 20px; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 500; color: var(--muted); cursor: pointer; white-space: nowrap; transition: color .15s; } .tc-tab-btn:hover { color: var(--navy); } .tc-tab-btn.active { color: var(--blue); border-bottom-color: var(--blue); font-weight: 600; } .tc-tab-panel { display: none; } .tc-tab-panel.active { display: block; } /* ── Accordion ── */ .tc-accordion { display: flex; flex-direction: column; gap: 6px; } .tc-acc-item { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; } .tc-acc-btn { width: 100%; padding: 16px 24px; background: none; border: none; display: flex; align-items: center; justify-content: space-between; font-family: 'Urbanist', sans-serif; font-size: 15px; font-weight: 700; color: var(--navy); cursor: pointer; transition: background .15s; } .tc-acc-btn:hover { background: var(--grey); } .tc-acc-btn svg { width: 18px; height: 18px; color: var(--muted); transition: transform .2s; flex-shrink: 0; } .tc-acc-item.open .tc-acc-btn { background: var(--blue-soft); } .tc-acc-item.open .tc-acc-btn svg { transform: rotate(180deg); } .tc-acc-content { max-height: 0; overflow: hidden; transition: max-height 300ms ease; } .tc-acc-inner { padding: 16px 24px 24px; font-size: 14px; color: var(--muted); line-height: 1.7; } /* ── Summary Box ── */ .tc-summary { background: var(--blue-soft); border: 1px solid rgba(16,94,250,.15); border-left: 3px solid var(--blue); border-radius: 0 12px 12px 0; padding: 24px; margin-bottom: 32px; } .tc-summary h3 { font-size: 14px; margin-bottom: 14px; color: var(--blue); } .tc-summary ul { list-style: none; display: flex; flex-direction: column; gap: 8px; } .tc-summary li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--black); } .tc-summary li svg { width: 16px; height: 16px; color: var(--green); flex-shrink: 0; margin-top: 3px; } /* ── Callout ── */ .tc-callout { background: var(--blue-soft); border: 1px solid rgba(16,94,250,.15); border-left: 3px solid var(--blue); border-radius: 0 14px 14px 0; padding: 28px; } .tc-callout h3 { margin-bottom: 14px; } /* ── Checklist ── */ .tc-checklist { list-style: none; display: flex; flex-direction: column; gap: 14px; } .tc-checklist li { display: flex; align-items: flex-start; gap: 14px; font-size: 14px; color: var(--muted); line-height: 1.7; } .tc-checklist li svg { width: 18px; height: 18px; color: var(--green); flex-shrink: 0; margin-top: 3px; } .tc-checklist li strong { color: var(--navy); font-weight: 600; } /* ── Compliance Dashboard ── */ .tc-compliance-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .tc-compliance-card { background: var(--white); border: 1px solid var(--border); border-radius: 14px; padding: 24px; transition: transform .2s, box-shadow .2s; text-decoration: none; color: inherit; } .tc-compliance-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(17,26,81,.08); } .tc-compliance-status { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; } .tc-compliance-dot { width: 8px; height: 8px; border-radius: 50%; } .tc-compliance-dot.success { background: var(--green); box-shadow: 0 0 6px var(--green); } .tc-compliance-dot.info { background: var(--blue); box-shadow: 0 0 6px var(--blue); } .tc-compliance-dot.warning { background: var(--yellow); box-shadow: 0 0 6px var(--yellow); } .tc-compliance-card h3, .tc-compliance-card h4 { margin-bottom: 4px; } .tc-compliance-card p { font-size: 13px; color: var(--muted); font-weight: 300; } @media (max-width: 768px) { .tc-compliance-grid { grid-template-columns: 1fr; } } /* ── Table (Trust Center) ── */ .tc-table-wrap { overflow-x: auto; border-radius: 14px; border: 1px solid var(--border); } .tc-table-wrap table { width: 100%; border-collapse: collapse; font-size: 13px; } .tc-table-wrap th { background: var(--grey); font-weight: 600; font-size: 12px; color: var(--navy); text-align: left; padding: 14px 20px; border-bottom: 1px solid var(--border); white-space: nowrap; text-transform: uppercase; letter-spacing: .04em; } .tc-table-wrap td { padding: 14px 20px; border-bottom: 1px solid rgba(17,26,81,.04); color: var(--black); } .tc-table-wrap tr:last-child td { border-bottom: none; } .tc-table-wrap tr:hover td { background: var(--blue-soft); } /* ── Contact CTA ── */ .tc-contact { background: var(--grey); border: 1px solid var(--border); border-radius: 14px; padding: 48px; text-align: center; max-width: 640px; margin: 0 auto; } .tc-contact-icon { width: 48px; height: 48px; border-radius: 10px; background: var(--blue); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; } .tc-contact-icon svg { width: 20px; height: 20px; color: var(--white); } .tc-contact h3 { margin-bottom: 8px; } .tc-contact p { color: var(--muted); margin-bottom: 24px; font-size: 14px; font-weight: 300; line-height: 1.7; } .tc-contact-info { display: flex; flex-direction: column; gap: 6px; margin-bottom: 24px; font-size: 14px; color: var(--muted); } .tc-contact-info a { font-weight: 600; color: var(--blue); } /* ── Emergency Card ── */ .tc-emergency { background: rgba(237,28,36,.04); border: 1.5px solid rgba(237,28,36,.2); border-radius: 14px; padding: 28px; text-align: center; } .tc-emergency h3, .tc-emergency h4 { color: var(--red); margin-bottom: 8px; } .tc-emergency a { color: var(--red); font-weight: 700; font-size: 20px; } /* ── Trust Center: Grid layouts ── */ .tc-grid { display: grid; gap: 16px; } .grid--2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .grid--3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .grid--4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } @media (max-width: 960px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .grid--4, .grid--3, .grid--2 { grid-template-columns: 1fr; } } /* ── Trust Center: Card icon variants ── */ .card__icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .card__icon svg { width: 20px; height: 20px; } .card__icon--blue { background: var(--blue); color: var(--white); } .card__icon--green { background: var(--green); color: var(--white); } /* ── Trust Center: Nav card (with arrow) ── */ .card--nav { display: flex; flex-direction: column; cursor: pointer; text-decoration: none; color: inherit; } .card--nav:hover { border-color: rgba(16,94,250,.3); } .card--nav .card__arrow { margin-top: auto; padding-top: 16px; color: var(--muted); transition: transform .2s, color .2s; } .card--nav:hover .card__arrow { color: var(--blue); transform: translateX(4px); } /* ── Trust Center: Section header ── */ .tc-sec-header { max-width: 560px; margin-bottom: 48px; } .tc-sec-header p { color: var(--muted); font-size: 15px; font-weight: 300; line-height: 1.8; } /* ── Trust Center: Utilities ── */ .mt-md { margin-top: 16px; } .mt-lg { margin-top: 24px; } .mb-md { margin-bottom: 16px; } .mb-lg { margin-bottom: 24px; } .mb-xl { margin-bottom: 32px; } /* ── Trust Center Responsive ── */ @media (max-width: 960px) { .tc-header { padding: 56px 20px 40px; } } @media (max-width: 600px) { .tc-header { padding: 40px 20px 32px; } } /* ══════════════════════════════════════════════════ Solutions Router Page ══════════════════════════════════════════════════ */ .sol-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .sol-card { background: var(--white); border-radius: 16px; padding: 32px; text-decoration: none; display: flex; flex-direction: column; border: 1px solid var(--border); transition: box-shadow .2s, transform .2s; } .sol-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.08); transform: translateY(-2px); } .sol-icon { width: 44px; height: 44px; background: rgba(16,94,250,0.08); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--blue); margin-bottom: 16px; } .sol-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--blue); margin-bottom: 8px; } .sol-card h3 { font-family: 'Urbanist', sans-serif; font-size: 1.25rem; font-weight: 700; color: var(--navy); line-height: 1.3; margin-bottom: 8px; } .sol-card p { font-size: 14px; color: var(--muted); line-height: 1.5; flex: 1; } .sol-stats { display: flex; gap: 16px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); } .sol-stats span { font-size: 12px; font-weight: 600; color: var(--navy); background: rgba(16,94,250,0.05); padding: 4px 10px; border-radius: 6px; } .sol-link { font-size: 13px; font-weight: 600; color: var(--blue); margin-top: 16px; } @media (max-width: 768px) { .sol-grid { grid-template-columns: 1fr; } } /* ══════════════════════════════════════════════════ Process Cards (directie navy section) ══════════════════════════════════════════════════ */ .proc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; } .proc-card { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 28px 24px; } .proc-card h3 { font-size: 16px; font-weight: 700; color: var(--white); margin-bottom: 16px; font-family: 'Urbanist', sans-serif; } .proc-card ul { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 6px; } .proc-card ul li { font-size: 13px; color: rgba(255,255,255,.6); line-height: 1.5; padding-left: 14px; position: relative; } .proc-card ul li::before { content: ''; width: 4px; height: 4px; background: var(--blue); border-radius: 50%; position: absolute; left: 0; top: 7px; } .proc-highlight { font-size: 13px; font-weight: 600; color: var(--white); margin-bottom: 16px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.1); } .proc-label { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); margin-bottom: 16px; } .proc-img { width: 100%; height: auto; border-radius: 8px; display: block; opacity: .85; transition: opacity .2s; } .proc-card:hover .proc-img { opacity: 1; } /* Process cards on white background */ .bg-white .proc-card { background: var(--grey); border-color: var(--border); } .bg-white .proc-card h3 { color: #000; } .bg-white .proc-card ul li { color: rgba(0,0,0,.6); } .bg-white .proc-card ul li::before { background: rgba(0,0,0,.25); } .bg-white .proc-highlight { color: #000; border-top-color: var(--border); } .proc-sub { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.8); margin: 0 0 8px; } .bg-white .proc-sub { color: #000; } /* Process cards on grey background */ .bg-grey .proc-card { background: var(--white); border-color: var(--border); } .bg-grey .proc-card h3 { color: #000; } .bg-grey .proc-card ul li { color: rgba(0,0,0,.6); } .bg-grey .proc-card ul li::before { background: rgba(0,0,0,.25); } .bg-grey .proc-highlight { color: #000; border-top-color: var(--border); } .bg-grey .proc-sub { color: #000; } @media (max-width: 768px) { .proc-grid { grid-template-columns: 1fr; } } /* ══════════════════════════════════════════════════ Software Showcase ══════════════════════════════════════════════════ */ .showcase-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin-top: 40px; } .showcase-item { background: var(--grey); border-radius: 14px; overflow: hidden; border: 1px solid var(--border); } .showcase-item img { width: 100%; height: auto; display: block; border-bottom: 1px solid var(--border); } .showcase-label { font-size: 14px; font-weight: 700; color: var(--navy); padding: 16px 20px 4px; } .showcase-desc { font-size: 13px; color: var(--muted); line-height: 1.5; padding: 0 20px 16px; } @media (max-width: 768px) { .showcase-list { grid-template-columns: 1fr; } } /* ══════════════════════════════════════════════════ Step Cards (adviseur zakelijke markt) ══════════════════════════════════════════════════ */ .step-card { background: var(--white); border: 1px solid var(--border); border-radius: 14px; padding: 28px 24px; } .step-num { font-size: 13px; font-weight: 700; color: var(--blue); margin-bottom: 8px; font-family: 'Urbanist', sans-serif; } .step-card h3 { font-size: 17px; font-weight: 700; color: var(--navy); margin-bottom: 8px; } .step-card p { font-size: 13px; color: var(--muted); line-height: 1.6; } @media (max-width: 768px) { .step-flow { grid-template-columns: 1fr !important; } } /* ══════════════════════════════════════════════════ Pain Cards & Navy Card (directie) ══════════════════════════════════════════════════ */ .pain-cards { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; } .pain-card { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; background: var(--white); border: 1px solid var(--border); border-radius: 10px; } .pd { width: 6px; height: 6px; background: var(--blue); border-radius: 50%; flex-shrink: 0; margin-top: 7px; } .pt strong { display: block; font-size: 14px; font-weight: 700; color: var(--navy); margin-bottom: 4px; } .pt span { font-size: 13px; color: var(--muted); line-height: 1.5; } .navy-card { background: var(--navy); border-radius: 16px; padding: 44px; } .navy-card .overline { color: var(--blue); } .navy-card .h2 { color: var(--white); } .navy-card .c { color: var(--blue); } .navy-card p { color: rgba(255,255,255,.55); font-size: 14px; line-height: 1.7; } .divider { width: 40px; height: 2px; background: var(--blue); margin: 20px 0; } .center { text-align: center; } /* ══════════════════════════════════════════════════ Voordelen Cards (adviseur) ══════════════════════════════════════════════════ */ .voordelen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; } .vd-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 32px 24px; } .vd-icon { width: 40px; height: 40px; background: rgba(16,94,250,.15); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--blue); margin-bottom: 16px; } .vd-num { font-size: 32px; font-weight: 800; color: var(--blue); font-family: 'Urbanist', sans-serif; margin-bottom: 8px; } .vd-card h3 { font-size: 16px; font-weight: 700; color: var(--navy); margin-bottom: 8px; } .vd-card p { font-size: 13px; color: var(--muted); line-height: 1.6; } @media (max-width: 768px) { .voordelen { grid-template-columns: 1fr; } } /* ══════════════════════════════════════════════════ Steps & Pillar Grid (directie systeem) ══════════════════════════════════════════════════ */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; } .step { background: var(--white); border: 1px solid var(--border); border-radius: 14px; padding: 28px 24px; position: relative; } .step-n { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 16px; } .step h3 { font-size: 17px; font-weight: 700; color: var(--navy); margin-bottom: 8px; } .step p { font-size: 13px; color: var(--muted); line-height: 1.6; margin-bottom: 12px; } .step-tag { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); } .step-icon { width: 44px; height: 44px; background: rgba(16,94,250,.08); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--blue); margin-bottom: 16px; } .step-arr { color: var(--muted); font-size: 18px; margin-top: 12px; } .steps-footer { text-align: center; margin-top: 24px; font-size: 14px; color: var(--navy); font-style: italic; } .pillar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 32px; } .pillar-card { background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 24px 20px; } .pillar-icon { width: 36px; height: 36px; background: rgba(16,94,250,.08); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--blue); margin-bottom: 12px; } .pillar-card h4 { font-size: 14px; font-weight: 700; color: var(--navy); margin-bottom: 6px; } .pillar-card p { font-size: 12px; color: var(--muted); line-height: 1.5; } .seg-result { font-size: 13px; font-weight: 600; color: var(--blue); margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); } @media (max-width: 1024px) { .pillar-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .steps { grid-template-columns: 1fr; } .pillar-grid { grid-template-columns: 1fr; } } /* EXECUTIVE CALM - HOMEPAGE COMPONENTS */ /* --- HERO KPI GRID --- */ .hero-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .hero-kpi-card { background: var(--off-white); border: 1px solid var(--border); border-radius: 16px; padding: 28px 24px; display: flex; flex-direction: column; gap: 6px; transition: transform 0.2s, box-shadow 0.2s; } .hero-kpi-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15,23,42,0.06); } .hero-kpi-val { font-family: 'Urbanist', sans-serif; font-size: 44px; font-weight: 800; color: var(--navy); letter-spacing: -1.5px; line-height: 1; } .hero-kpi-val .kpi-blue { color: var(--blue); } .hero-kpi-desc { font-size: 13px; color: var(--muted); line-height: 1.5; font-weight: 400; } /* --- PRODUCT PREVIEW --- */ .product-preview { margin-top: 48px; border-top: 1px solid var(--border); padding-top: 48px; } .preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 32px; } .preview-card { border-radius: 16px; overflow: hidden; border: 1px solid var(--border); background: var(--white); transition: transform 0.25s, box-shadow 0.25s; } .preview-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(15,23,42,0.08); } .preview-card-img { padding: 24px 24px 0; background: var(--grey); display: block; width: 100%; border: 0; font: inherit; color: inherit; text-align: left; cursor: zoom-in; position: relative; } .preview-card-img img { width: 100%; height: auto; display: block; border-radius: 8px; box-shadow: 0 4px 24px rgba(15,23,42,0.1); transition: transform 0.3s ease; } .preview-card-img:hover img { transform: scale(1.015); } .preview-card-img:focus-visible { outline: 2px solid var(--blue); outline-offset: -4px; } .preview-card-body { padding: 20px 24px; } .preview-card-label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); margin-bottom: 6px; display: block; } .preview-card-title { font-size: 16px; font-weight: 700; color: var(--navy); letter-spacing: -0.2px; line-height: 1.3; margin-bottom: 4px; } .preview-card-desc { font-size: 13px; color: var(--muted); line-height: 1.6; } /* --- LIGHTBOX --- */ .lightbox { padding: 0; border: 0; background: transparent; max-width: 95vw; max-height: 95vh; overflow: visible; } .lightbox::backdrop { background: rgba(15, 23, 42, 0.88); backdrop-filter: blur(6px); } .lightbox[open] { animation: lightboxFadeIn 0.18s ease-out; } .lightbox-img { max-width: 95vw; max-height: 90vh; display: block; border-radius: 12px; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5); } .lightbox-close { position: absolute; top: -44px; right: 0; background: transparent; border: 0; color: #fff; font-size: 28px; line-height: 1; cursor: pointer; padding: 8px 12px; opacity: 0.85; transition: opacity 0.15s; } .lightbox-close:hover, .lightbox-close:focus-visible { opacity: 1; outline: 0; } @keyframes lightboxFadeIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } } @media (max-width: 768px) { .lightbox-close { top: -38px; font-size: 24px; } } [data-lightbox-src] { cursor: zoom-in; } /* --- MAGAZINE LAYOUT: MODULES + HOW IT WORKS --- */ .magazine-section { padding: 96px var(--px); background: var(--white); } .magazine-inner { max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: 1fr 400px; gap: 72px; align-items: start; } .magazine-left { min-width: 0; } .magazine-right { position: sticky; top: 100px; align-self: start; } .module-sidebar-header { margin-bottom: 24px; } .module-sidebar-header .overline { margin-bottom: 8px; } .module-sidebar-header h2 { font-size: 24px; font-weight: 800; color: var(--navy); letter-spacing: -0.8px; line-height: 1.2; margin: 0; } .module-card { display: flex; gap: 16px; padding: 18px 20px; border-radius: 12px; border: 1px solid var(--border); background: var(--white); margin-bottom: 10px; transition: border-color 0.25s, background 0.25s, transform 0.2s, box-shadow 0.25s; text-decoration: none; } .module-card:hover { border-color: var(--blue-border); background: var(--blue-soft); transform: translateX(4px); box-shadow: 0 4px 16px rgba(16,94,250,0.06); } .module-accent { width: 3px; border-radius: 3px; background: var(--blue); flex-shrink: 0; align-self: stretch; } .module-content { flex: 1; min-width: 0; } .module-tag { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); margin-bottom: 4px; } .module-title { font-size: 15px; font-weight: 700; color: var(--navy); letter-spacing: -0.2px; line-height: 1.3; margin-bottom: 4px; } .module-desc { font-size: 12.5px; color: var(--muted); line-height: 1.5; } /* --- HOE HET WERKT --- */ .flow-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin-top: 48px; position: relative; } .flow-cols::before { content: ''; position: absolute; top: 28px; left: 10%; right: 10%; height: 1px; background: rgba(255,255,255,0.08); } .flow-col { text-align: center; position: relative; } .flow-num { width: 56px; height: 56px; border-radius: 50%; background: rgba(16,94,250,0.15); border: 1px solid rgba(16,94,250,0.25); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-family: 'Urbanist', sans-serif; font-size: 22px; font-weight: 800; color: var(--blue); position: relative; z-index: 1; } .flow-col h3 { font-size: 17px; font-weight: 700; color: white; margin-bottom: 10px; letter-spacing: -0.3px; } .flow-col p { font-size: 13px; color: rgba(255,255,255,0.5); line-height: 1.7; } .flow-tag { display: inline-block; margin-top: 14px; font-size: 11px; font-weight: 600; color: var(--blue); background: rgba(16,94,250,0.1); padding: 4px 14px; border-radius: 20px; } .flow-link { display: inline-block; font-size: 13px; font-weight: 600; color: var(--blue); text-decoration: none; } /* --- AI-AGENTS BAND --- */ .agents-band { background: var(--navy); padding: 80px var(--px); position: relative; overflow: hidden; } .agents-band::before { content: ''; position: absolute; left: -10%; top: -30%; width: 50%; height: 160%; background: radial-gradient(ellipse at 20% 50%, rgba(16,94,250,0.1) 0%, transparent 60%); pointer-events: none; } .agents-band-inner { max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; position: relative; z-index: 1; } .agents-text { min-width: 0; } .agents-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .agent-tile { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 24px 22px; transition: background 0.2s, border-color 0.25s, transform 0.2s; } .agent-tile:hover { background: rgba(16,94,250,0.08); border-color: rgba(16,94,250,0.25); transform: translateY(-2px); } .agent-tile-icon { width: 40px; height: 40px; background: rgba(16,94,250,0.12); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--blue); margin-bottom: 14px; } .agent-tile-title { font-size: 15px; font-weight: 700; color: #fff; letter-spacing: -0.2px; margin-bottom: 6px; } .agent-tile-desc { font-size: 12.5px; color: rgba(255,255,255,0.45); line-height: 1.6; } .how-header { margin-bottom: 48px; } .how-step { display: flex; gap: 24px; margin-bottom: 48px; position: relative; } .how-step:last-child { margin-bottom: 0; } .how-step-line { position: absolute; left: 27px; top: 56px; bottom: -48px; width: 2px; background: linear-gradient(to bottom, var(--blue-border), transparent); } .how-step:last-child .how-step-line { display: none; } .how-num { width: 56px; height: 56px; border-radius: 50%; background: var(--blue-soft); border: 2px solid var(--blue-border); display: flex; align-items: center; justify-content: center; font-family: 'Urbanist', sans-serif; font-size: 22px; font-weight: 800; color: var(--blue); flex-shrink: 0; position: relative; z-index: 1; } .how-body { flex: 1; padding-top: 4px; } .how-body h3 { font-size: 20px; font-weight: 700; color: var(--navy); letter-spacing: -0.3px; line-height: 1.25; margin-bottom: 10px; } .how-body p { font-size: 14px; color: var(--muted); line-height: 1.8; font-weight: 300; } .how-tag { display: inline-block; margin-top: 12px; font-size: 11px; font-weight: 600; color: var(--blue); background: var(--blue-soft); border: 1px solid var(--blue-border); padding: 4px 14px; border-radius: 20px; } .how-link { display: inline-block; font-size: 13px; font-weight: 600; color: var(--blue); text-decoration: none; margin-top: 32px; transition: color 0.15s; } .how-link:hover { color: var(--blue-hover); } /* --- CASE / QUOTE --- */ .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; } .case-badge { display: inline-flex; align-items: center; gap: 7px; background: var(--blue-soft); color: var(--navy); border-radius: 20px; padding: 5px 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; margin-bottom: 20px; } .case-badge::before { content: '\2713'; font-size: 10px; font-weight: 700; color: var(--blue); } blockquote { margin: 22px 0; padding: 18px 22px; border-left: 3px solid var(--blue); border-radius: 0 8px 8px 0; background: rgba(16,94,250,0.04); font-size: 14px; font-style: italic; color: var(--navy); line-height: 1.75; } .case-p { font-size: 14px; color: var(--muted); line-height: 1.85; font-weight: 300; } .quote-stack { display: flex; flex-direction: column; gap: 14px; } .q-card { background: var(--navy); border-radius: 14px; padding: 24px 26px; } .q-card p { font-size: 14px; font-style: italic; color: rgba(255,255,255,0.7); line-height: 1.75; } .q-card .attr { margin-top: 10px; font-size: 11px; color: rgba(16,94,250,0.7); font-style: normal; } /* --- HUBS: INLINE STRIP --- */ .hubs-strip { display: flex; align-items: center; gap: 32px; margin-top: 32px; flex-wrap: wrap; } .hub-item { display: flex; align-items: center; gap: 14px; } .hub-item img { height: 32px; width: auto; object-fit: contain; filter: grayscale(1) opacity(0.6); transition: filter 0.2s; } .hub-item:hover img { filter: grayscale(0) opacity(1); } .hub-meta { display: flex; flex-direction: column; } .hub-meta-city { font-size: 13px; font-weight: 600; color: var(--navy); line-height: 1.3; } .hub-meta-desc { font-size: 11px; color: var(--muted); line-height: 1.4; } .hub-sep { width: 1px; height: 32px; background: var(--border); flex-shrink: 0; } /* --- CTA SECTION: SINGLE BAR --- */ .cta-bar { max-width: 800px; margin: 48px auto 0; text-align: center; } .cta-bar .btn-primary { font-size: 16px; padding: 16px 40px; } .cta-trust-row { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 20px; flex-wrap: wrap; } .cta-trust-item { font-size: 13px; color: rgba(255,255,255,0.4); display: flex; align-items: center; gap: 6px; } .cta-trust-dot { width: 5px; height: 5px; background: var(--blue); border-radius: 50%; } /* --- NIEUWS: FEATURED + SIDEBAR --- */ .intl-media { display: flex; align-items: center; gap: 20px; padding: 16px 20px; background: var(--blue-soft); border: 1px solid var(--blue-border); border-radius: 12px; margin-bottom: 36px; flex-wrap: wrap; } .intl-media-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); white-space: nowrap; flex-shrink: 0; padding-right: 20px; border-right: 1px solid rgba(16,94,250,0.2); } .intl-media-logos { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .intl-media-item { display: flex; align-items: center; gap: 5px; background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 4px 10px 4px 7px; font-size: 12px; font-weight: 500; color: var(--navy); white-space: nowrap; } .intl-flag { font-size: 14px; line-height: 1; } .intl-pub { font-size: 12px; } .nieuws-featured { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; } .nf-main { background: var(--navy); border-radius: 16px; padding: 40px 36px; display: flex; flex-direction: column; justify-content: flex-end; text-decoration: none; transition: transform 0.2s; min-height: 280px; position: relative; overflow: hidden; } .nf-main::before { content: ''; position: absolute; right: -20%; top: -30%; width: 60%; height: 100%; background: radial-gradient(ellipse at center, rgba(16,94,250,0.15) 0%, transparent 60%); pointer-events: none; } .nf-main:hover { transform: translateY(-2px); } .nf-main .nc-type { color: var(--blue); margin-bottom: 12px; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; display: block; position: relative; z-index: 1; } .nf-main h3 { font-size: 24px; font-weight: 700; color: white; letter-spacing: -0.5px; line-height: 1.2; margin-bottom: 12px; position: relative; z-index: 1; } .nf-main .nc-date { font-size: 12px; color: rgba(255,255,255,0.4); position: relative; z-index: 1; display: block; } .nf-side { display: flex; flex-direction: column; gap: 16px; } .nf-card { background: white; border: 1px solid var(--border); border-radius: 14px; padding: 24px; text-decoration: none; display: flex; flex-direction: column; gap: 8px; flex: 1; transition: transform 0.2s, box-shadow 0.2s; } .nf-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15,23,42,0.06); } .nf-card .nc-type { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); display: block; } .nf-card h3 { font-size: 15px; font-weight: 700; color: var(--navy); letter-spacing: -0.2px; line-height: 1.4; } .nf-card .nc-date { font-size: 11px; color: var(--muted); display: block; } /* --- MAGAZINE LAYOUT --- */ .magazine-section { padding: 96px var(--px); background: var(--white); } .magazine-inner { max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: 1fr 400px; gap: 72px; align-items: start; } .magazine-left { min-width: 0; } .magazine-right { position: sticky; top: 100px; align-self: start; } .module-sidebar-header { margin-bottom: 24px; } .module-sidebar-header h2 { font-size: 24px; font-weight: 800; color: var(--navy); letter-spacing: -0.8px; line-height: 1.2; margin: 0; } .module-card { display: flex; gap: 16px; padding: 18px 20px; border-radius: 12px; border: 1px solid var(--border); background: var(--white); margin-bottom: 10px; transition: border-color 0.25s, background 0.25s, transform 0.2s, box-shadow 0.25s; text-decoration: none; } .module-card:hover { border-color: var(--blue-border); background: var(--blue-soft); transform: translateX(4px); box-shadow: 0 4px 16px rgba(16,94,250,0.06); } .module-accent { width: 3px; border-radius: 3px; background: var(--blue); flex-shrink: 0; align-self: stretch; } .module-content { flex: 1; min-width: 0; } .module-tag { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); margin-bottom: 4px; } .module-title { font-size: 15px; font-weight: 700; color: var(--navy); letter-spacing: -0.2px; line-height: 1.3; margin-bottom: 4px; } .module-desc { font-size: 12.5px; color: var(--muted); line-height: 1.5; } /* --- HOW IT WORKS --- */ .how-header { margin-bottom: 48px; } .how-step { display: flex; gap: 24px; margin-bottom: 48px; position: relative; } .how-step:last-child { margin-bottom: 0; } .how-step-line { position: absolute; left: 27px; top: 56px; bottom: -48px; width: 2px; background: linear-gradient(to bottom, var(--blue-border), transparent); } .how-step:last-child .how-step-line { display: none; } .how-num { width: 56px; height: 56px; border-radius: 50%; background: var(--blue-soft); border: 2px solid var(--blue-border); display: flex; align-items: center; justify-content: center; font-family: Urbanist, sans-serif; font-size: 22px; font-weight: 800; color: var(--blue); flex-shrink: 0; position: relative; z-index: 1; } .how-body { flex: 1; padding-top: 4px; } .how-body h3 { font-size: 20px; font-weight: 700; color: var(--navy); letter-spacing: -0.3px; line-height: 1.25; margin-bottom: 10px; } .how-body p { font-size: 14px; color: var(--muted); line-height: 1.8; font-weight: 300; } .how-tag { display: inline-block; margin-top: 12px; font-size: 11px; font-weight: 600; color: var(--blue); background: var(--blue-soft); border: 1px solid var(--blue-border); padding: 4px 14px; border-radius: 20px; } .how-link { display: inline-block; font-size: 13px; font-weight: 600; color: var(--blue); text-decoration: none; margin-top: 32px; } /* --- AI-AGENTS BAND --- */ .agents-band { background: var(--navy); padding: 80px var(--px); position: relative; overflow: hidden; } .agents-band::before { content: ''; position: absolute; left: -10%; top: -30%; width: 50%; height: 160%; background: radial-gradient(ellipse at 20% 50%, rgba(16,94,250,0.1) 0%, transparent 60%); pointer-events: none; } .agents-band-inner { max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; position: relative; z-index: 1; } .agents-text { min-width: 0; } .agents-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .agent-tile { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 24px 22px; transition: background 0.2s, border-color 0.25s, transform 0.2s; } .agent-tile:hover { background: rgba(16,94,250,0.08); border-color: rgba(16,94,250,0.25); transform: translateY(-2px); } .agent-tile-icon { width: 40px; height: 40px; background: rgba(16,94,250,0.12); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--blue); margin-bottom: 14px; } .agent-tile-title { font-size: 15px; font-weight: 700; color: #fff; letter-spacing: -0.2px; margin-bottom: 6px; } .agent-tile-desc { font-size: 12.5px; color: rgba(255,255,255,0.45); line-height: 1.6; } /* --- HUBS STRIP --- */ .hubs-strip { display: flex; align-items: center; gap: 32px; margin-top: 32px; flex-wrap: wrap; } .hub-item { display: flex; align-items: center; gap: 14px; } .hub-item img { height: 32px; width: auto; object-fit: contain; filter: grayscale(1) opacity(0.6); transition: filter 0.2s; } .hub-item:hover img { filter: grayscale(0) opacity(1); } .hub-meta { display: flex; flex-direction: column; } .hub-meta-city { font-size: 13px; font-weight: 600; color: var(--navy); line-height: 1.3; } .hub-meta-desc { font-size: 11px; color: var(--muted); line-height: 1.4; } .hub-sep { width: 1px; height: 32px; background: var(--border); flex-shrink: 0; } /* --- CTA BAR --- */ .cta-bar { max-width: 800px; margin: 48px auto 0; text-align: center; } .cta-bar .btn-primary { font-size: 16px; padding: 16px 40px; } .cta-trust-row { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 20px; flex-wrap: wrap; } .cta-trust-item { font-size: 13px; color: rgba(255,255,255,0.4); display: flex; align-items: center; gap: 6px; } .cta-trust-dot { width: 5px; height: 5px; background: var(--blue); border-radius: 50%; } /* --- RESPONSIVE HOMEPAGE --- */ @media (max-width: 960px) { .hero-kpis { grid-template-columns: 1fr; } .magazine-inner { grid-template-columns: 1fr; gap: 48px; } .magazine-right { position: static; order: -1; } .agents-band { padding: 60px 20px; } .agents-band-inner { grid-template-columns: 1fr; gap: 40px; } .agents-grid { grid-template-columns: 1fr 1fr; } .preview-grid { grid-template-columns: 1fr; } .nieuws-featured { grid-template-columns: 1fr; } .hubs-strip { flex-direction: column; align-items: stretch; gap: 0; } .hub-sep { display: none; } .hub-item { gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--border); } .hub-item:last-child { border-bottom: none; } .hub-item img { width: 48px; height: auto; min-width: 48px; object-fit: contain; } .flow-cols { grid-template-columns: 1fr; gap: 32px; } .flow-cols::before { display: none; } .two-col { grid-template-columns: 1fr; gap: 40px; } } @media (max-width: 600px) { .hero-kpis { grid-template-columns: 1fr; } .agents-grid { grid-template-columns: 1fr; } .hero-kpi-val { font-size: 32px; } } /* ══ INTEGRATIES PAGE ══ */ .integ-signals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; text-align: center; } .integ-signal-icon { width: 48px; height: 48px; background: rgba(16,94,250,.08); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; color: var(--blue); } .integ-signal-icon svg { width: 22px; height: 22px; } .integ-signals h3 { font-size: 1rem; margin: 0 0 4px; } .integ-signals p { font-size: .85rem; color: var(--muted); margin: 0; } .integ-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; } .integ-card { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 28px; transition: box-shadow .2s; } .integ-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.06); } .integ-card h3 { font-size: 1.1rem; margin: 0 0 8px; } .integ-card p { font-size: .85rem; color: var(--muted); line-height: 1.7; margin: 8px 0 0; } .integ-status { display: inline-block; font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 3px 10px; border-radius: 20px; } .integ-status--live { color: #00AA76; background: rgba(0,170,118,.08); } .integ-status--supported { color: var(--blue); background: rgba(16,94,250,.07); } .integ-status--open { color: #F5BD4C; background: rgba(245,189,76,.1); } .integ-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 40px; counter-reset: step; } .integ-step { position: relative; } .integ-step-num { width: 40px; height: 40px; background: var(--blue); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; margin-bottom: 16px; } .integ-step h3 { font-size: 1rem; margin: 0 0 8px; } .integ-step p { font-size: .85rem; color: var(--muted); line-height: 1.7; margin: 0; } .integ-tech-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; } .integ-tech-item { padding: 24px; border: 1px solid var(--border); border-radius: 12px; } .integ-tech-item h3 { font-size: .95rem; margin: 0 0 8px; } .integ-tech-item p { font-size: .85rem; color: var(--muted); line-height: 1.7; margin: 0; } @media (max-width: 900px) { .integ-signals { grid-template-columns: repeat(2, 1fr); gap: 24px; } .integ-grid { grid-template-columns: repeat(2, 1fr); } .integ-steps { grid-template-columns: 1fr; gap: 24px; } .integ-tech-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .integ-signals { grid-template-columns: 1fr; } .integ-grid { grid-template-columns: 1fr; } .integ-tech-grid { grid-template-columns: 1fr; } } /* ══════════════════════════════════════════════════ BLUE TEXT ON DARK BACKGROUNDS — improved contrast #7EB3FF on #111A51 = 7.6:1 (WCAG AA) ══════════════════════════════════════════════════ */ .bg-navy, .cta-dark, .prob-quote, .faq-cta-inner { --blue: var(--blue-on-dark); } /* Restore brand blue for interactive elements inside dark sections */ .bg-navy .btn-teal, .bg-navy .btn-solid, .bg-navy .btn-demo, .bg-navy .btn-teal-solid, .bg-navy .arr-btn, .bg-navy .logo-mark, .cta-dark .btn-teal, .cta-dark .btn-solid, .cta-dark .btn-demo { --blue: #105EFA; } /* ══════════════════════════════════════════════════ PRICING TIERS ══════════════════════════════════════════════════ */ .pricing-intro { font-size: 17px; color: var(--muted); max-width: 600px; margin-bottom: 48px; line-height: 1.6; } .pricing-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; align-items: start; } .pricing-card { background: white; border: 1px solid var(--border); border-radius: 18px; padding: 32px 28px; display: flex; flex-direction: column; gap: 20px; position: relative; } .pricing-card--featured { border-color: var(--blue); box-shadow: 0 4px 32px rgba(16,94,250,.10); } .pricing-tier-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--blue); color: white; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 14px; border-radius: 999px; white-space: nowrap; } .pricing-tier-label { font-family: 'Urbanist', sans-serif; font-size: 22px; font-weight: 700; color: var(--navy); letter-spacing: -0.4px; } .pricing-portfolio { display: inline-block; font-size: 12px; font-weight: 600; color: var(--blue); background: rgba(16,94,250,.07); border-radius: 999px; padding: 4px 12px; margin-top: -8px; } .pricing-desc { font-size: 14px; color: var(--muted); line-height: 1.6; margin: 0; } .pricing-modules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--border); padding-top: 20px; } .pricing-modules li { font-size: 13px; color: var(--navy); display: flex; align-items: flex-start; gap: 10px; line-height: 1.4; } .pm-dot { width: 7px; height: 7px; min-width: 7px; border-radius: 50%; background: var(--blue); margin-top: 4px; } .pricing-onboarding { background: var(--off-white); border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; } .pricing-ob-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--blue); } .pricing-ob-val { font-size: 13px; color: var(--muted); line-height: 1.5; } .pricing-cta-link { font-size: 14px; font-weight: 600; color: var(--blue); text-decoration: none; margin-top: auto; padding-top: 4px; } .pricing-cta-link:hover { text-decoration: underline; } .pricing-btn { text-align: center; margin-top: auto; } .pricing-note { font-size: 13px; color: var(--muted); text-align: center; margin-top: 32px; } @media (max-width: 960px) { .pricing-grid { grid-template-columns: 1fr; max-width: 480px; } } /* ══════════════════════════════════════════════════ PERSONA FIT STRIP ══════════════════════════════════════════════════ */ .persona-fit-strip { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 20px 0 40px; } .persona-fit-item { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--navy); font-weight: 500; } .pf-check { color: var(--blue); font-size: 15px; font-weight: 700; line-height: 1; }