/* Genesis Technology BV – eenvoudige, moderne en responsieve stijl */
:root{
  --bg:#0b1220; --bg-soft:#0f172a; --card:#111827; --text:#e5e7eb; --muted:#9ca3af;
  --brand1:#0ea5e9; --brand2:#6366f1; --accent:#10b981; --max:1120px; --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.25); --gap:18px;
}
*{box-sizing:border-box}
body{margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif; color:var(--text); background:linear-gradient(135deg,var(--bg) 0%, var(--bg-soft) 100%);} 
.wrap{max-width:var(--max); margin:auto; padding:0 18px}
a{color:var(--brand1)}

/* Header */
header{position:sticky; top:0; z-index:20; backdrop-filter:saturate(1.2) blur(8px); background:rgba(11,18,32,.6); border-bottom:1px solid rgba(255,255,255,.06)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0}
.logo{display:flex; align-items:center; gap:10px}
.logo img{height:80px; width:auto; display:block}
.brand{font-size:130%;font-weight:700; letter-spacing:.2px}
.cta{display:inline-flex; align-items:center; gap:10px; padding:10px 16px; border-radius:999px; color:white; background:linear-gradient(90deg,var(--brand1),var(--brand2)); border:none; box-shadow:var(--shadow); text-decoration:none; font-weight:600}

/* Hero */
.hero{position:relative; overflow:hidden; padding:64px 0 36px; background:radial-gradient(1200px 400px at 20% -10%, rgba(14,165,233,.35), transparent 60%), radial-gradient(1000px 400px at 80% 0%, rgba(99,102,241,.35), transparent 60%); border-bottom:1px solid rgba(255,255,255,.06)}
.hero h1{font-size:clamp(28px,4vw,44px); line-height:1.15; margin:14px 0 10px}
.hero p{font-size:clamp(16px,2.2vw,18px); color:var(--muted); margin:0 0 18px}
.pill{display:inline-block; font-size:12px; color:#0f172a; background:var(--accent); padding:4px 10px; border-radius:999px; font-weight:700}

/* Cards & grid */
.card{background:rgba(17,24,39,.75); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
.card h3{margin:.2rem 0 .4rem; font-size:20px}
.card p{margin:.2rem 0; color:var(--muted)}
.img{width:100%; height:220px; border-radius:10px; object-fit:cover; border:1px solid rgba(255,255,255,.08); box-shadow:0 8px 24px rgba(0,0,0,.35)}

.grid{display:grid; gap:var(--gap); grid-template-columns:repeat(12,1fr)}
.grid > *{grid-column:span 12}
@media(min-width:720px){ .grid > .two, .grid > .three, .grid > .four{grid-column:span 6} }
@media(min-width:1024px){ .grid > .two{grid-column:span 6} .grid > .three{grid-column:span 4} .grid > .four{grid-column:span 3} }

/* Utilities */
[class^="col-"],[class*=" col-"]{grid-column:span 12}
@media(min-width:720px){ .col-md-6{grid-column:span 6} .col-md-4{grid-column:span 4} .col-md-3{grid-column:span 3} }
@media(min-width:1024px){ .col-lg-12{grid-column:span 12} .col-lg-9{grid-column:span 9} .col-lg-8{grid-column:span 8} .col-lg-6{grid-column:span 6} .col-lg-5{grid-column:span 5} .col-lg-4{grid-column:span 4} .col-lg-3{grid-column:span 3} .col-lg-2{grid-column:span 2} }

/* Footer */
footer{margin-top:36px; padding:22px 0; color:var(--muted); border-top:1px solid rgba(255,255,255,.06)}
.small{font-size:14px}

figure{margin:0}
figcaption{font-size:12px; color:var(--muted); margin-top:6px}