/* MEX Sites · Licht — shared stylesheet. Theme tokens come from each page's :root block. */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.55 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden;color-scheme:light}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--disp);font-weight:var(--dw);letter-spacing:-0.03em;line-height:1.02;margin:0;text-wrap:balance}
h1{font-size:clamp(44px,7vw,96px)}
h2{font-size:clamp(34px,4.6vw,64px)}
h3{font-size:clamp(22px,2.2vw,30px)}
p{margin:0}
em{font-style:normal;color:var(--acc2)}
.wrap{width:min(1180px,100% - 2*max(20px,env(safe-area-inset-left,0px)));margin-inline:auto;padding-inline:max(0px,env(safe-area-inset-left,0px)) max(0px,env(safe-area-inset-right,0px))}
.wrap.narrow{width:min(760px,100% - 40px)}
.wrap.two{display:grid;grid-template-columns:1fr 1.15fr;gap:60px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:18px}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 18%,transparent)}
.lead{font-size:clamp(17px,1.5vw,21px);color:var(--mute);max-width:62ch;margin-top:18px;line-height:1.5}
.btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 22px;border-radius:999px;font-weight:600;font-size:15px;background:var(--surf);box-shadow:0 0 0 1px var(--line),0 8px 24px rgba(0,0,0,.06);backdrop-filter:blur(14px);transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-1px);box-shadow:0 0 0 1px var(--line),0 14px 34px rgba(0,0,0,.1)}
.btn.vol{background:var(--fg);color:var(--bg);box-shadow:0 10px 30px rgba(0,0,0,.18)}
.wall{position:fixed;inset:0;z-index:-2;background:var(--wall)}
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:var(--grain);mix-blend-mode:multiply;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.4 0 0 0 0 0.4 0 0 0 0 0.4 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");background-size:240px}
/* nav */
.nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px max(22px,env(safe-area-inset-right,0px)) 12px max(22px,env(safe-area-inset-left,0px));background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);box-shadow:0 1px 0 var(--line)}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.06em;font-size:15px}
.brand .logo{width:30px;height:24px}
.brand.big{font-size:22px;margin-bottom:28px}.brand.big .logo{width:48px;height:39px}
.themes{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}
.themes a{padding:7px 12px;border-radius:999px;font-size:13.5px;font-weight:600;color:var(--mute)}
.themes a.on,.themes a:hover{background:var(--surf);color:var(--fg);box-shadow:0 0 0 1px var(--line)}
.nav .cta{padding:9px 16px;border-radius:999px;background:var(--fg);color:var(--bg);font-weight:700;font-size:14px}
/* hero (pinned, three beats) */
[data-pin]{position:relative}
.hero{height:calc(var(--pin,3) * 100vh)}
.sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;place-items:center}
.hero-art{position:absolute;inset:0;display:grid;place-items:center;transform:translate3d(var(--ax,0),var(--ay,0),0) scale(var(--as,1));transition:none}
.hero-art .turn{width:min(92vw,1180px);aspect-ratio:1120/700;height:auto;filter:drop-shadow(0 40px 60px rgba(0,0,0,.14))}
.halo{position:absolute;left:50%;top:58%;width:min(70vw,900px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,color-mix(in srgb,var(--acc) 22%,transparent),transparent 60%);filter:blur(30px);opacity:var(--halo,.6);z-index:-1}
.beats{position:absolute;inset:0;pointer-events:none}
.beat{position:absolute;left:max(24px,env(safe-area-inset-left,0px));right:max(24px,env(safe-area-inset-right,0px));top:50%;transform:translateY(calc(-50% + var(--ty,0px)));opacity:var(--o,0);max-width:560px;pointer-events:auto;margin-inline:auto}
.beat[data-beat="0"]{left:max(24px,6vw);margin-inline:0}
.beat[data-beat="1"]{left:auto;right:max(24px,6vw);margin-inline:0;text-align:right}
.beat[data-beat="2"]{text-align:center;max-width:720px;top:auto;bottom:9vh;transform:translateY(var(--ty,0px))}
.beat p{font-size:clamp(16px,1.4vw,20px);color:var(--mute);margin-top:16px;line-height:1.5}
.scrollhint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);display:flex;flex-direction:column;align-items:center;gap:8px;opacity:var(--hint,1);transition:opacity .4s}
.scrollhint i{width:1px;height:38px;background:linear-gradient(var(--fg),transparent);display:block;animation:dip 1.8s ease-in-out infinite}
@keyframes dip{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1)}100%{transform:scaleY(.2);transform-origin:bottom}}
/* films */
.films{padding:12vh 0 8vh}
.film-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;width:min(1240px,100% - 40px);margin:40px auto 0}
.film{margin:0;display:flex;flex-direction:column;gap:14px}
.film-frame{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:#111;box-shadow:0 30px 70px rgba(0,0,0,.18),0 0 0 1px var(--line)}
.film-frame img,.film-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.film-frame img{transform:scale(var(--kbs,1.08)) translate(var(--kbx,0),var(--kby,0));transition:transform .1s linear}
.film-frame video{opacity:0;transition:opacity .6s}.film-frame video.ok{opacity:1}
.film-ui{position:absolute;inset:14px 16px auto;display:flex;justify-content:space-between;font:500 11.5px 'JetBrains Mono',monospace;color:#fff;letter-spacing:.08em;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.rec{display:flex;align-items:center;gap:7px}.rec i{width:8px;height:8px;border-radius:50%;background:#FF453A;animation:blink 1.2s steps(2) infinite}
@keyframes blink{50%{opacity:.2}}
.film figcaption{display:flex;flex-direction:column;gap:4px}.film figcaption b{font-size:17px}.film figcaption span{color:var(--mute);font-size:15px}
/* product line */
.line{padding:14vh 0 4vh}
.prod{height:calc(var(--pin,1.6) * 100vh)}
.prod .sticky{grid-template-columns:1.15fr 1fr;gap:40px;padding:0 max(24px,6vw)}
.prod-art{display:grid;place-items:center;transform:translate3d(0,var(--py,0),0) scale(var(--ps,1));opacity:var(--po,1)}
.prod-art .turn{width:100%;max-width:820px;aspect-ratio:1120/700;height:auto;filter:drop-shadow(0 34px 50px rgba(0,0,0,.14))}
.prod-txt{opacity:var(--to,0);transform:translateY(var(--tt,30px));max-width:440px}
.prod-txt ul{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.prod-txt li{padding:8px 13px;border-radius:999px;background:var(--surf);box-shadow:0 0 0 1px var(--line);font-size:13.5px;font-weight:600}
.prod-txt p{color:var(--mute);margin-top:16px;font-size:17px}
.price{display:block;margin-top:22px;font-weight:700;color:var(--acc2)}
/* how */
.how{padding:12vh 0}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;width:min(1180px,100% - 40px);margin:40px auto}
.step{padding:28px;border-radius:var(--r);background:var(--surf);box-shadow:0 0 0 1px var(--line),0 20px 50px rgba(0,0,0,.06);backdrop-filter:blur(14px)}
.step b{font:500 13px 'JetBrains Mono',monospace;color:var(--acc2);display:block;margin-bottom:14px}
.step p{color:var(--mute);margin-top:10px}
.diagram{position:relative;height:220px;margin-top:10px}
.diagram svg{position:absolute;inset:0;width:100%;height:100%}
.diagram path{fill:none;stroke:var(--acc);stroke-width:1.5;stroke-dasharray:6 8;animation:flow 2.4s linear infinite;opacity:.7}
@keyframes flow{to{stroke-dashoffset:-28}}
.node{position:absolute;padding:10px 16px;border-radius:999px;background:var(--surf);box-shadow:0 0 0 1px var(--line),0 10px 24px rgba(0,0,0,.08);font-weight:600;font-size:14px;transform:translate(-50%,-50%)}
.node.brain{left:50%;top:50%;background:var(--fg);color:var(--bg);padding:14px 22px}
.node:nth-child(2){left:20%;top:27%}.node:nth-child(3){left:20%;top:73%}.node:nth-child(4){left:80%;top:27%}.node.app{left:80%;top:73%;border:1.5px solid var(--acc)}
/* privacy */
.priv{padding:10vh 0}
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:36px}
.pcard{padding:26px;border-radius:var(--r);background:var(--surf);box-shadow:0 0 0 1px var(--line);backdrop-filter:blur(14px)}
.pcard i{display:block;width:34px;height:34px;border-radius:12px;background:color-mix(in srgb,var(--acc) 16%,transparent);position:relative;margin-bottom:16px}
.pcard i::after{content:"";position:absolute;left:11px;top:11px;width:12px;height:12px;border-radius:50%;background:var(--acc)}
.pcard h3{font-size:20px}.pcard p{color:var(--mute);margin-top:8px;font-size:15px}
/* mex herself */
.mexself{padding:10vh 0}
.portret{position:relative;border-radius:var(--r);overflow:hidden;background:linear-gradient(180deg,var(--bg2),var(--bg));box-shadow:0 0 0 1px var(--line),0 40px 80px rgba(0,0,0,.12);aspect-ratio:4/5;display:grid;place-items:end center}
.portret img{width:88%;object-fit:contain;filter:drop-shadow(0 20px 30px rgba(0,0,0,.2))}
.pulse{position:absolute;left:50%;bottom:8%;width:14px;height:14px;transform:translateX(-50%)}
.pulse i{position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--acc);animation:ring 2.6s ease-out infinite}
.pulse i:nth-child(2){animation-delay:.8s}.pulse i:nth-child(3){border:0;background:var(--acc);animation:none;box-shadow:0 0 14px var(--acc)}
@keyframes ring{0%{transform:scale(1);opacity:.9}100%{transform:scale(4.5);opacity:0}}
.quotes{display:flex;flex-direction:column;gap:12px;margin-top:26px}
blockquote{margin:0;padding:16px 20px;border-radius:calc(var(--r) * .7);background:var(--surf);box-shadow:0 0 0 1px var(--line);font-family:var(--disp);font-size:19px;line-height:1.35}
/* kids */
.kids{padding:10vh 0}
.kgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;width:min(1180px,100% - 40px);margin:34px auto}
.kcard{margin:0;border-radius:22px;overflow:hidden;background:var(--surf);box-shadow:0 0 0 1px var(--line),0 16px 40px rgba(0,0,0,.08);transition:transform .3s}
.kcard:hover{transform:translateY(-6px) rotate(-1deg)}
.kcard img{aspect-ratio:1;object-fit:cover}.kcard figcaption{padding:10px 14px;font-weight:700;font-size:14px}
/* packs */
.packs{padding:10vh 0}
.pk{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:36px}
.pack{position:relative;padding:26px 22px;border-radius:var(--r);background:var(--surf);box-shadow:0 0 0 1px var(--line);display:flex;flex-direction:column;gap:10px;backdrop-filter:blur(14px)}
.pack.best{background:var(--fg);color:var(--bg);box-shadow:0 30px 60px rgba(0,0,0,.2)}
.pack.best .btn.vol{background:var(--acc);color:#06210F}.pack.best small,.pack.best .pr span:last-child{color:color-mix(in srgb,var(--bg) 70%,transparent)}
.tip{position:absolute;right:16px;top:14px;font-size:11.5px;font-weight:800;padding:5px 10px;border-radius:999px;background:var(--acc);color:#06210F}
.pack small{color:var(--mute);font-size:13.5px}
.pr{display:flex;align-items:baseline;gap:8px;margin:8px 0}.pr .num{font-family:var(--disp);font-weight:var(--dw);font-size:40px;letter-spacing:-.03em}.pr span:last-child{font-size:13px;color:var(--mute)}
.pack ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:7px;font-size:14px}
.pack li{padding-left:18px;position:relative}.pack li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;background:var(--acc)}
.pack .btn{margin-top:auto;justify-content:center}
.hint{color:var(--mute);font-size:14px;margin-top:22px}
/* faq */
.faq{padding:8vh 0 12vh}
details{border-top:1px solid var(--line);padding:4px 0}
summary{cursor:pointer;list-style:none;padding:18px 0;font-weight:600;font-size:18px;display:flex;justify-content:space-between;align-items:center}
summary::after{content:"+";font-size:24px;font-weight:300;color:var(--mute);transition:transform .25s}
details[open] summary::after{transform:rotate(45deg)}
details p{color:var(--mute);padding-bottom:18px;max-width:62ch}
/* footer */
.foot{padding:60px 0 calc(40px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:var(--bg2)}
.foot .wrap{display:grid;grid-template-columns:auto 1fr auto;gap:30px;align-items:center}
.foot nav{display:flex;gap:18px;font-size:14px;color:var(--mute)}
.foot small{grid-column:1/-1;color:var(--mute);font-size:12.5px}
.foot p{color:var(--mute)}
/* reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 70ms)}
.reveal.in{opacity:1;transform:none}
/* index */
.idx{padding:12vh 0}
.idxgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:40px}
.idxcard{display:flex;flex-direction:column;gap:6px;padding:18px;border-radius:24px;background:var(--surf);box-shadow:0 0 0 1px var(--line),0 20px 50px rgba(0,0,0,.08);transition:transform .25s}
.idxcard:hover{transform:translateY(-4px)}
.idxcard .sw{height:150px;border-radius:16px;background:var(--wall);position:relative;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}
.idxcard .sw::after{content:"";position:absolute;right:14px;bottom:14px;width:14px;height:14px;border-radius:50%;background:var(--acc);box-shadow:0 0 14px var(--acc)}
.idxcard b{font-family:var(--disp);font-size:22px;margin-top:8px}.idxcard small{color:var(--mute)}
/* kids app page */
.kidshero{padding:12vh 0 6vh;text-align:center}.kidshero .lead{margin-inline:auto}
.phones{padding:4vh 0}
.pgrid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;width:min(1100px,100% - 40px);margin:0 auto;align-items:start}
.phone{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.phone .screen{width:100%;max-width:330px;aspect-ratio:9/19.2;border-radius:46px;padding:18px 16px 14px;background:var(--kbg);color:var(--kink);font-family:var(--kfont);box-shadow:0 0 0 10px #111,0 0 0 11px #333,0 40px 80px rgba(0,0,0,.28);display:flex;flex-direction:column;gap:14px;overflow:hidden;position:relative}
.phone .screen::before{content:"";position:absolute;left:50%;top:10px;width:96px;height:26px;border-radius:14px;background:#111;transform:translateX(-50%)}
.ktop{display:flex;align-items:center;gap:8px;font-weight:800;font-size:14px;margin-top:28px}.ktop .dot{width:9px;height:9px;border-radius:50%;background:var(--kacc);box-shadow:0 0 10px var(--kacc)}.ktop .time{margin-left:auto;opacity:.6;font-size:12px}
.kmaatje{display:flex;flex-direction:column;align-items:center;gap:10px}
.kmaatje img{width:58%;aspect-ratio:1;object-fit:cover;border-radius:30%;box-shadow:0 14px 30px rgba(0,0,0,.25),0 0 0 4px var(--kcard)}
.kbubble{padding:12px 14px;border-radius:18px 18px 18px 4px;background:var(--kcard);font-weight:700;font-size:13.5px;line-height:1.3;box-shadow:0 6px 20px rgba(0,0,0,.08)}
.kchips{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}.kchips span{padding:6px 11px;border-radius:999px;font-size:11.5px;font-weight:800;background:var(--kacc);color:#fff;box-shadow:0 6px 16px color-mix(in srgb,var(--kacc) 40%,transparent)}.kchips span:nth-child(2n){background:var(--kacc2)}
.ktiles{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:auto}.ktiles div{padding:12px;border-radius:16px;background:var(--kcard);display:flex;flex-direction:column;gap:2px;box-shadow:0 4px 14px rgba(0,0,0,.06)}.ktiles b{font-size:13.5px}.ktiles small{opacity:.65;font-size:11px}
.kbar{display:flex;justify-content:center;gap:16px;padding-top:4px}.kbar i{width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.25}.kbar i.on{opacity:1;background:var(--kacc)}
.phone h3{margin-top:18px}.phone p{color:var(--mute);font-size:14px}
.kfeat{padding:8vh 0}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.film-frame img{transform:none}.scrollhint i,.rec i,.diagram path,.pulse i{animation:none}}
@media (max-width:980px){
  .film-grid,.steps,.pgrid,.pk,.idxgrid,.pgrid3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .prod .sticky{grid-template-columns:1fr;align-content:center;gap:12px}
  .prod-art .turn{max-width:600px}
  .wrap.two{grid-template-columns:1fr;gap:30px}
  .foot .wrap{grid-template-columns:1fr}
}
@media (max-width:620px){
  .film-grid,.steps,.pgrid,.pk,.idxgrid,.pgrid3{grid-template-columns:1fr}
  .kgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .themes{display:none}
  .beat[data-beat="0"],.beat[data-beat="1"]{left:16px;right:16px;text-align:left}
  .hero-art .turn{width:140vw;max-width:none}
  .diagram{display:none}
}

/* product films */
.pfilms{padding:8vh 0}
.pf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;width:min(1240px,100% - 40px);margin:36px auto 0}
.pf{margin:0;border-radius:var(--r);overflow:hidden;background:var(--bg2);box-shadow:0 0 0 1px var(--line),0 24px 60px rgba(0,0,0,.12);position:relative}
.pf video{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.pf figcaption{position:absolute;left:14px;bottom:12px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.8);backdrop-filter:blur(10px);font-weight:700;font-size:13px;color:#1D1D1F}
@media (max-width:980px){.pf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.pf-grid{grid-template-columns:1fr}}