/* ══════════════════════════════════════════════════════════════════════════
   Over mij — bouwt voort op homepagina.css (variabelen, knoppen, reveal, tijdlijn)
   ══════════════════════════════════════════════════════════════════════════ */

/* Iconen mogen hun eigen lettertype houden binnen kop-fonts */
.om .om_woord_icoon.material-symbols-outlined,
.om .om_vrij_tekst h3 .material-symbols-outlined,
.om .om_vergelijk h3 .material-symbols-outlined,
.om .om_feit .material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal; font-style: normal; letter-spacing: normal; text-transform: none;
}

/* ── Hero ────────────────────────────────────────────────────────────── */
.om_hero { padding-bottom: clamp(72px, 9vw, 120px); }
.om_hero .hp_hero_titel { font-size: clamp(2.6rem, 6vw, 4.6rem); }
.om_hero_foto { display: flex; justify-content: center; }
.om_hero_foto .hp_over_foto { max-width: 400px; }
.om_hero .hp_over_kaartje { color: var(--inkt); }
.om .om_kaartje--rechts { left: auto; right: -22px; bottom: auto; top: 34px; animation-delay: -2.5s; }

/* ── Feitjes-band ────────────────────────────────────────────────────── */
.om_feiten { position: relative; z-index: 2; margin-top: -44px; }
.om_feiten_grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.om_feit {
    display: flex; align-items: center; gap: 14px;
    background: #fff; border: 1px solid var(--rand); border-radius: 20px; padding: 18px 20px;
    box-shadow: 0 24px 48px -32px rgba(60, 30, 10, .45);
}
.om_feit .material-symbols-outlined {
    flex: 0 0 44px; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center;
    background: var(--oranje-licht); color: var(--oranje-donker); font-size: 1.35rem;
}
.om_feit strong { display: block; font: 800 .98rem/1.25 var(--kop-font); color: var(--inkt); }
.om_feit small { color: var(--grijs); font-size: .82rem; }

/* ── Drie woorden ────────────────────────────────────────────────────── */
.om_woorden { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.om_woord {
    position: relative; overflow: hidden; background: #fff; border: 1px solid var(--rand);
    border-radius: 26px; padding: 32px 28px;
    transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s;
}
.om_woord:hover { transform: translateY(-6px); border-color: rgba(244, 122, 32, .4); box-shadow: 0 30px 60px -34px rgba(60, 30, 10, .45); }
.om_woord_nr {
    position: absolute; right: 18px; top: 4px;
    font: 800 5.5rem/1 var(--kop-font); color: var(--oranje); opacity: .08; letter-spacing: -.05em;
    transition: opacity .4s, transform .6s var(--ease);
}
.om_woord:hover .om_woord_nr { opacity: .16; transform: translateY(6px); }
.om_woord_icoon {
    width: 54px; height: 54px; border-radius: 18px; display: grid; place-items: center; font-size: 1.6rem;
    background: linear-gradient(140deg, var(--oranje), #ffb27a); color: #fff; margin-bottom: 22px;
    box-shadow: 0 14px 28px -14px rgba(244, 122, 32, .8);
    transition: transform .5s var(--ease);
}
.om_woord:hover .om_woord_icoon { transform: rotate(-8deg) scale(1.08); }
.om_woord h3 { font: 800 1.6rem/1.1 var(--kop-font); letter-spacing: -.02em; color: var(--inkt); margin: 0 0 10px; }
.om_woord p { margin: 0; color: var(--grijs); line-height: 1.7; }

/* ── Buiten werktijd ─────────────────────────────────────────────────── */
.om_vrij { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; align-items: stretch; }
.om_vrij_kaart {
    display: flex; flex-direction: column; background: #fff; border: 1px solid var(--rand);
    border-radius: 26px; overflow: hidden;
}
.om_vrij_tekst { padding: 24px 26px 28px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.om_vrij_tekst h3 { display: flex; align-items: center; gap: 8px; font: 800 1.3rem var(--kop-font); color: var(--inkt); margin: 0; }
.om_vrij_tekst h3 .material-symbols-outlined { color: var(--oranje); font-size: 1.4rem; }
.om_vrij_tekst p { margin: 0; color: var(--grijs); line-height: 1.65; }
.om_hint { margin-top: auto; color: var(--oranje-donker); font: 600 .82rem var(--body-font); }

/* Vissen */
.om_water {
    position: relative; height: 200px; border: 0; padding: 0; cursor: pointer; overflow: hidden; width: 100%;
    background: linear-gradient(#fff3ea 0%, #ffe3cf 46%, #3a8fb7 46%, #1f6d91 100%);
    -webkit-tap-highlight-color: transparent;
}
.om_lijn { position: absolute; left: 50%; top: 0; width: 1.5px; height: 46%; background: rgba(28, 19, 14, .35); transform-origin: top; }
.om_dobber {
    position: absolute; left: calc(50% - 9px); top: calc(46% - 26px); width: 18px; height: 34px;
    border-radius: 9px 9px 10px 10px; background: linear-gradient(#e5391f 0 50%, #fff 50% 100%);
    box-shadow: 0 2px 0 rgba(0, 0, 0, .15);
    animation: om_dobber 3s ease-in-out infinite;
}
.om_golf {
    position: absolute; left: 50%; top: 46%; width: 60px; height: 12px; margin: -6px 0 0 -30px;
    border: 2px solid rgba(255, 255, 255, .55); border-radius: 50%; opacity: 0;
    animation: om_golf 3s ease-out infinite;
}
.om_golf--2 { animation-delay: 1.5s; }
.om_beet {
    position: absolute; left: 50%; top: 18px; transform: translate(-50%, -8px); opacity: 0;
    background: var(--inkt); color: #fff; font: 800 .9rem var(--kop-font); padding: 8px 14px; border-radius: 999px; white-space: nowrap;
    transition: opacity .3s, transform .4s var(--ease);
}
.om_water.is_beet .om_dobber { animation: om_beet .5s ease-in-out 3; }
.om_water.is_beet .om_golf { animation-duration: .8s; }
.om_water.is_beet .om_beet, .om_water.is_wachten .om_beet { opacity: 1; transform: translate(-50%, 0); }
@keyframes om_dobber { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(5px) rotate(3deg); } }
@keyframes om_golf { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(2.2); opacity: 0; } }
@keyframes om_beet { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(22px); } }

/* Darts */
.om_bord_vak { background: radial-gradient(circle at 50% 45%, #3a2214, var(--inkt)); padding: 18px; display: flex; justify-content: center; }
.om_bord { width: 100%; max-width: 230px; height: auto; display: block; overflow: visible; }
.om_bord_rand { fill: #111; }
.om_vak--enkel_a { fill: #1b1b1b; }
.om_vak--enkel_b { fill: #f3e6cc; }
.om_vak--triple_a, .om_vak--dubbel_a { fill: #d23a2a; }
.om_vak--triple_b, .om_vak--dubbel_b { fill: #1f8a4c; }
.om_vak { stroke: #b9b9b9; stroke-width: .6; }
.om_bord_getal { fill: #fff; font: 700 17px var(--kop-font); text-anchor: middle; }
.om_pijl { animation: om_raak .35s var(--ease) both; }
.om_pijl circle { fill: var(--oranje); stroke: #fff; stroke-width: 4; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .6)); }
@keyframes om_raak { from { transform: scale(2.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.om_darts_balk { margin-top: auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.om_gooi { min-height: 46px; padding: 0 18px; font-size: .9rem; }
.om_score { font: 700 .9rem var(--kop-font); color: var(--inkt); }

/* ── Klantverhaal ────────────────────────────────────────────────────── */
.om_klant { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(36px, 6vw, 80px); align-items: center; }
.om_klant_kaart { background: #fff; border-radius: 28px; padding: 28px; border: 1px solid var(--rand); box-shadow: 0 30px 60px -36px rgba(60, 30, 10, .45); }
.om_voor_na { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.om_voor, .om_na { border-radius: 20px; padding: 20px 22px; }
.om_voor { background: #f4efeb; }
.om_na { background: linear-gradient(140deg, var(--inkt), #3a2214); color: #fff; }
.om_voor_na_label { display: inline-block; font: 800 .72rem/1 var(--kop-font); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 12px; color: var(--grijs); }
.om_na .om_voor_na_label { color: var(--oranje); }
.om_voor ul, .om_na ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.om_voor li, .om_na li { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.om_voor li { color: var(--grijs); text-decoration: line-through; text-decoration-color: rgba(124, 106, 95, .5); }
.om_voor li .material-symbols-outlined { color: #b6a59a; }
.om_na li .material-symbols-outlined { color: var(--oranje); }
.om_voor_na_pijl {
    align-self: center; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
    background: var(--oranje); color: #fff; font-family: 'Material Symbols Outlined';
    animation: hp_dobber 2.4s ease-in-out infinite;
}

/* ── Vergelijking ────────────────────────────────────────────────────── */
.om_vergelijk { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.om_vergelijk_kolom { border-radius: 26px; padding: 30px 28px; }
.om_vergelijk_kolom h3 { display: flex; align-items: center; gap: 12px; font: 800 1.25rem var(--kop-font); margin: 0 0 20px; }
.om_vergelijk_kolom ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.om_vergelijk_kolom li { display: flex; align-items: flex-start; gap: 12px; line-height: 1.5; }
.om_vergelijk_kolom li .material-symbols-outlined {
    flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 1rem;
    font-family: 'Material Symbols Outlined';
}
.om_vergelijk_kolom--groot { background: #f4efeb; color: var(--grijs); }
.om_vergelijk_kolom--groot h3 { color: var(--grijs); }
.om_vergelijk_kolom--groot li .material-symbols-outlined { background: #e6ddd6; color: #9c8a7f; }
.om_vergelijk_kolom--ik { background: var(--inkt); color: #fff; box-shadow: 0 30px 60px -30px rgba(28, 19, 14, .6); }
.om_vergelijk_kolom--ik h3 img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--oranje); }
.om_vergelijk_kolom--ik li .material-symbols-outlined { background: var(--oranje); color: #fff; }

/* ── Techniek ────────────────────────────────────────────────────────── */
.om_tech { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(36px, 6vw, 80px); align-items: center; }
.om_stack { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.om_stack li {
    display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 10px;
    background: #fff; border: 1px solid var(--rand); border-radius: 20px; font: 700 .92rem var(--kop-font); color: var(--inkt);
    transition: transform .4s var(--ease), border-color .3s;
}
.om_stack li:hover { transform: translateY(-4px); border-color: var(--oranje); }
.om_stack li i { font-size: 2.2rem; color: var(--oranje-donker); }
.om_stack_iconen { display: flex; gap: 6px; }
.om_stack li:first-child { grid-column: 1 / -1; flex-direction: row; justify-content: center; background: var(--inkt); color: #fff; border-color: var(--inkt); font-size: 1.1rem; }
.om_stack li:first-child i { color: #ff2d20; }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .om_feiten_grid { grid-template-columns: repeat(2, 1fr); }
    .om_woorden, .om_vrij { grid-template-columns: 1fr 1fr; }
    .om_vrij_kaart:last-child { grid-column: 1 / -1; }
    .om_klant, .om_tech { grid-template-columns: 1fr; }
    .om_hero_foto { margin-top: 12px; }
}

@media (max-width: 720px) {
    .om_hero_foto .hp_over_foto { max-width: 300px; }
    .om .om_kaartje--rechts { right: 4px; top: 18px; }
    .om_feiten { margin-top: -32px; }
    .om_feiten_grid { grid-template-columns: 1fr; gap: 10px; }
    .om_feit { padding: 14px 16px; }
    .om_woorden, .om_vrij, .om_vergelijk { grid-template-columns: 1fr; }
    .om_woord { padding: 26px 22px; }
    .om_vrij_kaart:last-child { grid-column: auto; }
    .om_water { height: 170px; }
    .om_klant_kaart { padding: 18px; }
    .om_vergelijk_kolom { padding: 24px 20px; }
    .om_darts_balk .om_gooi { flex: 1 1 100%; }
}