/* 123-uren.nl – same colours as the app: navy #14213D, orange #F26B1D */
:root { --ink:#14213d; --ink-2:#39445f; --muted:#6b7590; --orange:#f26b1d; --orange-d:#d95a10; --orange-soft:#fff0e6; --navy-soft:#e8ebf3; --bg:#fff; --soft:#f4f5f8; --line:#e3e6ee; --r:16px; --shadow:0 1px 2px rgba(20,33,61,.05),0 10px 30px rgba(20,33,61,.08); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font-family: system-ui,-apple-system,'Segoe UI',Roboto,'Noto Sans','Helvetica Neue',Arial,Tahoma,sans-serif; font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
h1,h2,h3 { margin:0; line-height:1.2; letter-spacing:-.015em; }
h1 { font-size:clamp(30px,4.2vw,50px); font-weight:800; }
h2 { font-size:clamp(24px,2.6vw,32px); font-weight:800; }
h3 { font-size:18px; font-weight:700; }
p { margin:0; }
.wrap { max-width:1160px; margin:0 auto; padding:0 22px; }
.narrow { max-width:820px; }
.center { text-align:center; }
.muted { color:var(--muted); }
.small { font-size:14.5px; }
.lead { font-size:clamp(17px,1.6vw,20px); color:var(--ink-2); }
.eyebrow { font-size:13px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--orange); margin-bottom:12px; }
[dir=rtl] .flip { transform:scaleX(-1); }
.brand { display:inline-flex; align-items:center; gap:7px; font-weight:800; font-size:21px; letter-spacing:-.02em; text-decoration:none; color:var(--ink); }
.brand b { background:var(--orange); color:#fff; border-radius:9px; padding:1px 8px; }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:0 22px; border-radius:12px; border:0; background:var(--ink); color:#fff; font:inherit; font-size:16px; font-weight:700; text-decoration:none; cursor:pointer; white-space:nowrap; transition:background .15s,transform .15s; }
.btn:hover { background:#0c1630; }
.btn:active { transform:translateY(1px); }
.btn-orange { background:var(--orange); }
.btn-orange:hover { background:var(--orange-d); }
.btn-ghost { background:var(--soft); color:var(--ink); }
.btn-ghost:hover { background:#e8eaf1; }
.btn-sm { min-height:40px; padding:0 16px; font-size:15px; }
.btn-lg { min-height:54px; padding:0 28px; font-size:17px; }
.btn-block { width:100%; }
.icon-btn { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:11px; border:0; background:var(--soft); color:var(--ink); cursor:pointer; }

/* Header */
.top { position:sticky; top:0; z-index:30; background:rgba(255,255,255,.94); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.top-in { display:flex; align-items:center; gap:24px; height:68px; }
.nav { display:flex; align-items:center; gap:4px; margin-inline-start:12px; }
.nav > a, .drop-btn { padding:9px 13px; border-radius:10px; text-decoration:none; font-weight:600; font-size:15.5px; color:var(--ink-2); background:none; border:0; font-family:inherit; cursor:pointer; display:inline-flex; align-items:center; gap:4px; }
.nav > a:hover, .drop-btn:hover, .nav > a[aria-current] { background:var(--soft); color:var(--ink); }
.drop { position:relative; }
.drop-menu { display:none; position:absolute; inset-inline-start:0; top:calc(100% + 8px); width:560px; background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:10px; grid-template-columns:1fr 1fr; gap:4px; }
.drop.on .drop-menu { display:grid; }
.drop-menu a, .mmenu-feats a { display:flex; gap:12px; align-items:flex-start; padding:11px 12px; border-radius:11px; text-decoration:none; }
.drop-menu a:hover, .mmenu-feats a:hover { background:var(--soft); }
.drop-menu svg, .mmenu-feats svg { flex:none; color:var(--orange); margin-top:3px; }
.drop-menu strong, .mmenu-feats strong { display:block; font-size:15px; }
.drop-menu small, .mmenu-feats small { display:block; color:var(--muted); font-size:13.5px; line-height:1.45; }
.top-actions { margin-inline-start:auto; display:flex; align-items:center; gap:10px; }
.lang-btn { display:inline-flex; align-items:center; gap:7px; height:40px; padding:0 12px; border-radius:10px; border:1px solid var(--line); background:#fff; font:inherit; font-size:14.5px; font-weight:600; color:var(--ink-2); cursor:pointer; max-width:190px; }
.lang-btn span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.link-login { text-decoration:none; font-weight:700; font-size:15.5px; padding:8px 10px; }
.menu-btn { display:none; }

/* Dialogs: language list (English alone on top, then two per row) and phone menu */
dialog { border:0; padding:0; border-radius:20px; box-shadow:0 30px 80px rgba(20,33,61,.3); color:var(--ink); }
dialog::backdrop { background:rgba(20,33,61,.45); }
.langs { width:min(520px,94vw); max-height:86vh; }
.langs-head, .mmenu-head { display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--line); position:sticky; top:0; background:#fff; }
.langs-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; padding:14px; }
.langs-grid a { display:block; padding:10px 12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-radius:11px; text-decoration:none; font-weight:600; background:var(--soft); text-align:center; }
.langs-grid a:first-child { grid-column:1 / -1; }
.langs-grid a:hover { background:var(--navy-soft); }
.langs-grid a[aria-current] { background:var(--ink); color:#fff; }
.mmenu { width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; margin:0; border-radius:0; padding-bottom:24px; }
.mmenu > *:not(.mmenu-head) { margin-inline:18px; }
.mmenu-label { font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-top:16px; margin-bottom:4px; }
.mmenu-feats { display:grid; gap:2px; }
.mmenu-link { display:flex; align-items:center; gap:8px; width:calc(100% - 36px); padding:14px 4px; border:0; border-top:1px solid var(--line); background:none; font:inherit; font-weight:700; font-size:17px; text-decoration:none; color:var(--ink); cursor:pointer; text-align:start; }
.mmenu .btn { width:calc(100% - 36px); margin-top:14px; }

/* Hero */
.hero { padding:72px 0 64px; background:linear-gradient(180deg,#fff 0%,var(--soft) 100%); }
.hero-in { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); grid-template-areas:'eyebrow eyebrow' 'title title' 'text mock'; column-gap:56px; align-items:start; }
.hero-in > .mock { margin-top:14px; }
.hero-in > .eyebrow { grid-area:eyebrow; }
.hero-in > h1 { grid-area:title; margin-bottom:6px; }
.hero-text { grid-area:text; }
.hero-in > .mock { grid-area:mock; }
.hero-text .lead { margin:18px 0 28px; max-width:600px; }
.hero-act { margin-bottom:12px; }
.one-line { white-space:nowrap; }
.mock { overflow:hidden; background:#fff; border-radius:20px; box-shadow:var(--shadow); padding:18px; border:1px solid var(--line); }
.mock-bar { display:flex; gap:6px; margin-bottom:14px; }
.mock-bar span { width:10px; height:10px; border-radius:50%; background:var(--line); }
.mock table { width:100%; border-collapse:collapse; font-size:14px; }
.mock th { font-size:12px; color:var(--muted); font-weight:700; padding:6px 4px; }
.mock td { padding:5px 3px; text-align:center; border-top:1px solid var(--soft); }
.mock td:first-child { text-align:start; font-weight:700; white-space:nowrap; }
.mock .cell { display:inline-block; min-width:44px; padding:6px 4px; border:1.5px solid var(--line); border-radius:8px; font-variant-numeric:tabular-nums; }
.mock .sum { font-weight:800; }
.mock-foot { display:flex; justify-content:space-between; align-items:center; margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
.pill { display:inline-flex; align-items:center; gap:6px; background:#e2f4ec; color:#0c5f44; border-radius:999px; padding:5px 12px; font-size:13px; font-weight:700; }

/* Sections */
.sec { padding:76px 0; }
.sec-tight { padding:36px 0 64px; }
.sec-soft { background:var(--soft); }
.h2c { text-align:center; margin-bottom:36px; }
.sub-c { max-width:640px; margin:-20px auto 32px; }
.page-hero { padding:64px 0 28px; text-align:center; }
.page-hero .lead { margin:16px auto 26px; max-width:680px; }
.feats { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.feat { display:flex; flex-direction:column; gap:8px; padding:24px; border:1px solid var(--line); border-radius:var(--r); text-decoration:none; background:#fff; transition:box-shadow .15s,transform .15s; }
.feat:hover { box-shadow:var(--shadow); transform:translateY(-2px); }
.feat p { color:var(--muted); font-size:15.5px; flex:1; }
.feat-ic { width:46px; height:46px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; background:var(--orange-soft); color:var(--orange); flex:none; }
.more { display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:15px; color:var(--orange); }
.steps { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.steps li { background:#fff; border-radius:var(--r); padding:26px; box-shadow:var(--shadow); }
.steps .num { display:inline-flex; width:36px; height:36px; border-radius:50%; background:var(--ink); color:#fff; font-weight:800; align-items:center; justify-content:center; margin-bottom:14px; }
.steps p { color:var(--muted); margin-top:8px; font-size:15.5px; }
.chips { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:28px; }
.chips a { padding:7px 14px; border-radius:999px; background:var(--soft); text-decoration:none; font-size:15px; font-weight:600; }
.chips a:hover { background:var(--navy-soft); }
.center .lead { margin-top:14px; }
.plans { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:980px; margin:0 auto 18px; }
.plan { background:#fff; border:2px solid var(--line); border-radius:20px; padding:26px; display:flex; flex-direction:column; gap:6px; }
.plan-hi { border-color:var(--orange); box-shadow:var(--shadow); }
.plan .price { font-size:40px; font-weight:800; margin-top:10px; line-height:1.1; }
.plan .price small { font-size:16px; font-weight:600; color:var(--muted); }
.plan .seats { font-weight:700; margin-top:8px; }
.plan .small { display:flex; gap:6px; align-items:center; color:var(--ink-2); margin-bottom:14px; }
.plan .small svg, .incl svg { color:#12805c; flex:none; }
.incl { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:12px 28px; }
.incl li { display:flex; gap:10px; align-items:center; }
.table-wrap { overflow-x:auto; }
.cmp { width:100%; border-collapse:collapse; background:#fff; border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); }
.cmp th, .cmp td { padding:14px 18px; text-align:start; border-bottom:1px solid var(--line); }
.cmp tr:last-child td { border-bottom:0; }
.cmp th { font-size:14px; color:var(--muted); }
.cmp .us { background:var(--orange-soft); font-weight:800; color:var(--ink); }
.blocks { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.block { padding:28px; border:1px solid var(--line); border-radius:var(--r); }
.block h2 { font-size:21px; margin-bottom:10px; }
.block p { color:var(--ink-2); }
.faq details { border-bottom:1px solid var(--line); }
.faq summary { cursor:pointer; list-style:none; padding:18px 0; font-weight:700; font-size:17.5px; display:flex; justify-content:space-between; gap:16px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:'+'; font-size:24px; line-height:1; color:var(--muted); }
.faq details[open] summary::after { content:'–'; }
.faq p { padding:0 0 18px; color:var(--ink-2); }
.others { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.other { display:inline-flex; align-items:center; gap:8px; padding:10px 16px; background:#fff; border-radius:999px; text-decoration:none; font-weight:600; border:1px solid var(--line); }
.other svg { color:var(--orange); }
.ccards { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.ccard { display:flex; gap:14px; align-items:center; padding:20px; border:1px solid var(--line); border-radius:var(--r); text-decoration:none; }
a.ccard:hover { box-shadow:var(--shadow); }
.ccard small { display:block; color:var(--muted); font-size:13.5px; }
.ccard strong { display:block; font-size:17px; }
.legal h2 { font-size:21px; margin:34px 0 10px; }
.legal p { margin-bottom:10px; color:var(--ink-2); }
.note { display:inline-block; margin-top:16px; background:var(--navy-soft); border-radius:12px; padding:10px 16px; font-size:15px; }
.cta { background:var(--ink); color:#fff; padding:56px 0; }
.cta-in { display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; }
.cta p { color:#c3cbe0; margin-top:8px; }
.cta-act { display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.cta-act small { color:#c3cbe0; }

/* Footer */
.foot { background:#0c1630; color:#c3cbe0; padding:56px 0 28px; font-size:15px; }
.foot .brand { color:#fff; }
.foot-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:32px; }
.foot-grid > div { display:flex; flex-direction:column; gap:9px; }
.foot h3 { color:#fff; font-size:15px; margin-bottom:4px; }
.foot a { text-decoration:none; }
.foot a:hover { color:#fff; }
.foot .muted { color:#8d97b3; }
.foot-bottom { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; border-top:1px solid #23304f; margin-top:40px; padding-top:22px; font-size:13.5px; color:#8d97b3; }

/* Tablet and phone: same items, menu behind the button */
@media (max-width:980px) {
  .nav, .link-login { display:none; }
  .menu-btn { display:inline-flex; }
  .hero-in { grid-template-columns:minmax(0,1fr); grid-template-areas:'eyebrow' 'title' 'text' 'mock'; row-gap:0; }
  .hero-in > .mock { margin-top:36px; }
  .feats, .steps, .plans { grid-template-columns:1fr 1fr; }
  .foot-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:640px) {
  body { font-size:16px; }
  .wrap { padding:0 16px; }
  .top-in { height:62px; gap:10px; }
  .hide-sm { display:none; }
  .lang-btn span { display:none; }
  .lang-btn { padding:0 10px; }
  .hero { padding:44px 0 40px; }
  .sec { padding:52px 0; }
  .feats, .steps, .plans, .blocks, .ccards, .incl, .foot-grid { grid-template-columns:1fr; }
  .btn-lg { width:100%; }
  .cta-act { width:100%; }
  .mock { padding:12px; }
  .mock table { font-size:13px; }
  .mock .cell { min-width:30px; padding:5px 2px; }
  .mock td { padding:4px 1px; }
}