:root{
  --gradient-start:#4ea2ff;
  --gradient-end:#1a56db;
  --primary:#2a7de1;
  --primary-dark:#194fad;
  --text:#0f172a;
  --muted:#6b7280;
  --bg:#f5f8ff;
  --ring:rgba(15,23,42,.08);

  --gradient-start:#fda15e;
  --gradient-end:#f78142;
  --primary:#f46b33;
  --primary-dark:#d45020;
  --text:#212121;
  --muted:#6e6e6e;
  --bg:#fff8ef;
  --ring:rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; background:var(--bg); color:var(--text); line-height:1.7; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
/* Header */
header{position:sticky; top:0; z-index:60; background-image:linear-gradient(90deg,#4ea2ff,#1a56db); color:#fff; box-shadow:0 10px 24px var(--ring)}
.nav{max-width:1200px; margin:0 auto; padding:.7rem 1rem; display:flex; align-items:center; justify-content:space-between; position:relative}
.logo{height:88px; display:block; filter:drop-shadow(0 3px 10px rgba(0,0,0,.25))}
nav{display:flex; align-items:center; gap:1rem}
nav a{color:#fff; text-decoration:none; font-weight:800; opacity:.96; white-space:nowrap}
nav a:hover{opacity:1; text-decoration:underline}
.menu-btn{display:none; background:rgba(255,255,255,.12); border:1px solid rgba(230,240,255,.5); color:#fff; padding:.55rem .8rem; border-radius:10px; font-weight:800}
/* Hero */
.hero{background:radial-gradient(900px 460px at 25% 5%, rgba(0,0,0,.26), transparent), linear-gradient(180deg, #0b1f3f 0%, #0f2f66 60%, #134a9c 100%); color:#fff; padding:5.6rem 1rem 4rem}
.hero .wrap{max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1.05fr .95fr; gap:2rem; align-items:center}
.hero h1{font-size:clamp(2rem, 5vw, 3.6rem); line-height:1.1; margin:.1rem 0 .6rem}
.hero p{max-width:680px; opacity:.95; margin:0 0 1.2rem}
.cta{display:inline-block; padding:1rem 1.35rem; border-radius:999px; background-image:linear-gradient(90deg,var(--primary),var(--primary-dark)); color:#fff; text-decoration:none; font-weight:900; box-shadow:0 10px 24px var(--ring)}
.tiles{display:grid; grid-template-columns:repeat(3,minmax(200px,1fr)); gap:1rem; margin-top:1.1rem}
.tile{background:#fff; border-radius:18px; box-shadow:0 14px 30px var(--ring); display:grid; place-items:center; overflow:hidden; aspect-ratio:4/3}
.tile img{width:100%; height:100%; object-fit:cover}
/* Main */
main{max-width:1200px; margin:2rem auto; padding:0 1rem}
.section{background:#fff; border-radius:18px; box-shadow:0 10px 24px var(--ring); padding:1.2rem 1.1rem; margin-bottom:2rem; border:1px solid rgba(26,86,219,.08)}
.section h2{margin-top:0; color:#134a9c}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem}
.card{background:#fff; border-radius:14px; box-shadow:0 8px 18px var(--ring); padding:1rem; border:1px solid rgba(26,86,219,.12)}
.card h3{margin:.25rem 0 .25rem}
/* Order preview */
.preview-wrap{display:grid; place-items:center}
.card-canvas{width:min(560px, 96vw); aspect-ratio: 4/3; background:#fff; border:2px solid #fda15e; border-radius:16px; box-shadow:0 12px 28px var(--ring); padding:14px; display:grid; grid-template-columns:1fr auto; gap:10px}
.card-head{display:flex; align-items:center; gap:10px}
.card-logo{height:56px}
.name{font-weight:900; font-size:1.2rem}
.sub{color:#f46b33; font-weight:700; font-size:.95rem}
.details{font-size:.95rem; color:#444; align-self:flex-start}
.qr{width:120px; height:120px; border-radius:10px; border:1px solid #ddd; object-fit:contain}
/* Footer */
footer{background-image:linear-gradient(90deg,#4ea2ff,#1a56db); color:#fff; text-align:center; padding:2rem 1rem; margin-top:2rem}
footer a{color:#fff; text-decoration:underline}
/* Responsive */
@media (max-width: 980px){
  .logo{height:72px}
  .hero .wrap{grid-template-columns:1fr}
  .tiles{grid-template-columns:repeat(2, minmax(160px,1fr))}
  .qr{width:104px; height:104px}
}
@media (max-width: 760px){
  .menu-btn{display:block}
  nav{display:none; position:absolute; top:100%; left:0; right:0; background:linear-gradient(90deg,var(--gradient-start),var(--gradient-end)); padding:.7rem 1rem; box-shadow:0 10px 24px var(--ring)}
  .nav.open nav{display:flex; flex-direction:column; gap:.7rem}
  .tiles{grid-template-columns:1fr}
  .logo{height:64px}
  .cta{padding:.9rem 1.1rem}
  .card-canvas{width:92vw}
  .qr{width:92px; height:92px}
}

/* Grid fix for "Warum admee2go?" on mobile */
@media (max-width: 980px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 560px){
  .grid-4{grid-template-columns:1fr}
}

/* Smooth CSS animation to replace flickering GIF on mobile */
.tile video, .tile img{display:block}
.anim{position:relative; width:100%; height:100%}
.anim-meet{border-radius:inherit; overflow:hidden; background-image:linear-gradient(180deg, var(--gradient-start), var(--gradient-end));}
.anim-meet .avatar{position:absolute; top:38%; width:44px; height:44px; border-radius:50%; background:#fff; box-shadow:0 8px 24px rgba(0,0,0,.18); will-change:transform}
.anim-meet .avatar::after{content:""; position:absolute; inset:8px; border-radius:50%; background:#2c2c2c}
.anim-meet .avatar.left{left:12%; animation:meetLeft 2.8s ease-in-out infinite}
.anim-meet .avatar.right{right:12%; animation:meetRight 2.8s ease-in-out infinite}
.anim-meet .card{position:absolute; left:50%; top:50%; width:64px; height:40px; transform:translate(-50%,-50%) scale(.9); border-radius:10px; background:#fff; border:3px solid #eee; box-shadow:0 10px 24px rgba(0,0,0,.12); animation:meetPop 2.8s ease-in-out infinite; will-change:transform,opacity}
@keyframes meetLeft{ 0%,100%{ transform:translateX(0) } 50%{ transform:translateX(80px) } }
@keyframes meetRight{ 0%,100%{ transform:translateX(0) } 50%{ transform:translateX(-80px) } }
@keyframes meetPop{ 0%{ opacity:0; transform:translate(-50%,-50%) scale(.8) } 28%{ opacity:1; transform:translate(-50%,-50%) scale(1) } 70%{ opacity:1; } 100%{ opacity:0; transform:translate(-50%,-50%) scale(.85) } }

/* v5: order preview fixes */
.card-canvas{overflow:hidden; grid-template-columns: 1fr 130px; position:relative}
.qr{justify-self:end; align-self:center; opacity:0; transition:opacity .25s ease}
.qr.is-loaded{opacity:1}
/* reduce QR on tiny screens */
@media (max-width: 560px){
  .card-canvas{grid-template-columns: 1fr 110px}
}

/* v5: prettier, smoother 'meet' animation with GPU acceleration */
.anim-meet{position:relative; isolation:isolate; background:linear-gradient(180deg, #4ea2ff, #1a56db);}
.anim-meet .ground{position:absolute; inset:auto 0 0 0; height:28%; background:rgba(255,255,255,.85); filter:blur(0.4px);}
.anim-meet .avatar{position:absolute; top:40%; width:48px; height:48px; border-radius:50%; background:#fff; box-shadow:0 10px 30px rgba(0,0,0,.18); will-change:transform; transform:translate3d(0,0,0)}
.anim-meet .avatar::after{content:""; position:absolute; inset:10px; border-radius:50%; background:#2c2c2c}
.anim-meet .shadow{position:absolute; width:70px; height:14px; border-radius:50%; background:rgba(0,0,0,.18); bottom:26%; filter:blur(6px); will-change:transform}
.anim-meet .shadow.left{left:14%}
.anim-meet .shadow.right{right:14%}
.anim-meet .avatar.left{left:14%; animation:meetLeft 3.6s cubic-bezier(.22,.61,.36,1) infinite}
.anim-meet .avatar.right{right:14%; animation:meetRight 3.6s cubic-bezier(.22,.61,.36,1) infinite}
.anim-meet .card{position:absolute; left:50%; top:48%; width:76px; height:48px; transform:translate(-50%,-50%) scale(.88); border-radius:12px; background:#fff; border:3px solid #eee; box-shadow:0 18px 36px rgba(0,0,0,.16); animation:meetPop 3.6s ease-in-out infinite; will-change:transform,opacity}
@keyframes meetLeft{ 0%,100%{ transform:translate3d(0,0,0) } 50%{ transform:translate3d(90px,0,0) } }
@keyframes meetRight{ 0%,100%{ transform:translate3d(0,0,0) } 50%{ transform:translate3d(-90px,0,0) } }
@keyframes meetPop{ 0%{ opacity:0; transform:translate(-50%,-52%) scale(.8) } 28%{ opacity:1; transform:translate(-50%,-50%) scale(1) } 70%{ opacity:1; } 100%{ opacity:0; transform:translate(-50%,-48%) scale(.86) } }
/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .anim-meet .avatar.left,.anim-meet .avatar.right,.anim-meet .card{animation:none}
}

@media (max-width: 980px){
  .tile[aria-hidden="true"]{display:none !important;}
}

/* --- Mobile fix: stack preview content & QR on very small screens --- */
@media (max-width: 420px){
  .card-canvas{grid-template-columns: 1fr; grid-template-rows: auto auto; width: 94vw}
  .qr{justify-self:center; align-self:start; margin-top: 8px}
}