@font-face{font-family:Fredoka;font-weight:600;font-display:swap;src:url(/fonts/Fredoka_600SemiBold.ttf) format("truetype")}
@font-face{font-family:Fredoka;font-weight:700;font-display:swap;src:url(/fonts/Fredoka_700Bold.ttf) format("truetype")}
@font-face{font-family:Nunito;font-weight:400;font-display:swap;src:url(/fonts/Nunito_400Regular.ttf) format("truetype")}
@font-face{font-family:Nunito;font-weight:700;font-display:swap;src:url(/fonts/Nunito_700Bold.ttf) format("truetype")}

:root{
  --cream:#F5F0E6;--ink:#181210;--text2:#5E5546;--border:#DDD4C2;
  --pine:#1B4D3E;--pine-600:#2E6B51;--pine-tint:#E2F0EC;--night:#0C2A18;
  --amber:#F5A623;--amber-tint:#FFF0CC;--rust:#E0552E;
  --radius:16px;--max:1080px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font:400 1.0625rem/1.65 Nunito,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:Fredoka,system-ui,sans-serif;font-weight:700;line-height:1.15;color:var(--pine);margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(2rem,5.5vw,3.25rem)}
h2{font-size:clamp(1.6rem,3.8vw,2.25rem)}
h3{font-size:1.25rem;font-weight:600}
p{margin:0 0 1em}
a{color:var(--pine-600)}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 16px}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:8px;background:#fff;padding:8px 12px;z-index:10}

/* header */
header.top{position:sticky;top:0;z-index:5;background:rgba(245,240,230,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:12px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--pine);font:700 1.5rem Fredoka,sans-serif}
.brand img{width:34px;height:34px;border-radius:9px}
nav.r{display:flex;align-items:center;gap:14px}
.lang{display:flex;gap:2px;font-weight:700;font-size:.9rem}
.lang a,.lang span{padding:6px 10px;border-radius:999px;text-decoration:none;color:var(--text2)}
.lang span{background:var(--pine);color:var(--cream)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border-radius:14px;border:0;font:700 1rem Nunito,sans-serif;text-decoration:none;cursor:pointer;background:var(--amber);color:var(--ink);box-shadow:0 4px 0 #C98410;transition:transform .1s,box-shadow .1s}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #C98410}
.btn.ghost{background:transparent;color:var(--pine);box-shadow:inset 0 0 0 2px var(--pine)}
.btn[aria-disabled=true]{background:#E7DFCD;color:#6B6252;box-shadow:none;cursor:default}
.badges{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.soon{font-size:.9rem;color:var(--text2);margin-top:10px}

/* hero */
.hero{padding:48px 0 24px}
.hero .wrap{display:grid;gap:24px;align-items:center}
.hero p.lead{font-size:1.2rem;color:var(--text2);max-width:34em}
.hero img{width:min(380px,80%);margin:0 auto}
@media(min-width:800px){.hero .wrap{grid-template-columns:1.1fr .9fr}.hero{padding:80px 0 40px}}

/* feature rows */
.row{padding:56px 0}
.row .wrap{display:grid;gap:28px;align-items:center}
.row h2{color:var(--pine)}
.row p{color:var(--text2);max-width:30em}
.phone{width:min(260px,70%);margin:0 auto;border:9px solid var(--ink);border-radius:38px;overflow:hidden;background:#000;box-shadow:0 18px 40px rgba(24,18,16,.18)}
.phone img{width:100%}
.ill{width:min(320px,80%);margin:0 auto}
@media(min-width:800px){
  .row .wrap{grid-template-columns:1fr 1fr;gap:64px}
  .row.flip .wrap>:first-child{order:2}
}
.tint{background:var(--pine-tint)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;list-style:none}
.chips li{background:var(--amber-tint);color:#6B4A00;border-radius:999px;padding:4px 14px;font-weight:700;font-size:.92rem}

/* band + cta */
.band{background:var(--pine);color:var(--cream);padding:64px 0;text-align:center}
.band h2{color:var(--cream)}
.band p{color:#CFE3DB;max-width:36em;margin:0 auto 1em}
.band img{width:170px;margin:0 auto 12px}
.cta{padding:72px 0;text-align:center}
.cta .badges{justify-content:center}

/* footer: light, link columns on top, the journey illustration as the bottom edge */
.foot{background:var(--cream);border-top:1px solid var(--border);color:var(--text2);font-size:.92rem;overflow:hidden}
.foot-top{display:grid;gap:32px;padding-top:44px}
.foot-about p{max-width:30ch;margin:.6em 0 0}
.foot-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.foot-cols h2{margin:0 0 .9em;font:700 .95rem Nunito,sans-serif;color:var(--ink)}
.foot-cols a{display:block;margin:0 0 .75em;color:var(--text2);text-decoration:none}
.foot-cols a:hover,.foot-cols a:focus-visible{color:var(--pine);text-decoration:underline}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding-top:36px;color:var(--text2);font-size:.8rem}
.foot-top,.foot-bottom{position:relative;z-index:1}
.foot-art{display:block;width:100%;height:auto;margin-top:-9%;pointer-events:none}
@media(min-width:800px){.foot-top{grid-template-columns:1fr minmax(0,520px);justify-content:space-between}}
@media(max-width:559px){.foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))}.foot-art{margin-top:-2%;height:clamp(150px,44vw,240px);object-fit:cover;object-position:22% 100%}}

/* legal pages */
.doc{padding:40px 0 72px}
.doc .wrap{max-width:760px}
.doc h1{font-size:clamp(1.8rem,4.5vw,2.5rem)}
.doc h2{font-size:1.4rem;margin-top:2em}
.doc h3{margin-top:1.4em;color:var(--ink)}
.doc li{margin:.3em 0}
.doc table{border-collapse:collapse;width:100%;font-size:.95rem;margin:1em 0}
.doc th,.doc td{border:1px solid var(--border);padding:8px 10px;text-align:left;vertical-align:top}
.doc th{background:var(--pine-tint)}
.doc .meta{color:var(--text2);font-size:.95rem}
.fill{background:#FFE08A;padding:0 4px;border-radius:4px;font-weight:700}
.draft{border:2px dashed var(--rust);background:#FFF3EE;border-radius:12px;padding:12px 16px;margin:0 0 1.5em;font-size:.95rem}

@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* live Zümi + family */
.zumi{width:min(400px,82%);margin:0 auto;aspect-ratio:562/530;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.zumi svg,.zumi img{display:block;width:100%;height:auto}
.zumi.small{width:min(230px,60%);margin-bottom:12px}
.tapme{font-size:.9rem;color:var(--text2);text-align:center;margin:6px 0 0}
.family-sec{padding:64px 0;text-align:center}
.family-sec p{color:var(--text2);max-width:36em;margin:0 auto 1.5em}
.family{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0;padding:0;list-style:none}
@media(min-width:800px){.family{grid-template-columns:repeat(6,1fr);gap:18px}}
.suit{display:block;width:100%;padding:12px 6px 10px;border:0;border-radius:20px;cursor:pointer;font:inherit;color:var(--ink);-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.suit.r-common{background:linear-gradient(#CFF2DF,#F4FBF7)}
.suit.r-rare{background:linear-gradient(#CFE6FF,#F4F9FF)}
.suit.r-epic{background:linear-gradient(#D9CCFA,#F8F5FF)}
.suit .art{display:block;aspect-ratio:840/1030;transform-origin:50% 100%}
.suit .art svg{display:block;width:100%;height:100%}
.suit b{display:block;font:700 1rem Fredoka,sans-serif;color:var(--pine);margin-top:6px}
.suit small{display:block;font-size:.8rem;color:var(--text2)}
.suit .art.bounce{animation:bounce .9s cubic-bezier(.3,0,.3,1)}
@keyframes bounce{0%{transform:scale(1.04,.92)}17%{transform:scale(.96,1.08)}44%{transform:scale(1.01,.98)}100%{transform:none}}
@media(prefers-reduced-motion:reduce){.suit .art.bounce{animation:none}}