/* ═══════════════════════════════════════════════════════════════
   DreamPOS marketingsite — stijlen
   Handgeschreven. De HTML wordt gegenereerd (_src/build-site.js),
   deze stylesheet niet.
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --ink:#142824; --ink-2:#203b36;
  --paper:#f6f0e8; --cream:#fffaf4; --white:#fff;
  --orange:#c2601a;          /* donkerder dan het oude #ee8a4b: haalt AA op paper */
  --orange-bright:#ee8a4b;   /* decoratief, nooit voor tekst op licht */
  --line:rgba(20,40,36,.14);
  --muted:#5b6a66;           /* 4.6:1 op --paper */
  --radius:24px;
  --shadow:0 28px 80px rgba(26,48,43,.13);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'DM Sans',system-ui,sans-serif; line-height:1.55;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
button,input,textarea{font:inherit}
a{color:inherit;text-decoration:none}
button{color:inherit}
h1,h2,h3,p{margin-top:0}
h1,h2{font-family:'Manrope',sans-serif;letter-spacing:-.052em;line-height:1.05}
h1 em,h2 em{color:var(--orange);font-style:normal}
img,video{max-width:100%;display:block}

/* Zichtbare focus voor toetsenbordgebruik — nooit weghalen. */
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:6px}

.skip-link{position:fixed;left:12px;top:-70px;z-index:999;background:#fff;padding:12px 18px;border-radius:10px;font-weight:700;box-shadow:var(--shadow);transition:top .18s}
.skip-link:focus{top:12px}

/* ── Knoppen ─────────────────────────────────────────────── */
.button{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:none;border-radius:12px;padding:15px 22px;
  font-weight:700;font-size:14px;cursor:pointer;text-align:center;
  transition:transform .2s,box-shadow .2s,background .2s;
}
.button:hover{transform:translateY(-2px)}
.button-small{padding:10px 15px;background:var(--ink);color:#fff;border-radius:10px}
.button-primary{color:#fff;background:var(--ink);box-shadow:0 10px 30px rgba(20,40,36,.2)}
.button-primary:hover{box-shadow:0 14px 34px rgba(20,40,36,.28)}
.button-quiet{border:1px solid var(--line);background:rgba(255,255,255,.5)}
.button-light{background:#fff;color:var(--ink)}
.button-outline{border:1px solid rgba(255,255,255,.3);color:#fff}
.play{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:var(--orange-bright);color:#3a2109;font-size:9px;flex:none}

/* ── Kop ─────────────────────────────────────────────────── */
.site-header{
  position:fixed;z-index:100;left:50%;top:16px;transform:translateX(-50%);
  width:min(1240px,calc(100% - 32px));height:70px;padding:0 16px 0 22px;
  display:flex;align-items:center;gap:28px;
  border:1px solid rgba(255,255,255,.72);background:rgba(255,250,244,.82);
  backdrop-filter:blur(18px);border-radius:18px;
  box-shadow:0 10px 36px rgba(28,50,45,.08);transition:.25s;
}
.site-header.scrolled{top:8px;background:rgba(255,250,244,.96);box-shadow:0 12px 36px rgba(28,50,45,.13)}
.brand{display:flex;align-items:center;gap:10px;font:800 19px 'Manrope',sans-serif;letter-spacing:-.6px;white-space:nowrap}
.brand>span:last-child>span{color:var(--orange)}
.brand-mark{width:31px;height:31px;position:relative;display:inline-block;transform:rotate(-5deg);flex:none}
.brand-mark i{position:absolute;display:block;background:var(--ink);border-radius:11px 4px 11px 4px}
.brand-mark i:first-child{width:13px;height:24px;left:4px;top:3px}
.brand-mark i:last-child{width:13px;height:18px;right:3px;bottom:3px;background:var(--orange)}
.main-nav{display:flex;gap:24px;margin:auto;font-size:13px;font-weight:600;color:#3f544f}
.main-nav a,.text-link{transition:color .2s}
.main-nav a:hover,.text-link:hover{color:var(--orange)}
.header-actions{display:flex;align-items:center;gap:14px;font-size:13px;font-weight:700}
.nav-toggle{display:none}

.lang-switch{display:flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.6)}
.lang-switch a{padding:5px 8px;border-radius:6px;font-size:11px;font-weight:800;color:#54635f;letter-spacing:.3px}
.lang-switch a:hover{color:var(--orange)}
.lang-switch a[aria-current]{background:var(--ink);color:#fff}

/* ── Hero ────────────────────────────────────────────────── */
.hero{
  position:relative;min-height:820px;padding:170px max(6vw,32px) 90px;
  display:grid;grid-template-columns:minmax(390px,.86fr) minmax(540px,1.14fr);
  gap:4vw;align-items:center;isolation:isolate;
}
.hero-glow{position:absolute;z-index:-1;width:760px;height:760px;right:-200px;top:-130px;border-radius:50%;background:radial-gradient(circle at 42% 48%,#f6bb8f 0,#eed8c2 34%,rgba(246,240,232,0) 70%)}
.hero-copy{max-width:620px;margin-left:auto;min-width:0}
.eyebrow{display:flex;align-items:center;gap:9px;margin:0 0 20px;color:#4e615c;font-size:11px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase}
.eyebrow>span{width:25px;height:2px;background:var(--orange);flex:none}
h1{margin-bottom:25px;font-size:clamp(52px,6.2vw,92px);font-weight:600}
h1 em{font-weight:500}
.hero-lead{max-width:580px;color:#43544f;font-size:18px;line-height:1.7}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin:32px 0 20px}
.hero-note{display:flex;gap:18px;flex-wrap:wrap;margin:0;padding:0;list-style:none;color:#4f605c;font-size:12px;font-weight:600}
.hero-note li{display:flex;align-items:center;gap:6px}
.hero-note li::before{content:'✓';color:#1f7a5a;font-weight:800}

.product-stage{position:relative;min-height:580px;display:grid;place-items:center;min-width:0}
.stage-orbit{position:absolute;border:1px solid rgba(20,40,36,.12);border-radius:50%;inset:5%}
.orbit-two{inset:15%;border-color:rgba(238,138,75,.22)}
.pos-window{position:relative;z-index:2;width:min(690px,94%);aspect-ratio:1.35;background:#fdfaf6;border:7px solid #243f39;border-radius:24px;box-shadow:0 42px 90px rgba(22,44,39,.25),inset 0 0 0 1px #fff;overflow:hidden;transform:perspective(1400px) rotateY(-5deg) rotateX(2deg);min-width:0}
.pos-topbar{height:50px;padding:0 16px;display:flex;align-items:center;gap:10px;background:#fff;border-bottom:1px solid #e7e6e1;font-size:11px}
.mini-logo{width:25px;height:25px;display:grid;place-items:center;border-radius:7px;background:var(--ink);color:#fff;font-weight:800;flex:none}
.top-status{margin-left:auto;color:#5c736e;white-space:nowrap}
.top-status span{display:inline-block;width:7px;height:7px;margin-right:4px;border-radius:50%;background:#45b68a}
.avatar{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:#f1c4a6;color:#8c4f2c;font-weight:700;flex:none}
.pos-body{display:flex;height:calc(100% - 50px)}
.pos-side{width:55px;padding:20px 0;display:flex;flex-direction:column;align-items:center;gap:22px;color:#9aa7a4;background:#18312c;flex:none}
.pos-side b{width:30px;height:30px;display:grid;place-items:center;border-radius:8px}
.pos-side .active{color:#fff;background:#e7864c}
.pos-workspace{flex:1;padding:21px 23px;background:#f5f2ed;min-width:0}
.workspace-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.workspace-head small{color:#6d7b77;font-size:9px}
.workspace-head h3{margin:2px 0;font:700 17px 'Manrope',sans-serif}
.workspace-head button{border:0;border-radius:8px;padding:8px 12px;background:#18312c;color:#fff;font-size:11px;font-weight:700}
.floor{margin:22px 0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.table{height:78px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:12px;background:#fff;border:1px solid #d9dfdb;box-shadow:0 5px 14px rgba(30,54,48,.05)}
.table span{font-weight:800}
.table small{font-size:9px;color:#6f7d79}
.table.busy{background:#fff4ec;border-color:#efa777}
.table.busy span{color:#c25c22}
.table.round{border-radius:40px}
.workspace-foot{display:flex;align-items:center;gap:12px;padding-top:15px;border-top:1px solid #ddd;font-size:10px;color:#5e6d69}
.workspace-foot strong{margin-left:auto;font-size:12px;color:#253d38}
.dot{display:inline-block;width:6px;height:6px;border-radius:50%}
.green{background:#3a9c74}.orange{background:var(--orange)}
.floating-ticket,.floating-stat{position:absolute;z-index:4;display:flex;align-items:center;background:#fff;box-shadow:0 18px 45px rgba(20,40,36,.17);border:1px solid rgba(20,40,36,.1)}
.floating-ticket{left:1%;bottom:13%;gap:10px;padding:11px 15px;border-radius:13px}
.ticket-icon{width:29px;height:29px;display:grid;place-items:center;border-radius:9px;background:#dff2e9;color:#1e6b4e;font-weight:900;flex:none}
.floating-ticket small,.floating-stat small{display:block;color:#6d7a77;font-size:9px}
.floating-ticket strong{font-size:11px}
.floating-stat{right:2%;top:15%;padding:12px 15px;border-radius:13px;gap:7px}
.floating-stat strong{color:#1c7a5b;font-size:20px}
.floating-stat>span{color:#1c7a5b}

.trust-strip{padding:20px max(6vw,32px);display:flex;align-items:center;gap:40px;border-block:1px solid var(--line);background:rgba(255,255,255,.25)}
.trust-strip p{margin:0;font:600 12px 'Manrope',sans-serif;white-space:nowrap}
.trust-strip div{display:flex;align-items:center;justify-content:space-around;flex:1;gap:16px;color:#4f605c;font-size:10px;font-weight:800;letter-spacing:1.2px}
.trust-strip i{width:4px;height:4px;border-radius:50%;background:var(--orange);flex:none}

/* ── Secties ─────────────────────────────────────────────── */
.section{padding:118px max(6vw,32px)}
.section-intro{max-width:740px;margin:0 auto 60px;text-align:center}
.section-intro .eyebrow{justify-content:center}
.section-intro h2,.flow-copy h2,.contact-copy h2{font-size:clamp(38px,4.5vw,66px);font-weight:600}
.section-intro>p:last-child{color:var(--muted);font-size:17px}
.section-intro.split{max-width:1160px;display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:end;text-align:left}
.section-intro.split .eyebrow{justify-content:flex-start}
.section-intro.split h2{margin:0}
.section-intro.split>p{padding-bottom:10px;color:var(--muted);font-size:17px}

/* ── Voordelen ───────────────────────────────────────────── */
.benefits{background:var(--cream)}
.benefit-grid{max-width:1160px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.benefit-card{position:relative;padding:34px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.benefit-n{font:800 11px 'Manrope',sans-serif;color:var(--orange);letter-spacing:1px}
.benefit-card h3{margin:16px 0 12px;font:700 21px 'Manrope',sans-serif;letter-spacing:-.5px;line-height:1.25}
.benefit-card p{margin:0;color:var(--muted);font-size:14.5px}
.benefit-card.featured{background:var(--ink);color:#fff;border-color:var(--ink)}
.benefit-card.featured .benefit-n{color:var(--orange-bright)}
.benefit-card.featured p{color:#c2cecb}

/* ── Hoe het werkt ───────────────────────────────────────── */
.flow-section{background:var(--ink);color:#fff;display:grid;grid-template-columns:.85fr 1.15fr;gap:7vw;align-items:center}
.eyebrow.light{color:#a4b3af}
.flow-copy>p{color:#b2c0bc;font-size:16px;max-width:520px}
.flow-list{list-style:none;padding:0;margin:34px 0 0}
.flow-list li{border-top:1px solid rgba(255,255,255,.1)}
.flow-list li:last-child{border-bottom:1px solid rgba(255,255,255,.1)}
.flow-list button{display:flex;align-items:center;gap:16px;width:100%;padding:16px 4px;border:0;background:none;color:#8b9c98;text-align:left;cursor:pointer;transition:color .2s}
.flow-list button>span:first-child{flex:none;width:34px;height:34px;display:grid;place-items:center;border:1px solid #536660;border-radius:50%;font-size:12px;font-weight:700;transition:.2s}
.flow-text{display:flex;flex-direction:column}
.flow-list strong{font-size:15px}
.flow-list small{font-size:12px}
.flow-list li.active button{color:#fff}
.flow-list li.active button>span:first-child{background:var(--orange);border-color:var(--orange);color:#fff}

.flow-demo{position:relative;min-height:640px;display:grid;place-items:center;border-radius:35px;background:radial-gradient(circle at 50% 45%,#46665d 0,#2b4841 42%,#1a332e 72%)}
.phone-shell{width:300px;padding:11px;border-radius:35px;background:#0c1714;box-shadow:0 38px 70px rgba(0,0,0,.4)}
.phone-bar{height:33px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;color:#dfe9e6;font-size:9px}
.phone-screen{height:520px;padding:16px;border-radius:25px;background:#f6f2ec;color:var(--ink);overflow:hidden}
.order-head{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:8px}
.order-head>span{display:grid;place-items:center;width:27px;height:27px;border:1px solid #ddd;border-radius:8px;font-size:11px}
.order-head b{font-size:13px}
.order-head small{font-size:10px;color:#6b7a76}
.order-tabs{display:flex;gap:13px;margin:22px 0 14px;font-size:10px;color:#7c8985}
.order-tabs b{color:#c25c22;border-bottom:2px solid #e58247;padding-bottom:5px}
.menu-cards{display:grid;gap:9px}
.menu-cards article{position:relative;display:grid;grid-template-columns:50px 1fr;grid-template-rows:1fr 1fr;align-items:center;padding:8px;background:#fff;border:1px solid #e3e0db;border-radius:12px}
.menu-cards article>div{grid-row:1/3;width:42px;height:42px;display:grid;place-items:center;border-radius:10px;background:#f5e7db;font-size:21px}
.menu-cards b{font-size:11px}
.menu-cards small{font-size:10px;color:#c25c22}
.menu-cards i{position:absolute;right:9px;bottom:9px;width:20px;height:20px;display:grid;place-items:center;border-radius:6px;background:#19342e;color:#fff;font-style:normal;font-size:11px}
.order-total{margin-top:18px;padding:13px;border-radius:11px;background:#19342e;color:#fff;display:flex;justify-content:space-between;font-size:11px}
.flow-caption{position:absolute;right:7%;bottom:7%;max-width:210px;margin:0;color:#d5dfdc;font-size:13px;line-height:1.5}

/* ── Media ───────────────────────────────────────────────── */
.media-section{background:#eae1d6}
.media-grid{max-width:1160px;margin:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.media-card{position:relative;display:block;width:100%;min-height:290px;margin:0;padding:0;border:0;border-radius:var(--radius);overflow:hidden;text-align:left;color:#fff;cursor:pointer;background:#213c36}
.media-card img,.media-card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.media-card .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,20,17,.15) 25%,rgba(8,20,17,.84))}
.media-card>.body{position:absolute;left:24px;right:24px;bottom:22px;display:flex;flex-direction:column;gap:3px}
.media-card .media-label{font-size:10px;font-weight:800;letter-spacing:1.4px;color:#f3cfae}
.media-card b{font:600 21px 'Manrope',sans-serif}
.media-card small{color:#d9e3e0;font-size:13px}
.media-play{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:58px;height:58px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.94);color:var(--ink);font-style:normal;box-shadow:0 10px 30px rgba(0,0,0,.25);transition:transform .2s}
.media-card:hover .media-play{transform:translate(-50%,-50%) scale(1.06)}

.media-empty{max-width:640px;margin:auto;padding:48px 40px;text-align:center;border:1px dashed rgba(20,40,36,.28);border-radius:var(--radius);background:rgba(255,255,255,.55)}
.media-empty h3{margin:0 0 10px;font:700 24px 'Manrope',sans-serif}
.media-empty p{margin:0 0 24px;color:#4c5b57}
.hardware-section{background:var(--cream)}
.hardware-grid{max-width:1160px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.hardware-card{padding:34px;border:1px solid rgba(24,52,46,.13);border-radius:var(--radius);background:#fff;box-shadow:0 12px 35px rgba(22,45,39,.06)}
.hardware-card>span{width:48px;height:48px;display:grid;place-items:center;margin-bottom:25px;border-radius:14px;background:#e0ece8;color:var(--green);font:700 24px 'Manrope',sans-serif}
.hardware-card h3{margin-bottom:10px;font:700 21px 'Manrope',sans-serif}.hardware-card p{color:var(--muted);font-size:15px}.hardware-card small{display:block;margin-top:22px;color:var(--green);font-weight:800;letter-spacing:.3px}
.hardware-note,.compare-foot{max-width:900px;margin:28px auto 0;text-align:center;color:var(--muted);font-size:14px}
.compare-section{background:#fff}
.compare-wrap{max-width:1060px;margin:auto;overflow:auto;border:1px solid var(--line);border-radius:22px;box-shadow:0 18px 55px rgba(25,46,40,.07)}
.compare-table{width:100%;min-width:720px;border-collapse:collapse;text-align:left}.compare-table th,.compare-table td{padding:20px 24px;border-bottom:1px solid var(--line);font-size:14px}.compare-table thead th{background:var(--ink);color:#fff;font:700 13px 'Manrope',sans-serif}.compare-table thead th:nth-child(2){background:var(--green)}.compare-table tbody th{width:27%;font-weight:750}.compare-table tbody td:nth-child(2){background:#edf5f2;color:var(--green)}.compare-table tr:last-child th,.compare-table tr:last-child td{border-bottom:0}
.proof-section{padding-top:40px}.proof-card{max-width:1160px;margin:auto;padding:58px;display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;border-radius:30px;background:var(--green);color:#fff}.proof-card h2{font-size:clamp(34px,4vw,54px)}.proof-card p{color:#dbe9e5}.proof-card ul{list-style:none;margin:0;padding:0}.proof-card li{display:grid;gap:4px;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.16)}.proof-card li:last-child{border-bottom:0}.proof-card li b{font:700 16px 'Manrope',sans-serif}.proof-card li span{color:#cbded8;font-size:13px}

.media-dialog{width:min(900px,calc(100% - 32px));padding:0;border:0;border-radius:22px;background:#0d1c19;color:#fff;box-shadow:0 35px 100px rgba(0,0,0,.45);overflow:visible}
.media-dialog::backdrop{background:rgba(9,25,21,.78);backdrop-filter:blur(6px)}
.dialog-close{position:absolute;right:-8px;top:-8px;z-index:2;width:40px;height:40px;border:0;border-radius:50%;background:#fff;color:#12261f;font-size:22px;line-height:1;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.3)}
.media-dialog video,.media-dialog img{width:100%;border-radius:22px;display:block}
.media-dialog figcaption{padding:16px 22px 20px;color:#c9d6d2;font-size:14px}

/* ── Mogelijkheden ───────────────────────────────────────── */
.feature-bento{max-width:1160px;margin:auto;display:grid;grid-template-columns:1.15fr .85fr;gap:18px}
.feature{position:relative;min-height:300px;padding:34px;border:1px solid var(--line);border-radius:var(--radius);background:var(--cream);overflow:hidden}
.feature h3{font:700 22px 'Manrope',sans-serif;letter-spacing:-.6px;margin:14px 0 8px}
.feature p{max-width:450px;color:var(--muted);font-size:14.5px}
.feature-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:#e1ece7;color:#1d453a;font-weight:900}
.feature-large{min-height:430px;display:grid;grid-template-columns:.78fr 1.22fr;gap:15px;background:var(--ink);color:#fff}
.feature-large p{color:#bdc8c5}
.feature-large .feature-icon{background:rgba(255,255,255,.1);color:#fff}
.feature ul{list-style:none;padding:0;margin-top:24px;color:#c3cfcc;font-size:12.5px}
.feature li{margin:9px 0}
.feature li::before{content:'✓';color:var(--orange-bright);margin-right:8px}
.mini-pos{align-self:end;padding:14px;border-radius:16px;background:#f7f3ed;color:var(--ink);transform:translate(18px,28px) rotate(-2deg);box-shadow:0 25px 50px rgba(0,0,0,.2)}
.mini-cats{display:flex;gap:5px;font-size:9px}
.mini-cats span{padding:5px 10px;border-radius:5px;background:#e5e3df}
.mini-cats .on{background:var(--orange);color:#fff}
.mini-items{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:9px 0}
.mini-items i{padding:9px 7px;border:1px solid #ddd9d3;border-radius:7px;background:#fff;font-size:10px;font-style:normal}
.mini-items b{color:#c25c22}
.mini-pos button{width:100%;padding:9px;border:0;border-radius:7px;background:#19342e;color:#fff;font-size:11px}
.feature-orange{background:var(--orange);color:#fff}
.feature-orange p{color:#ffeadd}
.feature-orange .feature-icon{background:rgba(255,255,255,.16);color:#fff}
.ticket-stack{position:absolute;right:26px;bottom:22px;width:155px;height:135px}
.ticket-stack>i,.ticket-stack>div{position:absolute;width:120px;height:115px;border-radius:8px;background:#fff}
.ticket-stack i:first-child{transform:rotate(-12deg);opacity:.35}
.ticket-stack i:nth-child(2){transform:rotate(8deg);opacity:.6;right:0}
.ticket-stack>div{padding:13px;color:#263c37;left:15px;box-shadow:0 12px 28px rgba(118,55,18,.24)}
.ticket-stack small{font-size:8px}
.ticket-stack b{display:block;margin:8px 0;font-size:11px}
.ticket-stack span{font-size:8px;color:#c25c22}
.channel-row{position:absolute;bottom:30px;display:flex;gap:7px}
.channel-row span{padding:7px 12px;border-radius:20px;background:#fff;border:1px solid var(--line);font-size:10px;font-weight:700}
.bars{position:absolute;right:30px;bottom:0;width:45%;height:120px;display:flex;align-items:end;gap:7px;border-bottom:1px solid #d8ddd9}
.bars i{flex:1;background:linear-gradient(var(--orange),#f6c2a0);border-radius:5px 5px 0 0}
.feature-wide{grid-column:1/-1;min-height:250px;display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}
.staff-list{display:grid;gap:7px}
.staff-list>span{display:grid;grid-template-columns:34px 1fr auto;grid-template-rows:1fr 1fr;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:#fff}
.staff-list i{grid-row:1/3;width:27px;height:27px;display:grid;place-items:center;border-radius:8px;background:#deece6;color:#245544;font-size:9px;font-style:normal;font-weight:700}
.staff-list b{font-size:11px}
.staff-list small{font-size:10px;color:#6d7a77}

/* ── Prijs ───────────────────────────────────────────────── */
.pricing{background:var(--cream)}
.price-card{max-width:1000px;margin:auto;display:grid;grid-template-columns:.85fr 1.15fr;border:1px solid var(--line);border-radius:28px;background:#fff;overflow:hidden;box-shadow:0 24px 60px rgba(30,50,45,.07)}
.price-main{padding:52px 44px;background:var(--ink);color:#fff;display:flex;flex-direction:column;justify-content:center}
.price-from{margin:0;color:#a4b3af;font-size:12px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase}
.price-amount{margin:10px 0 0;font:700 76px 'Manrope',sans-serif;letter-spacing:-.05em;line-height:1;display:flex;align-items:flex-start;gap:4px;flex-wrap:wrap}
.price-amount .cur{font-size:34px;margin-top:8px}
.price-amount small{align-self:flex-end;margin-left:10px;font-size:14px;font-weight:500;color:#a4b3af;letter-spacing:0}
.price-trial{margin:22px 0 0;display:flex;align-items:center;gap:9px;font-size:14px;font-weight:700;color:#ffcfa6}
.price-side{padding:48px 44px;display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.price-list{list-style:none;padding:0;margin:0;display:grid;gap:12px;font-size:15px}
.price-list li{display:flex;align-items:flex-start;gap:11px;color:#33443f}
.price-list li::before{content:'✓';color:var(--orange);font-weight:800;flex:none}
.price-note{margin:0;color:var(--muted);font-size:13px;line-height:1.6}

/* ── Demo ────────────────────────────────────────────────── */
.demo-section{padding-block:90px}
.demo-card{max-width:1160px;min-height:440px;margin:auto;padding:64px;display:grid;grid-template-columns:1fr .75fr;align-items:center;gap:45px;border-radius:32px;background:var(--orange);color:#fff;overflow:hidden}
.demo-card h2{font-size:clamp(40px,4.8vw,66px);font-weight:600}
.demo-card h2 em{color:var(--ink)}
.demo-card>div>p{max-width:560px;color:#ffeee2}
.demo-actions{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:28px}
.demo-actions>a:last-child{font-size:13px;font-weight:700;border-bottom:1px solid rgba(255,255,255,.55);padding-bottom:2px}
.demo-steps{list-style:none;margin:0;padding:0;display:flex;align-items:flex-start;justify-content:center;gap:6px}
.demo-steps li{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1}
.demo-steps b{width:46px;height:46px;display:grid;place-items:center;border-radius:50%;background:var(--ink);font:700 15px 'Manrope',sans-serif}
.demo-steps small{margin-top:10px;font-size:11px;line-height:1.35}
/* Keuzetegels: acht soorten zaken, elk een eigen demo-link. Ze staan onder de
   hoofdknop zodat wie gewoon wil starten niet eerst hoeft te kiezen. */
.demo-kitchens-lead{margin:26px 0 10px;font-size:13px;color:#ffeee2;max-width:560px}
.demo-kitchens{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:560px}
.demo-kitchen{display:flex;align-items:center;gap:7px;padding:9px 11px;border-radius:10px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
  font-size:12px;font-weight:700;line-height:1.2;transition:background .15s,border-color .15s}
.demo-kitchen:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.5)}
.demo-kitchen span{font-size:16px}
@media(max-width:860px){.demo-kitchens{grid-template-columns:repeat(2,1fr)}}
.demo-shop{margin:12px 0 0}
.demo-shop a{font-size:13px;font-weight:700;border-bottom:1px solid rgba(255,255,255,.55);padding-bottom:2px}

/* ── FAQ ─────────────────────────────────────────────────── */
.faq-list{max-width:840px;margin:auto;display:grid;gap:10px}
.faq-item{border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 26px;font:700 17px 'Manrope',sans-serif;cursor:pointer;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-mark{position:relative;flex:none;width:18px;height:18px}
.faq-mark::before,.faq-mark::after{content:'';position:absolute;left:50%;top:50%;background:var(--orange);transform:translate(-50%,-50%);transition:transform .2s}
.faq-mark::before{width:16px;height:2px}
.faq-mark::after{width:2px;height:16px}
.faq-item[open] .faq-mark::after{transform:translate(-50%,-50%) scaleY(0)}
.faq-item p{margin:0;padding:0 26px 24px;color:var(--muted);font-size:15px;max-width:70ch}

/* ── Contact ─────────────────────────────────────────────── */
.contact-section{display:grid;grid-template-columns:1fr 1fr;gap:7vw;background:var(--cream)}
.contact-copy{max-width:570px;margin-left:auto}
.contact-copy>p:nth-of-type(2){color:var(--muted);font-size:17px}
.contact-details{display:flex;flex-direction:column;gap:5px;margin-top:34px;font-size:14px}
.contact-details a{color:#a84f13;font-weight:700}
.contact-details span{color:var(--muted)}
.contact-form{position:relative;max-width:550px;padding:36px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:0 20px 50px rgba(30,50,45,.06)}
.contact-form label{display:block;margin-bottom:16px;color:#54635f;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.7px}
.contact-form input,.contact-form textarea{display:block;width:100%;margin-top:6px;padding:12px 0;border:0;border-bottom:1px solid #d8dfdc;border-radius:0;background:transparent;color:var(--ink);outline:none;font-size:15px;text-transform:none;letter-spacing:0}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--orange)}
.contact-form input[aria-invalid="true"],.contact-form textarea[aria-invalid="true"]{border-color:#b03327}
.contact-form button{width:100%;margin-top:8px}
.contact-form button[disabled]{opacity:.6;cursor:progress;transform:none}
.contact-form>small{display:block;margin-top:12px;color:#6d7a77;text-align:center;font-size:11px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{margin:14px 0 0;padding:0;font-size:13.5px;line-height:1.5;text-align:center}
.form-status:empty{display:none}
.form-status strong{display:block;font-size:15px}
.form-status.ok{color:#186047}
.form-status.err{color:#b03327}

/* ── Voet ────────────────────────────────────────────────── */
.site-footer{padding:70px max(6vw,32px) 26px;background:#102621;color:#fff}
.footer-top{display:flex;flex-wrap:wrap;align-items:center;gap:32px;padding-bottom:56px}
.brand-light .brand-mark i:first-child{background:#fff}
.footer-top p{margin:0;color:#94a6a1}
.footer-top .button{margin-left:auto}
.footer-bottom{padding-top:22px;display:grid;grid-template-columns:1fr auto 1fr;gap:16px;border-top:1px solid rgba(255,255,255,.12);color:#8a9d98;font-size:11.5px}
.footer-bottom nav{display:flex;gap:22px}
.footer-bottom nav a:hover{color:#fff}
.footer-bottom>span:last-child{text-align:right}

/* ── Beweging ────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:none}

/* ── Responsief ──────────────────────────────────────────── */
@media(max-width:1080px){
  .benefit-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:980px){
  .site-header{gap:14px}
  .main-nav{display:none;position:absolute;left:0;right:0;top:78px;padding:18px;flex-direction:column;gap:4px;border-radius:16px;background:#fff;box-shadow:var(--shadow)}
  .main-nav.open{display:flex}
  .main-nav a{padding:10px 6px}
  .nav-toggle{display:flex;width:38px;height:38px;margin-left:auto;align-items:center;justify-content:center;flex-direction:column;gap:5px;border:1px solid var(--line);border-radius:10px;background:transparent;cursor:pointer}
  .nav-toggle span{width:16px;height:2px;background:var(--ink)}
  .header-actions .text-link{display:none}
  .hero{padding-top:145px;grid-template-columns:1fr;text-align:center}
  .hero-copy{margin:auto}
  .hero-copy .eyebrow,.hero-note,.hero-actions{justify-content:center}
  .product-stage{min-height:540px}
  .flow-section{grid-template-columns:1fr}
  .flow-copy{max-width:680px}
  .section-intro.split{grid-template-columns:1fr;gap:20px}
  .feature-bento{grid-template-columns:1fr}
  .feature-wide{grid-column:auto}
  .price-card{grid-template-columns:1fr}
  .demo-card{grid-template-columns:1fr}
  .contact-section{grid-template-columns:1fr}
  .hardware-grid{grid-template-columns:1fr}.proof-card{grid-template-columns:1fr;gap:30px}
  .contact-copy{margin:0}
  .contact-form{max-width:none}
}
@media(max-width:640px){
  .site-header{top:8px;width:calc(100% - 16px);height:60px;padding:0 10px 0 14px;gap:8px}
  .brand{font-size:17px}
  .brand-mark{width:27px;height:27px}
  .header-actions{gap:8px}
  .header-actions .button-small{display:none}
  .lang-switch a{padding:5px 6px;font-size:10px}
  .main-nav .nav-demo{margin-top:6px;padding:13px;border-radius:10px;background:var(--ink);color:#fff;text-align:center}
  .hero{min-height:auto;padding:118px 18px 64px}
  .hero h1{font-size:46px;overflow-wrap:anywhere}
  .hero h1 em{display:block}
  .hero-lead{font-size:15.5px}
  .hero-actions{flex-direction:column}
  .hero-actions .button{width:100%}
  .hero-note{gap:10px;font-size:11px}
  .product-stage{min-height:370px;width:100%;overflow:hidden}
  .pos-window{width:100%;border-width:5px;border-radius:17px}
  .pos-topbar{height:38px}
  .pos-body{height:calc(100% - 38px)}
  .pos-side{width:38px;gap:12px;padding-top:12px}
  .pos-side b{width:25px;height:25px}
  .pos-workspace{padding:12px}
  .workspace-head h3{font-size:13px}
  .floor{margin:12px 0;gap:7px}
  .table{height:47px}
  .table span{font-size:11px}
  .floating-ticket{left:2%;bottom:5%}
  .floating-stat{right:2%;top:5%}
  .trust-strip{padding:16px 18px}
  .trust-strip p{display:none}
  .trust-strip div{overflow-x:auto;justify-content:flex-start;gap:16px;white-space:nowrap;-webkit-overflow-scrolling:touch}
  .section{padding:74px 18px}
  .section-intro{margin-bottom:38px}
  .section-intro h2,.flow-copy h2,.contact-copy h2{font-size:37px}
  .section-intro>p:last-child{font-size:15px}
  .benefit-grid{grid-template-columns:1fr}
  .benefit-card{padding:26px}
  .flow-section{gap:42px}
  .flow-demo{min-height:580px;margin-inline:-18px;border-radius:0}
  .flow-caption{position:static;max-width:none;margin:18px auto 0;padding:0 20px;text-align:center}
  .media-empty{padding:34px 22px}
  .hardware-card{padding:26px}.proof-card{padding:38px 24px;border-radius:22px}.compare-wrap{margin-inline:-4px}
  .feature{padding:26px}
  .feature-large{grid-template-columns:1fr;min-height:560px}
  .mini-pos{transform:translate(9px,10px) rotate(-2deg)}
  .feature-wide{grid-template-columns:1fr;gap:20px}
  .bars{opacity:.55}
  .price-main,.price-side{padding:34px 26px}
  .price-amount{font-size:60px}
  .demo-section{padding:56px 12px}
  .demo-card{padding:42px 24px;border-radius:24px}
  .demo-card h2{font-size:38px}
  .demo-actions{align-items:flex-start;flex-direction:column;gap:16px}
  .demo-steps{flex-wrap:wrap;gap:18px}
  .demo-steps li{flex:0 0 40%}
  .faq-item summary{padding:18px 20px;font-size:15.5px}
  .faq-item p{padding:0 20px 20px;font-size:14.5px}
  .contact-form{padding:26px}
  .footer-top{align-items:flex-start;flex-direction:column;gap:20px}
  .footer-top .button{margin-left:0}
  .footer-bottom{grid-template-columns:1fr;gap:14px}
  .footer-bottom>span:last-child{text-align:left}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .button,.button:hover,.media-card:hover .media-play{transition:none;transform:none}
}