/* ============================================================
   Mattarello: eigen stylesheet
   Licht, warm en gezellig. Spiegelt de app: ochtendzon op het
   aanrecht, espresso-tekst, terracotta accent, melkwitte kaarten
   die boven het fond zweven. Kleuren komen letterlijk uit
   Theme.swift en KitchenBackground.
   ============================================================ */

:root{
  /* fond: het verloop van KitchenBackground */
  --canvas:#FFF4E4;
  --canvas-2:#FFE9CE;      /* banden, nét dieper */
  --canvas-3:#F7CD9E;

  /* inkt: espresso */
  --ink:#46281A;
  --ink-soft:rgba(70,40,26,.66);
  --ink-faint:rgba(70,40,26,.44);

  /* accenten, exact uit de app */
  --accent:#D4552A;        /* terracotta */
  --accent-deep:#C7461C;
  --accent-lift:#E2652F;
  --amount:#B0501F;        /* hoeveelheden in lijsten */
  --leaf:#7FA04A;          /* bladgroen */
  --sea:#2F8F82;           /* zeegroen */
  --honey:#E39A23;         /* zonnig goud */
  --berry:#C9566F;         /* framboos */
  --wood:#9A7B4F;          /* voorraadkast */
  --coral:#FF8A55;
  --dairy:#5E9BB0;
  --bake:#C98A3B;

  /* glas en kaarten */
  --card:rgba(255,255,255,.72);
  --card-solid:#FFFCF6;
  --card-line:rgba(255,255,255,.85);
  --line:rgba(70,40,26,.12);
  --line-soft:rgba(70,40,26,.07);
  --chip:rgba(255,255,255,.58);
  --chip-line:rgba(255,255,255,.85);
  --shadow:0 1px 2px rgba(143,78,32,.10), 0 18px 44px rgba(143,78,32,.16);
  --shadow-sm:0 1px 2px rgba(143,78,32,.08), 0 8px 20px rgba(143,78,32,.10);
  --shadow-lg:0 2px 4px rgba(143,78,32,.10), 0 40px 90px rgba(143,78,32,.22);
  --nav-bg:rgba(255,246,232,.78);

  --accent-grad:linear-gradient(180deg,#E2652F,#C7461C);

  /* De app zet koppen in serif (New York) en de rest in de systeemsans. */
  --font-head:ui-serif,"New York","Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --font-body:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,system-ui,"Helvetica Neue",Arial,sans-serif;

  --maxw:1120px;
  --prose:740px;
  --r-sm:14px;
  --r:22px;
  --r-lg:30px;
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}

/* ---------- Reset ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{
  scroll-behavior:smooth;
  scroll-padding-top:84px;   /* de nav is 64px en blijft plakken */
  -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body{
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16.5px;
  line-height:1.62;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:6px}
::selection{background:rgba(212,85,42,.20)}
button{font:inherit;color:inherit}

/* Het fond: drie zachte lichtvlekken die heel langzaam drijven, precies zoals
   KitchenBackground in de app. Vast achter de pagina, dus het "ademt" mee
   zonder ook maar iets te herberekenen bij het scrollen. */
body::before{
  content:"";position:fixed;inset:-10%;pointer-events:none;z-index:0;
  background:
    radial-gradient(48vw 42vw at 18% 8%,rgba(255,138,85,.34),transparent 62%),
    radial-gradient(38vw 34vw at 88% 34%,rgba(95,184,165,.24),transparent 64%),
    radial-gradient(52vw 46vw at 72% 92%,rgba(255,190,69,.34),transparent 62%),
    linear-gradient(160deg,#FFF7EC,#FFE9CE 52%,#F9D6AE);
  animation:drift 26s var(--ease) infinite alternate;
}
@keyframes drift{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(-2.5%,2%,0) scale(1.06)}
}
/* meelstof: een héél lichte korrel over alles heen */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9998;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
main,header,footer{position:relative;z-index:1}

/* ---------- Layout ---------- */
.container{max-width:var(--maxw);margin:0 auto;padding:0 max(22px,env(safe-area-inset-left))}
.prose-wrap{max-width:var(--prose);margin:0 auto;padding:0 max(22px,env(safe-area-inset-left))}
.section{padding:clamp(64px,9vw,120px) 0}
.section.tight{padding:clamp(44px,6vw,72px) 0}
.center{text-align:center}
.tint{
  background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.16));
  border-top:1px solid rgba(255,255,255,.6);
  border-bottom:1px solid rgba(255,255,255,.6);
}

/* ---------- Type ---------- */
h1,h2,h3,h4{font-family:var(--font-head);font-weight:700;letter-spacing:-.015em;line-height:1.1;color:var(--ink)}
h1{font-size:clamp(2.5rem,6.4vw,4rem);line-height:1.04}
h2{font-size:clamp(1.9rem,4.4vw,2.9rem)}
h3{font-size:clamp(1.18rem,2.3vw,1.45rem);line-height:1.25}
h4{font-size:1.05rem}
.eyebrow{
  display:inline-block;font-family:var(--font-body);
  font-size:12.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent);margin-bottom:16px;
}
.eyebrow.leaf{color:#61802F}
.eyebrow.sea{color:var(--sea)}
.eyebrow.honey{color:#B77812}
.eyebrow.wood{color:#7C6039}
.eyebrow.berry{color:var(--berry)}
.lead{font-size:clamp(1.06rem,1.9vw,1.24rem);color:var(--ink-soft);max-width:60ch}
.center .lead{margin-left:auto;margin-right:auto}
.small{font-size:14.5px;color:var(--ink-soft)}
.tiny{font-size:13px;color:var(--ink-faint)}
strong,b{font-weight:650;color:var(--ink)}
.serif{font-family:var(--font-head)}

/* ---------- Nav ---------- */
.nav{
  position:sticky;top:0;z-index:1000;
  display:flex;align-items:center;gap:16px;height:64px;
  padding:0 max(20px,env(safe-area-inset-left));
  background:var(--nav-bg);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(255,255,255,.7);
  box-shadow:0 1px 0 rgba(143,78,32,.06);
}
.brand{display:inline-flex;align-items:center;gap:11px;color:var(--ink);font-family:var(--font-head);font-weight:700;font-size:19.5px;letter-spacing:-.02em}
.brand:hover{text-decoration:none}
.brand .mark{width:30px;height:30px;flex:none;border-radius:9px;box-shadow:0 2px 6px rgba(143,78,32,.22)}
.nav-spacer{flex:1}
.nav-links{display:flex;align-items:center;gap:2px}
.nav-links a{
  color:var(--ink-soft);font-weight:550;font-size:15px;
  padding:8px 12px;border-radius:11px;transition:color .2s,background .2s;
}
.nav-links a:hover{color:var(--ink);background:rgba(255,255,255,.7);text-decoration:none}
.nav-links a[aria-current="page"]{color:var(--ink);background:rgba(255,255,255,.55)}

.lang-switch{
  display:inline-flex;align-items:center;gap:2px;flex:none;
  padding:3px 4px;border-radius:999px;
  background:var(--chip);border:1px solid var(--chip-line);
}
.lang-switch a{
  font-size:12.5px;font-weight:700;letter-spacing:.05em;color:var(--ink-faint);
  padding:3px 8px;border-radius:999px;transition:color .2s,background .2s;
}
.lang-switch a:hover{color:var(--ink);text-decoration:none}
.lang-switch a.is-current{color:#fff;background:var(--accent)}
.lang-sep{display:none}

/* Knoppen */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 20px;border-radius:999px;border:1px solid transparent;
  font-weight:650;font-size:15.5px;line-height:1;cursor:pointer;
  background:var(--accent-grad);color:#fff;
  box-shadow:0 2px 4px rgba(143,78,32,.18),0 10px 22px rgba(199,70,28,.26);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),filter .2s;
}
.btn:hover{text-decoration:none;transform:translateY(-1.5px);box-shadow:0 3px 6px rgba(143,78,32,.2),0 16px 30px rgba(199,70,28,.3)}
.btn:active{transform:translateY(0) scale(.985)}
.btn-ghost{
  background:var(--chip);color:var(--ink);
  border-color:var(--chip-line);box-shadow:var(--shadow-sm);
}
.btn-ghost:hover{background:rgba(255,255,255,.85)}
.btn-sm{padding:9px 15px;font-size:14.5px}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:28px}
.center .btn-row{justify-content:center}

/* App Store-knop, zelfde vorm als op de andere sub-sites */
.appstore{
  display:inline-flex;align-items:center;gap:11px;
  padding:10px 20px 10px 17px;border-radius:14px;
  background:var(--ink);color:#FFF4E4;
  box-shadow:0 2px 5px rgba(60,32,18,.24),0 14px 30px rgba(60,32,18,.26);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.appstore:hover{text-decoration:none;transform:translateY(-1.5px)}
.appstore svg{fill:currentColor;flex:none}
.appstore .as-top{display:block;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;opacity:.72;line-height:1.2}
.appstore .as-big{display:block;font-size:18px;font-weight:650;letter-spacing:-.02em;line-height:1.15}

.text-link{font-weight:600;color:var(--accent);display:inline-flex;align-items:center;gap:6px}
.text-link .chev{transition:transform .2s var(--ease)}
.text-link:hover .chev{transform:translateX(3px)}

/* Mobiel menu (werkt zonder JS) */
.nav-menu{position:relative;display:none;flex:none}
.nav-menu>summary{
  list-style:none;cursor:pointer;width:40px;height:40px;border-radius:12px;
  display:grid;place-items:center;background:var(--chip);
  border:1px solid var(--chip-line);color:var(--ink);
}
.nav-menu>summary::-webkit-details-marker{display:none}
.nav-menu>summary svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.nav-menu>summary .close,.nav-menu[open]>summary .open{display:none}
.nav-menu[open]>summary .close{display:block}
.nav-panel{
  position:absolute;right:0;top:calc(100% + 10px);min-width:230px;
  display:flex;flex-direction:column;padding:8px;gap:2px;
  background:var(--card-solid);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow-lg);
}
.nav-panel a{padding:10px 13px;border-radius:12px;color:var(--ink);font-weight:550;font-size:15px}
.nav-panel a:hover{background:rgba(212,85,42,.08);text-decoration:none}

/* ---------- Kaarten en chips ---------- */
.card{
  background:var(--card);border:1px solid var(--card-line);
  border-radius:var(--r);box-shadow:var(--shadow);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  padding:clamp(22px,3vw,30px);
}
.card.solid{background:var(--card-solid);border-color:rgba(255,255,255,.9)}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.center .chips{justify-content:center}
.chip{
  display:inline-flex;align-items:center;
  padding:7px 14px;border-radius:999px;font-size:14px;font-weight:550;
  background:var(--chip);border:1px solid var(--chip-line);
  color:var(--ink-soft);box-shadow:0 1px 2px rgba(143,78,32,.06);
}
.chip b{color:var(--ink);font-weight:650}
.chip .dot{width:8px;height:8px;border-radius:50%;background:var(--leaf);flex:none;margin-right:8px}

.ticks{list-style:none;display:grid;gap:11px}
.ticks li{position:relative;padding-left:31px;color:var(--ink-soft)}
.ticks li::before{
  content:"";position:absolute;left:0;top:.35em;width:19px;height:19px;border-radius:50%;
  background:rgba(127,160,74,.16);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237FA04A' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size:13px;background-position:center;background-repeat:no-repeat;
}
.ticks li b{color:var(--ink)}

/* ---------- Sectiekop ---------- */
.section-head{max-width:660px;margin-bottom:clamp(34px,5vw,56px)}
.center .section-head,.section-head.center{margin-left:auto;margin-right:auto}
.section-head p{margin-top:16px}

/* ---------- Duo: tekst naast een nagebouwd schermpje ---------- */
.duo{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,5vw,64px);align-items:center;
}
.duo+.duo{margin-top:clamp(56px,8vw,110px)}
.duo .art{display:flex;justify-content:center}
.duo.flip .txt{order:2}
.duo.flip .art{order:1}
.duo .txt>p{margin-top:16px}
.duo .txt .ticks{margin-top:22px}

/* ---------- Hero ---------- */
.hero{padding:clamp(34px,6vw,70px) 0 clamp(54px,8vw,96px)}
.hero-grid{
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(30px,5vw,64px);align-items:center;
}
.hero h1{margin-bottom:6px}
.hero h1 .q{display:block;color:var(--accent);font-style:italic;font-size:.62em;margin-top:12px;letter-spacing:-.01em}
.hero .lead{margin-top:18px}
.hero .chips{margin-top:26px}
.hero-note{margin-top:16px;font-size:13.5px;color:var(--ink-faint)}

/* Het deeg dat onder de kop uitgerold wordt: puur decoratief, één keer bij
   het laden. De roller schuift naar rechts en het deeg groeit met hem mee. */
.rolling{position:relative;height:64px;margin-top:32px;max-width:470px;--pinw:104px}
.rolling .dough{
  position:absolute;left:0;top:19px;height:26px;width:100%;border-radius:999px;
  background:
    radial-gradient(2px 2px at 22% 34%,rgba(184,124,66,.30),transparent 60%),
    radial-gradient(2px 2px at 48% 68%,rgba(184,124,66,.26),transparent 60%),
    radial-gradient(2px 2px at 71% 30%,rgba(184,124,66,.24),transparent 60%),
    radial-gradient(2px 2px at 88% 62%,rgba(184,124,66,.22),transparent 60%),
    linear-gradient(180deg,#FDEACB,#F2D2A2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 4px 10px rgba(143,78,32,.12);
  transform-origin:left center;transform:scaleX(0);
  animation:roll-out 3.4s var(--ease) forwards;
}
.rolling .pin{
  position:absolute;top:0;left:0;width:var(--pinw);height:64px;
  filter:drop-shadow(0 6px 12px rgba(143,78,32,.24));
  animation:roll-move 3.4s var(--ease) forwards;
}
/* Een rollende cilinder kantelt niet: zijn omtrek staat stil en alleen de
   nerf loopt over het oppervlak mee. Daarom draait hier niets, maar schuift
   de houttekening onder de vaste glans door, precies zolang hij rolt. */
.rolling .pin .barrel{
  position:absolute;left:24px;right:24px;top:18px;height:28px;border-radius:14px;
  border:1.4px solid #E0BE95;
  background:
    linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,0) 46%,rgba(184,124,66,.22)),
    repeating-linear-gradient(90deg,#FFF8EC 0 8px,#F2DDBE 8px 10px,#FFF8EC 10px 19px,#E8CDA6 19px 21px);
  background-size:100% 100%,42px 100%;
  animation:roll-grain 3.4s var(--ease) forwards;
}
.rolling .pin .grip{
  position:absolute;top:27px;width:20px;height:10px;border-radius:5px;background:#B98F5C;
}
.rolling .pin .grip.l{left:0}
.rolling .pin .grip.r{right:0}
.rolling .pin .axle{position:absolute;top:29.5px;width:8px;height:5px;background:#B98F5C}
.rolling .pin .axle.l{left:18px}
.rolling .pin .axle.r{right:18px}
@keyframes roll-out{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* De roller eindigt precies op het einde van het deeg: verder naar rechts
   en hij steekt op een smal scherm buiten de kolom. */
@keyframes roll-move{from{left:-10px}to{left:calc(100% - var(--pinw))}}
@keyframes roll-grain{
  from{background-position:0 0,0 0}
  to{background-position:0 0,336px 0}
}

/* ---------- Telefoon ---------- */
.phone{
  position:relative;width:min(300px,84vw);
  border-radius:46px;padding:11px;
  background:linear-gradient(150deg,#5C3A26,#33190D);
  box-shadow:0 3px 6px rgba(60,32,18,.24),0 44px 90px rgba(143,78,32,.34);
}
.phone::after{
  content:"";position:absolute;left:50%;top:20px;transform:translateX(-50%);
  width:82px;height:22px;border-radius:999px;background:#22100A;z-index:3;
}
.screen{
  position:relative;overflow:hidden;border-radius:36px;
  background:linear-gradient(160deg,#FFF4E4,#FFE5C2 52%,#F7CD9E);
  padding:44px 15px 18px;min-height:560px;
}
.screen::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60% 40% at 20% 8%,rgba(255,138,85,.30),transparent 65%),
    radial-gradient(50% 34% at 92% 44%,rgba(95,184,165,.20),transparent 66%),
    radial-gradient(64% 42% at 78% 96%,rgba(255,190,69,.34),transparent 64%);
}
.screen>*{position:relative}
.app-greet{text-align:center;margin-bottom:16px}
.app-greet .hi{font-family:var(--font-head);font-weight:700;font-size:27px;letter-spacing:-.02em;line-height:1.1}
.app-greet .ask{font-family:var(--font-head);font-size:15.5px;color:var(--ink-soft);margin-top:5px}

/* de diavoorstelling van eigen gerechten */
.app-carousel{position:relative;height:112px;border-radius:20px;overflow:hidden;margin-bottom:14px;box-shadow:var(--shadow-sm)}
.app-carousel .slide{
  position:absolute;inset:0;opacity:0;transition:opacity .9s var(--ease);
  display:flex;align-items:flex-end;padding:12px 14px;
}
.app-carousel .slide.on{opacity:1}
.app-carousel .slide span{
  font-family:var(--font-head);font-weight:650;font-size:15px;color:#fff;
  text-shadow:0 1px 6px rgba(60,32,18,.6);
}
.app-carousel .slide::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(60,32,18,.55),transparent 62%);
}
.app-carousel .slide>span{position:relative;z-index:1}
/* "foto's": warme verlopen in plaats van echte plaatjes, dus geen laadtijd */
.dish-1{background:radial-gradient(circle at 30% 32%,#F2B24B,#C7461C 72%)}
.dish-2{background:radial-gradient(circle at 66% 28%,#9CC15F,#3F6B33 74%)}
.dish-3{background:radial-gradient(circle at 42% 40%,#F0DCC0,#B06A2E 76%)}

.app-cards{display:grid;gap:9px}
.mcard{
  display:flex;align-items:center;gap:12px;padding:12px 13px;border-radius:18px;
  background:rgba(255,255,255,.74);border:1px solid rgba(255,255,255,.9);
  box-shadow:0 1px 2px rgba(143,78,32,.08),0 6px 14px rgba(143,78,32,.09);
}
.mcard .ic{
  width:38px;height:38px;border-radius:12px;flex:none;display:grid;place-items:center;
  color:#fff;box-shadow:0 3px 8px rgba(143,78,32,.2);
}
.mcard .ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mcard>span:not(.ic):not(.go){flex:1;min-width:0}
.mcard .tt{display:block;font-weight:600;font-size:14.5px;line-height:1.25}
.mcard .ss{display:block;font-size:11.5px;color:var(--ink-faint);line-height:1.3}
.mcard .go{margin-left:auto;color:var(--ink-faint);font-size:17px}
.ic-accent{background:var(--accent-grad)}
.ic-leaf{background:linear-gradient(180deg,#93B45C,#6F8F3E)}
.ic-sea{background:linear-gradient(180deg,#3AA294,#25776C)}
.ic-wood{background:linear-gradient(180deg,#AC8C5C,#856843)}
.ic-honey{background:linear-gradient(180deg,#EFAA33,#C97F12)}
.ic-berry{background:linear-gradient(180deg,#D4677E,#B0455C)}

.app-gear{
  width:36px;height:36px;border-radius:50%;margin:12px 0 0 auto;
  background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.85);
  display:grid;place-items:center;color:var(--ink-faint);
}
.app-gear svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}

/* ---------- Nagebouwd: receptkaart ---------- */
.mock{
  width:min(400px,100%);background:var(--card-solid);
  border:1px solid rgba(255,255,255,.9);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);padding:20px;
}
.mock-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.mock-head .t{font-family:var(--font-head);font-weight:700;font-size:19px;letter-spacing:-.02em}
.mock-head .m{font-size:12.5px;color:var(--ink-faint);margin-top:3px}
.course{
  display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;
  font-size:11.5px;font-weight:650;letter-spacing:.02em;color:#fff;flex:none;
}
.c-ontbijt{background:#E39A23}
.c-lunch{background:#7FA04A}
.c-diner{background:#C94F26}
.c-dessert{background:#C9566F}
.c-snack{background:#2F8F82}

.ing{list-style:none;display:grid;gap:1px}
.ing li{
  display:flex;align-items:center;gap:10px;padding:9px 2px;
  border-bottom:1px dashed var(--line-soft);font-size:14.5px;
}
.ing li:last-child{border-bottom:0}
.ing .box{
  width:19px;height:19px;border-radius:6px;flex:none;
  border:1.8px solid rgba(70,40,26,.24);background:#fff;
}
.ing li.done .box{
  background:var(--leaf) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;
  border-color:var(--leaf);
}
.ing li.done .nm{color:var(--ink-faint);text-decoration:line-through}
.ing .nm{flex:1}
.ing .qt{font-weight:650;color:var(--amount);font-variant-numeric:tabular-nums;font-size:14px}

/* ---------- Nagebouwd: boodschappenlijst op afdeling ---------- */
.aisle{margin-bottom:16px}
.aisle:last-child{margin-bottom:0}
.aisle-h{
  display:flex;align-items:center;gap:8px;margin-bottom:7px;
  font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
}
.aisle-h .dot{width:9px;height:9px;border-radius:50%;flex:none}
.a-groente{color:#61802F}.a-groente .dot{background:#7FA04A}
.a-bakkerij{color:#9A6A24}.a-bakkerij .dot{background:#C98A3B}
.a-vlees{color:#B0501F}.a-vlees .dot{background:#D4552A}
.a-zuivel{color:#3F7387}.a-zuivel .dot{background:#5E9BB0}
.a-voorraad{color:#7C6039}.a-voorraad .dot{background:#9A7B4F}

.home-note{
  display:flex;align-items:center;gap:9px;margin-top:14px;padding:11px 13px;
  border-radius:14px;background:rgba(154,123,79,.11);
  font-size:13px;color:#6E5431;
}
.home-note svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Nagebouwd: voorraadkast ---------- */
.shelf{display:grid;gap:14px}
.shelf-row{
  display:flex;align-items:flex-end;gap:12px;padding-bottom:11px;
  border-bottom:3px solid rgba(154,123,79,.28);border-radius:2px;
}
.jar{flex:1;text-align:center}
.jar .glass{
  height:66px;border-radius:9px 9px 13px 13px;position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.45));
  border:1.5px solid rgba(70,40,26,.14);
  box-shadow:inset 0 -2px 4px rgba(143,78,32,.10);
}
/* De inhoud. Elk potje krijgt de stof die er hoort: poeder ligt met een bolle
   kruin, spaghetti staat rechtop, rijst is korrelig en olie is het enige dat
   echt vloeibaar is (met een randje aan de oppervlakte). */
.jar .glass::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:var(--fill,60%);
  border-radius:var(--crest,0);
  background:var(--jam,linear-gradient(180deg,#E9B45E,#C98A3B));
  box-shadow:var(--surface,none);
}
.jar.powder .glass::before{
  --crest:46% 54% 0 0 / 9px 9px 0 0;
  --jam:
    radial-gradient(1.8px 1.8px at 18% 32%,rgba(255,255,255,.95),transparent 62%),
    radial-gradient(1.6px 1.6px at 48% 58%,rgba(255,255,255,.8),transparent 62%),
    radial-gradient(1.6px 1.6px at 76% 26%,rgba(255,255,255,.75),transparent 62%),
    radial-gradient(1.4px 1.4px at 34% 78%,rgba(255,255,255,.7),transparent 62%),
    radial-gradient(1.4px 1.4px at 86% 68%,rgba(255,255,255,.65),transparent 62%),
    linear-gradient(180deg,#F7E7CC,#E3C79C);
}
.jar.sticks .glass::before{
  --crest:3px 3px 0 0;
  --jam:
    linear-gradient(180deg,rgba(255,255,255,.35),transparent 14%),
    repeating-linear-gradient(90deg,#EFC470 0 3px,#D8A244 3px 4px,#EFC470 4px 7px,#C9902F 7px 8px);
}
.jar.grains .glass::before{
  --crest:44% 56% 0 0 / 7px 7px 0 0;
  --jam:
    radial-gradient(2px 1.4px at 22% 24%,rgba(255,255,255,.95),transparent 65%),
    radial-gradient(2px 1.4px at 58% 40%,rgba(255,255,255,.85),transparent 65%),
    radial-gradient(2px 1.4px at 34% 62%,rgba(255,255,255,.85),transparent 65%),
    radial-gradient(2px 1.4px at 78% 72%,rgba(255,255,255,.8),transparent 65%),
    radial-gradient(2px 1.4px at 12% 82%,rgba(255,255,255,.75),transparent 65%),
    radial-gradient(2px 1.4px at 88% 32%,rgba(255,255,255,.7),transparent 65%),
    linear-gradient(180deg,#F4EBDA,#DFCFB2);
}
.jar.liquid .glass::before{
  --jam:linear-gradient(180deg,#DCCB57,#B9A22C);
  --surface:inset 0 2px 0 rgba(255,255,255,.55);
}
.jar.paste .glass::before{
  --crest:5px 5px 0 0;
  --jam:
    radial-gradient(6px 3px at 30% 12%,rgba(255,255,255,.16),transparent 70%),
    linear-gradient(180deg,#C9442A,#9E2F1B);
}
.jar .glass::after{
  content:"";position:absolute;left:6px;top:6px;width:5px;bottom:8px;border-radius:4px;
  background:rgba(255,255,255,.55);
}
.jar .lid{height:8px;border-radius:4px 4px 2px 2px;background:#9A7B4F;margin:0 6px 2px}
.jar .nm{font-size:11.5px;margin-top:6px;color:var(--ink-soft);line-height:1.25}
.jar .amt{font-size:11px;font-weight:650;color:var(--amount)}
.jar.out .glass::before{height:6%}
.jar.out .amt{color:var(--accent)}

.sum{
  display:grid;gap:8px;margin-top:16px;padding:14px 15px;border-radius:16px;
  background:rgba(255,255,255,.66);border:1px solid rgba(255,255,255,.9);
}
.sum .r{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink-soft)}
.sum .r .op{width:20px;font-weight:700;text-align:center;font-size:15px}
.sum .r.plus .op{color:var(--leaf)}
.sum .r.minus .op{color:var(--accent)}
.sum .r .v{margin-left:auto;font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums}
.sum .r.tot{border-top:1px dashed var(--line);padding-top:9px;margin-top:1px;color:var(--ink);font-weight:600}

/* ---------- Nagebouwd: scannen ---------- */
.scan-stack{position:relative;width:min(380px,100%);height:300px}
.receipt{
  position:absolute;left:0;top:16px;width:62%;padding:16px 16px 24px;
  background:#FFFDF7;border-radius:8px 8px 0 0;
  box-shadow:var(--shadow-lg);transform:rotate(-4deg);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;color:#6B4A34;
}
.receipt::after{
  content:"";position:absolute;left:0;right:0;bottom:-9px;height:10px;
  background:
    radial-gradient(circle at 5px 0,transparent 5px,#FFFDF7 5.5px) repeat-x;
  background-size:10px 10px;
}
.receipt .rh{text-align:center;font-weight:700;letter-spacing:.1em;margin-bottom:10px;color:#8A6242}
.receipt .rr{display:flex;justify-content:space-between;gap:10px;padding:3px 0}
.receipt .rr.tot{border-top:1px dashed rgba(70,40,26,.3);margin-top:8px;padding-top:7px;font-weight:700}
.scan-out{
  position:absolute;right:0;bottom:0;width:62%;padding:15px 16px;
  background:var(--card-solid);border:1px solid rgba(255,255,255,.9);
  border-radius:20px;box-shadow:var(--shadow-lg);transform:rotate(2.5deg);
}
.scan-out .h{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sea);margin-bottom:9px}
.scan-out .l{display:flex;align-items:center;gap:9px;font-size:13.5px;padding:5px 0}
.scan-out .l .tick{
  width:17px;height:17px;border-radius:5px;flex:none;background:var(--sea);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size:11px;background-position:center;background-repeat:no-repeat;
}
.scan-out .l .q{margin-left:auto;font-weight:650;color:var(--amount);font-size:12.5px}
.scan-beam{
  position:absolute;left:0;top:16px;width:62%;height:calc(100% - 16px);
  border-radius:8px;overflow:hidden;pointer-events:none;transform:rotate(-4deg);
}
.scan-beam i{
  position:absolute;left:0;right:0;height:34%;
  background:linear-gradient(180deg,transparent,rgba(47,143,130,.30),transparent);
  animation:beam 3.4s var(--ease) infinite;
}
@keyframes beam{0%{top:-34%}100%{top:100%}}

/* ---------- Nagebouwd: inzichten ---------- */
.insights{display:grid;gap:16px}
.nutri{display:flex;align-items:center;gap:6px}
.nutri span{
  width:34px;height:40px;border-radius:9px;display:grid;place-items:center;
  font-family:var(--font-head);font-weight:700;font-size:18px;color:#fff;opacity:.32;
  transition:opacity .3s,transform .3s var(--ease);
}
.nutri span.on{opacity:1;transform:scale(1.14);box-shadow:0 6px 14px rgba(143,78,32,.24)}
.n-a{background:#3F8F3F}.n-b{background:#8CB43C}.n-c{background:#F5C518}
.n-d{background:#EE8A22}.n-e{background:#E0472C}

.bars{display:grid;gap:11px}
.bars .b{display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:center;font-size:13.5px}
.bars .b .nm{color:var(--ink-soft);min-width:88px}
.bars .b .track{height:8px;border-radius:999px;background:rgba(70,40,26,.10);overflow:hidden}
.bars .b .track i{display:block;height:100%;border-radius:999px;width:var(--w,50%);background:var(--c,var(--accent));transform-origin:left;animation:grow 1.1s var(--ease) both}
.bars .b .v{font-weight:650;font-variant-numeric:tabular-nums;font-size:13px}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.nova{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-soft)}
.nova i{width:26px;height:6px;border-radius:999px;background:rgba(70,40,26,.14)}
.nova i.on{background:var(--wood)}

/* ---------- Nagebouwd: receptenboek ---------- */
.book{
  width:min(400px,100%);display:grid;grid-template-columns:1fr 1fr;
  border-radius:6px 14px 14px 6px;overflow:hidden;
  box-shadow:var(--shadow-lg);background:#FFFDF7;
}
.book .pg{padding:20px 18px;min-height:250px}
.book .pg.l{background:linear-gradient(90deg,#F3E3CC,#FFFDF7 26%);border-right:1px solid rgba(70,40,26,.10)}
.book .pg h5{font-family:var(--font-head);font-size:16px;font-weight:700;margin-bottom:4px}
.book .pg .sub{font-size:11px;color:var(--ink-faint);margin-bottom:12px;letter-spacing:.06em;text-transform:uppercase}
.book .ln{height:6px;border-radius:999px;background:rgba(70,40,26,.10);margin-bottom:8px}
.book .ln.s{width:58%}
.book .ln.m{width:78%}
.book .ph{height:64px;border-radius:8px;margin-bottom:12px;background:radial-gradient(circle at 34% 30%,#F2B24B,#C7461C 76%)}
.book .cap{font-family:var(--font-head);font-size:12px;color:var(--ink-faint);margin-top:14px;text-align:center}

/* ---------- Assistent-kaart ---------- */
.brain{
  display:grid;gap:14px;width:min(400px,100%);
}
.brain .row{
  display:flex;align-items:center;gap:13px;padding:14px 16px;border-radius:18px;
  background:var(--card-solid);border:1px solid rgba(255,255,255,.9);box-shadow:var(--shadow-sm);
}
.brain .row .ic{width:36px;height:36px;border-radius:12px;flex:none;display:grid;place-items:center;color:#fff}
.brain .row .ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.brain .row>span:not(.ic):not(.tag){flex:1;min-width:0}
.brain .row .tt{display:block;font-weight:600;font-size:14.5px}
.brain .row .ss{display:block;font-size:12.5px;color:var(--ink-faint);line-height:1.35}
.brain .row .tag{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--sea);flex:none}
.offline{
  display:inline-flex;align-items:center;gap:9px;padding:9px 15px;border-radius:999px;
  background:rgba(47,143,130,.12);color:#256F65;font-size:13.5px;font-weight:600;
}
.offline svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* stoom: drie sliertjes die rustig omhoog kringelen */
.steam{display:flex;gap:9px;justify-content:center;height:34px;margin-bottom:-6px}
.steam i{
  width:5px;height:26px;border-radius:999px;
  background:linear-gradient(180deg,rgba(70,40,26,.20),transparent);
  animation:steam 3s ease-in-out infinite;
}
.steam i:nth-child(2){animation-delay:.5s;height:32px}
.steam i:nth-child(3){animation-delay:1s}
@keyframes steam{
  0%{opacity:0;transform:translateY(6px) scaleY(.7)}
  35%{opacity:.9}
  100%{opacity:0;transform:translateY(-16px) scaleY(1.25)}
}

/* ---------- Prijzen ---------- */
.prices{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:8px}
.price{
  position:relative;background:var(--card-solid);border:1px solid rgba(255,255,255,.9);
  border-radius:var(--r);box-shadow:var(--shadow);padding:26px 24px;
}
.price.best{border-color:rgba(212,85,42,.45);box-shadow:0 2px 4px rgba(143,78,32,.10),0 26px 60px rgba(199,70,28,.22)}
.price .kind{font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint)}
.price .amt{font-family:var(--font-head);font-size:2.5rem;font-weight:700;letter-spacing:-.03em;margin:8px 0 2px}
.price .per{font-size:13.5px;color:var(--ink-faint)}
.price .note{font-size:13.5px;color:var(--ink-soft);margin-top:14px}
.price .flag{
  position:absolute;top:-11px;right:20px;padding:4px 12px;border-radius:999px;
  background:var(--accent-grad);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.06em;
  box-shadow:0 6px 14px rgba(199,70,28,.3);
}
.price.free .amt{color:var(--leaf)}

/* ---------- Privacy-tegels ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.tile{
  background:var(--card);border:1px solid var(--card-line);border-radius:var(--r);
  box-shadow:var(--shadow-sm);padding:24px 22px;
}
.tile .ic{
  width:42px;height:42px;border-radius:14px;display:grid;place-items:center;
  color:#fff;margin-bottom:14px;
}
.tile .ic svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tile h3{font-size:1.12rem;margin-bottom:7px}
.tile p{font-size:14.5px;color:var(--ink-soft)}

/* ---------- Grote CTA ---------- */
.cta{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  padding:clamp(34px,6vw,64px) clamp(24px,5vw,56px);text-align:center;
  background:linear-gradient(160deg,#FFF9F0,#FFE9CE 60%,#F9D2A4);
  border:1px solid rgba(255,255,255,.9);box-shadow:var(--shadow-lg);
}
.cta::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(40% 60% at 12% 10%,rgba(255,138,85,.30),transparent 66%),
    radial-gradient(44% 60% at 88% 92%,rgba(255,190,69,.36),transparent 64%);
}
.cta>*{position:relative}

/* ---------- FAQ (support) ---------- */
.faq{display:grid;gap:10px;max-width:var(--prose);margin:0 auto}
.qa{
  background:var(--card-solid);border:1px solid rgba(255,255,255,.9);
  border-radius:var(--r-sm);box-shadow:var(--shadow-sm);overflow:hidden;
}
.qa>summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;
  padding:16px 18px;font-weight:600;font-size:16px;
}
.qa>summary::-webkit-details-marker{display:none}
.qa>summary:hover{background:rgba(212,85,42,.05)}
.qa .plus{
  margin-left:auto;position:relative;width:16px;height:16px;flex:none;
}
.qa .plus::before,.qa .plus::after{
  content:"";position:absolute;left:0;top:7px;width:16px;height:2.2px;border-radius:2px;
  background:var(--accent);transition:transform .25s var(--ease);
}
.qa .plus::after{transform:rotate(90deg)}
.qa[open] .plus::after{transform:rotate(0)}
.qa .a{padding:0 18px 18px;color:var(--ink-soft);border-top:1px solid var(--line-soft);padding-top:14px;margin:0 0 0}
.qa .a p+p{margin-top:11px}
.qa .a ul{margin:11px 0 0 20px;display:grid;gap:6px}

.contact-card{
  max-width:var(--prose);margin:34px auto 0;text-align:center;
  background:var(--card-solid);border:1px solid rgba(255,255,255,.9);
  border-radius:var(--r);box-shadow:var(--shadow);padding:30px 24px;
}
.contact-card .ic{
  width:48px;height:48px;border-radius:16px;margin:0 auto 14px;display:grid;place-items:center;
  background:var(--accent-grad);color:#fff;
}
.contact-card .ic svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.contact-card .email{font-size:1.15rem;font-weight:650;margin-top:8px}

/* ---------- Juridische pagina's ---------- */
.legal-head{padding:clamp(30px,5vw,54px) 0 clamp(18px,3vw,26px)}
.crumb{font-size:13.5px;color:var(--ink-faint);margin-bottom:16px}
.crumb a{color:var(--ink-soft)}
.crumb .sep{margin:0 7px}
.updated{color:var(--ink-soft);margin-top:14px}
.prose{padding-bottom:clamp(50px,7vw,90px)}
.prose h2{font-size:clamp(1.4rem,2.8vw,1.75rem);margin:38px 0 12px;scroll-margin-top:90px}
.prose h3{font-size:1.1rem;margin:24px 0 8px}
.prose p{margin-bottom:14px;color:var(--ink-soft)}
.prose ul,.prose ol{margin:0 0 16px 22px;display:grid;gap:8px;color:var(--ink-soft)}
.prose .box{
  background:var(--card-solid);border:1px solid rgba(255,255,255,.9);
  border-left:4px solid var(--accent);border-radius:var(--r-sm);
  padding:18px 20px;margin:22px 0;box-shadow:var(--shadow-sm);
}
.prose .box p:last-child{margin-bottom:0}
.toc{
  background:rgba(255,255,255,.55);border:1px solid var(--card-line);
  border-radius:var(--r-sm);padding:18px 22px;margin:26px 0 34px;
}
.toc b{display:block;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:10px}
.toc ol{margin:0 0 0 20px;display:grid;gap:6px;color:var(--ink-soft);font-size:15px}

/* ---------- Footer ---------- */
.foot{
  margin-top:clamp(40px,6vw,80px);padding:clamp(40px,6vw,64px) 0 34px;
  background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.72));
  border-top:1px solid rgba(255,255,255,.8);
}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr);gap:34px}
.foot-about p{margin-top:14px;color:var(--ink-soft);font-size:14.5px;max-width:34em}
.foot-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.foot-col{display:flex;flex-direction:column;gap:9px}
.foot-col b{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);font-weight:700}
.foot-col a{color:var(--ink-soft);font-size:14.5px}
.foot-col a:hover{color:var(--ink)}
.foot-base{
  margin-top:34px;padding-top:20px;border-top:1px solid var(--line-soft);
  display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;
  font-size:13px;color:var(--ink-faint);
}

/* ---------- Scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
.reveal[data-d="4"]{transition-delay:.32s}
html:not(.js) .reveal{opacity:1;transform:none}

/* ---------- Responsief ---------- */
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .hero .art{justify-content:center}
  .hero .txt{text-align:center}
  .hero .txt .lead,.hero .txt .rolling{margin-left:auto;margin-right:auto}
  .hero .btn-row,.hero .chips{justify-content:center}
  .duo{grid-template-columns:1fr;gap:34px}
  .duo.flip .txt{order:1}
  .duo.flip .art{order:2}
  .foot-grid{grid-template-columns:1fr;gap:30px}
}
@media (max-width:820px){
  .nav-links{display:none}
  .nav-menu{display:block}
}
@media (max-width:620px){
  /* Naast merk, taalkeuze en menuknop past de download-knop er niet meer bij
     zonder over drie regels te breken. Hij staat bovenaan in het menu. */
  .nav>.btn{display:none}
  .nav{gap:12px}
  .nav-panel .btn{margin:2px 0 6px;justify-content:center}
}
@media (max-width:560px){
  .foot-links{grid-template-columns:1fr 1fr;gap:20px}
  .scan-stack{height:340px}
  .receipt,.scan-out,.scan-beam{width:72%}
  .brand{font-size:17.5px}
  .rolling{--pinw:88px;height:58px}
  .rolling .pin{height:58px}
  .rolling .dough{top:16px;height:24px}
  .rolling .pin .barrel{top:15px}
  .rolling .pin .grip,.rolling .pin .axle{top:24px}
  .rolling .pin .axle{top:26.5px}
}
@media (max-width:420px){
  .appstore{padding:9px 16px 9px 14px}
  .appstore .as-big{font-size:16px}
  .nutri span{width:30px;height:36px;font-size:16px}
}

/* Wie liever geen beweging heeft, krijgt hem niet. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
  .rolling .dough{transform:scaleX(1)}
  .rolling .pin{left:calc(100% - 64px)}
}

/* Printen: geen fond, geen glas, gewoon leesbare tekst. */
@media print{
  body::before,body::after,.nav,.foot,.btn-row{display:none}
  body{background:#fff}
  .card,.qa,.mock{box-shadow:none;border:1px solid #ddd}
}