/* omanopa.app. Opbouw naar het voorbeeld van polarsteps.com (bekeken 10-11-2026): een beeldvullende opening met de telefoon
   die van onderen opkomt, daarna één scène per onderdeel met één schuin toestel, een kort etiket en een kop van twee regels,
   wisselende vlakken (room, diep inkt, wit), een zwevende kop en onderaan de hoofdstukken. Letter en kleuren zijn die van de app. */
@font-face { font-family: Figtree; src: url(letters/Figtree-wght.woff2) format('woff2'), url(letters/Figtree-wght.ttf) format('truetype'); font-weight: 300 900; font-display: swap; }
:root {
  --inkt: #0A2231; --diep: #06141F; --merk: #103349; --lei: #5B6B79; --accent: #C4502D; --accent-donker: #AD4324; --accent-licht: #F0906F;
  --wit: #FFFFFF; --room: #FBF3E9; --lijn: rgba(10, 34, 49, 0.12);
  --uit: cubic-bezier(0.23, 1, 0.32, 1);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: Figtree, -apple-system, 'Segoe UI', Roboto, sans-serif; color: var(--inkt); background: var(--room); font-size: 1.125rem; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-wrap: anywhere; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
h1, h2 { font-weight: 800; letter-spacing: -0.025em; text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
.donker :focus-visible, .opening :focus-visible, .boven :focus-visible { outline-color: var(--accent-licht); }

/* woordmerk en knoppen */
.merk { white-space: nowrap; display: inline-flex; align-items: center; min-height: 44px; gap: 9px; font-weight: 800; font-size: 1.5rem; letter-spacing: -0.035em; text-decoration: none; }
.ringen { display: inline-flex; }
.ringen i { width: 24px; height: 24px; border-radius: 50%; border: 4px solid currentColor; }
.ringen i + i { margin-left: -9px; }
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 16px; font-weight: 700; font-size: 1rem; text-decoration: none; white-space: nowrap; transition: transform 160ms var(--uit), background-color 160ms ease; }
.knop:active { transform: scale(0.97); }
.knop.accent { background: var(--accent); color: var(--wit); }
.knop.accent:hover { background: var(--accent-donker); }
/* alleen de knop in de opening: een dunne lichte rand, omdat terracotta in helderheid weinig afsteekt tegen de donkere kaart
   (Robin 11-11 via de keuzepagina: "Ja, een dunne lichte rand om die ene knop") */
.opening .knop.accent { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9); }
.knop.glas { background: rgba(6, 20, 31, 0.45); color: var(--wit); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.knop.glas:hover { background: rgba(6, 20, 31, 0.7); }
.knop.stil { color: var(--inkt); padding: 0 12px; }
.knop.stil:hover { color: var(--accent); }
.knop.klein { min-height: 44px; padding: 0 14px; border-radius: 12px; font-size: 0.92rem; }
.knop.groot { min-height: 56px; padding: 0 26px 0 12px; font-size: 1.05rem; }
.knop.groot img { width: 36px; height: 36px; border-radius: 10px; }

/* opening */
.opening { position: relative; height: max(clamp(680px, 100svh, 980px), 42rem); padding-top: calc(78px + (1rem - 16px) * 4.5); color: var(--wit); background: var(--diep); overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; }
.opening .achter { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; filter: saturate(0.9); }
.opening::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(6, 20, 31, 0.84), rgba(6, 20, 31, 0.62) 55%, rgba(6, 20, 31, 0.74)); }
.opening::after { content: ''; position: absolute; z-index: 2; left: 0; right: 0; bottom: -1px; height: 9vw; background: var(--room); clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.boven { position: absolute; z-index: 4; top: 0; left: 50%; translate: -50% 0; width: min(1280px, 100% - 48px); min-height: 78px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding-top: 30px; color: var(--wit); }
.opening .tekst { position: relative; z-index: 4; flex: none; display: grid; justify-items: center; gap: 18px; padding: clamp(20px, 4.5vh, 64px) 24px 0; }
.opening h1 { font-size: clamp(2.5rem, 5.4vw, 4.25rem); line-height: 1; max-width: 13em; }
.opening .onder { font-size: clamp(1.15rem, 2.1vw, 1.7rem); line-height: 1.25; max-width: 24em; color: rgba(255, 255, 255, 0.92); }
.opening .klein { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.75); }
.opening .toestel { position: relative; z-index: 3; flex: none; width: min(410px, 74vw); margin-top: clamp(24px, 4vh, 48px); filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.45)); }

/* zwevende kop: verschijnt zodra de opening voorbij is */
.zweef { position: fixed; z-index: 20; top: 20px; left: 50%; translate: -50% 0; width: min(640px, 100% - 24px); display: flex; align-items: center; gap: 6px; padding: 6px 8px 6px 16px; border-radius: 18px; background: rgba(255, 255, 255, 0.9); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); box-shadow: 0 6px 24px rgba(10, 34, 49, 0.12); opacity: 0; visibility: hidden; transform: translateY(-16px); transition: opacity 200ms ease, transform 240ms var(--uit), visibility 200ms; }
.zweef.aan { opacity: 1; visibility: visible; transform: none; }
.zweef .merk { margin-right: auto; font-size: 1.3rem; color: var(--inkt); }
.zweef .ringen i { width: 21px; height: 21px; }
@media (max-width: 520px) { .zweef .stil { display: none; } }

/* scènes */
.scene { position: relative; display: grid; align-items: center; padding: clamp(48px, 7vh, 72px) 0; overflow: hidden; overflow: clip; scroll-margin-top: 0; }
.scene .binnen { width: min(1080px, 100% - 48px); margin-inline: auto; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(24px, 6vw, 96px); }
.scene .toestel { width: min(280px, 60vw); justify-self: center; filter: drop-shadow(0 34px 50px rgba(10, 34, 49, 0.28)); }
.scene .tekst { display: grid; gap: 14px; max-width: 26rem; }
.scene.om .toestel { order: 2; }
.scene.om .tekst { justify-self: end; }
.etiket { font-size: 0.86rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-donker); }
.scene h2 { font-size: clamp(2rem, 3.4vw, 2.6rem); line-height: 1.14; }
.scene .tekst p:last-child { font-size: 1.15rem; color: var(--lei); }
.room { background: var(--room); }
.wit { background: var(--wit); }
.donker { background: var(--diep); color: var(--wit); }
.donker .etiket { color: var(--accent-licht); }
.donker .tekst p:last-child, .donker .feiten p { color: #A9BCCB; }
.donker .toestel { filter: drop-shadow(0 34px 60px rgba(0, 0, 0, 0.5)); }
@media (max-width: 800px) {
  .scene { padding: 56px 0 64px; }
  .scene .binnen { grid-template-columns: 1fr; gap: 28px; }
  .scene.om .toestel { order: 0; }
  .scene .tekst, .scene.om .tekst { justify-self: center; text-align: center; justify-items: center; }
}

/* hoofdstukken onderaan (zichtbaar zolang de vier onderdelen in beeld zijn) */
.hoofdstukken { position: fixed; z-index: 15; left: 50%; bottom: 22px; translate: -50% 0; display: flex; gap: 4px; padding: 6px; border-radius: 16px; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 6px 24px rgba(10, 34, 49, 0.14); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 200ms ease, transform 240ms var(--uit), visibility 200ms; }
.hoofdstukken.aan { opacity: 1; visibility: visible; transform: none; }
.hoofdstukken a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 11px; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; color: var(--lei); transition: background-color 160ms ease, color 160ms ease; }
.hoofdstukken a.nu { background: var(--merk); color: var(--wit); }
@media (max-width: 800px) { .hoofdstukken { display: none; } }

/* alleen voor jou */
.veilig { padding: clamp(72px, 10vh, 112px) 0; }
.veilig .binnen { width: min(1080px, 100% - 48px); margin-inline: auto; display: grid; gap: clamp(40px, 6vh, 72px); }
.veilig .kopblok { display: grid; gap: 14px; max-width: 34rem; }
.veilig h2 { font-size: clamp(2.2rem, 4.2vw, 3.4rem); line-height: 1.06; }
.feiten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.feiten div { display: grid; gap: 8px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.22); align-content: start; }
.feiten h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; }
.veilig .verder { color: var(--wit); font-weight: 700; text-underline-offset: 5px; }
@media (max-width: 800px) { .feiten { grid-template-columns: 1fr; gap: 22px; } }

/* slot */
.slot { text-align: center; padding: clamp(72px, 10vh, 112px) 24px; display: grid; justify-items: center; gap: 20px; }
.slot h2 { font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.02; }
.slot p { font-size: 1.25rem; color: var(--lei); max-width: 24em; }
.slot .knop.groot { margin-top: 8px; }
.slot .klein a { color: var(--merk); font-weight: 600; text-underline-offset: 3px; }
.slot .klein { font-size: 0.9rem; }

/* voet */
.voet { background: var(--wit); border-top: 1px solid var(--lijn); padding: 34px 0; font-size: 0.95rem; color: var(--lei); }
.voet .binnen { width: min(1080px, 100% - 48px); margin-inline: auto; display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; }
.voet .merk { font-size: 1.15rem; color: var(--inkt); margin-right: auto; }
.voet .ringen i { width: 19px; height: 19px; border-width: 3px; }
.voet nav { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; }
.voet .noot { flex-basis: 100%; font-size: 0.9rem; order: 2; }
/* de wettelijke bedrijfsgegevens: een eigen regel onder de links (Robin 11-11 via de keuzepagina) */
.voet .bedrijf { flex-basis: 100%; font-size: 0.9rem; order: 1; }
.voet a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.voet a:hover { color: var(--inkt); text-decoration: underline; }

/* leespagina (privacy) */
.leeskop { background: var(--wit); border-bottom: 1px solid var(--lijn); }
.leeskop nav { width: min(760px, 100% - 40px); margin-inline: auto; min-height: 68px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.leeskop .knop { background: var(--merk); color: var(--wit); }
.lees { background: var(--wit); padding: clamp(40px, 6vw, 80px) 0; }
.lees .binnen { width: min(760px, 100% - 40px); margin-inline: auto; display: grid; gap: 18px; }
.lees h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.05; }
.lees h2 { font-size: 1.5rem; margin-top: 26px; letter-spacing: -0.02em; }
.lees .groot { font-size: 1.2rem; color: var(--lei); }
.lees ul { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.lees a { color: var(--merk); font-weight: 600; }

/* prijzen: geen kaartjes naast elkaar maar een lijst met regels, zoals een menukaart: links wat het is, rechts wat het kost */
.prijzen { background: var(--wit); }
.prijskop { width: min(880px, 100% - 48px); margin-inline: auto; padding: clamp(56px, 9vh, 110px) 0 clamp(28px, 4vh, 48px); display: grid; gap: 16px; }
.prijskop h1 { font-size: clamp(2.8rem, 7vw, 5rem); line-height: 1; }
.prijskop p:last-child { font-size: clamp(1.15rem, 2vw, 1.45rem); color: var(--lei); max-width: 26em; }
.prijslijst { width: min(880px, 100% - 48px); margin-inline: auto; border-top: 2px solid var(--inkt); }
.prijslijst article { display: grid; grid-template-columns: 1fr 240px; gap: clamp(24px, 5vw, 64px); padding: clamp(32px, 5vh, 52px) 0; border-bottom: 1px solid var(--lijn); }
.prijslijst h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); line-height: 1.1; margin-bottom: 10px; }
.prijslijst .wat > p { font-size: 1.12rem; color: var(--lei); max-width: 30em; }
.prijslijst ul { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; font-weight: 500; }
.prijslijst li { padding-left: 22px; position: relative; }
.prijslijst li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 10px; height: 2px; background: var(--accent); }
.prijslijst .kost { display: grid; gap: 6px; align-content: start; justify-items: start; }
.prijslijst .bedrag { font-size: clamp(2rem, 3.6vw, 2.7rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.prijslijst .onder { font-weight: 700; color: var(--lei); }
.prijslijst .klein { font-size: 0.95rem; color: var(--lei); margin-top: 6px; }
.prijslijst .knop { margin-top: 12px; }
/* telefoon: het bedrag direct onder naam en uitleg, boven de lijst; de kleine regel en de knop sluiten af */
@media (max-width: 700px) {
  .prijslijst article { grid-template-columns: 1fr; gap: 0; }
  .prijslijst .wat, .prijslijst .kost { display: contents; }
  .prijslijst .bedrag { order: 1; margin-top: 18px; }
  .prijslijst .onder { order: 1; margin-top: 6px; }
  .prijslijst ul { order: 2; }
  .prijslijst .klein, .prijslijst .knop { order: 3; justify-self: start; margin-top: 18px; }
}
.vragen { width: min(880px, 100% - 48px); margin-inline: auto; padding: clamp(48px, 8vh, 96px) 0; }
.vragen h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); margin-bottom: 18px; }
.vragen dl { margin: 0; display: grid; }
.vragen dt { font-weight: 700; font-size: 1.12rem; padding-top: 18px; border-top: 1px solid var(--lijn); }
.vragen dd { margin: 6px 0 18px; color: var(--lei); max-width: 38em; }
.koplinks { display: flex; align-items: center; gap: 6px; }
.koplinks a.tekst { display: inline-flex; align-items: center; min-height: 44px; color: var(--wit); font-weight: 700; text-decoration: none; padding: 0 14px; }
@media (max-width: 520px) { .boven .merk { font-size: 1.3rem; } .boven .ringen i { width: 21px; height: 21px; } .boven .knop { padding: 0 16px; } }
.koplinks a.tekst:hover { text-decoration: underline; text-underline-offset: 5px; }

/* beweging: alleen het toestel in de opening (komt op bij het laden) en het toestel in de kaartscène (komt op bij het scrollen);
   al het andere staat er gewoon. Uit bij "minder beweging". */
@media (prefers-reduced-motion: no-preference) {
  .opening .toestel { animation: opkomst 800ms var(--uit) backwards; }
  @supports (animation-timeline: view()) {
    #kaart .toestel { animation: opkomst linear both; animation-timeline: view(); animation-range: entry 0% cover 38%; }
  }
  @keyframes opkomst { from { opacity: 0; transform: translateY(48px); } }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .knop, .hoofdstukken, .hoofdstukken a, .zweef { transition: none; } }