/* WDT – eigene Gestaltung, gleiche Familie wie Habitia und Shoply:
   Frosted-Nav, runde Formen, weiche Animationen (nur transform/opacity). */
:root{
  --bg:#F2F2FF; --card:#fff; --text:#1D1B2E; --muted:#58557A; --line:#DAD6F5;
  --primary:#6445DF; --deep:#3A1FA8; --on-primary:#fff; --soft:#E5E1FF; --on-soft:#2E1C8F;
  --coral:#FE7171; --sun:#FFC972; --sun-soft:#FFEBC2; --on-sun:#4A3200;
  --der-bg:#DCEBFF; --der:#0B4A8F; --die-bg:#FFDDE0; --die:#9B1C2E; --das-bg:#D6F3E0; --das:#0C6A3A;
  --ease:cubic-bezier(.2,.8,.2,1); --spring:cubic-bezier(.3,1.5,.5,1);
  --font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fa:"Vazirmatn","Segoe UI",Tahoma,system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#161426;--card:#221F38;--text:#ECEAFB;--muted:#B5B1D6;--line:#38345A;--primary:#A193FC;--deep:#6D55E8;--on-primary:#1D1170;--soft:#3C3660;--on-soft:#E0DBFF;--sun-soft:#4A3C1F;
    --der-bg:#1E3A5F;--der:#BBD9FF;--die-bg:#5A2431;--die:#FFC8D0;--das-bg:#1F4A33;--das:#BDEBD0}
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:84px;overflow-x:clip}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
main{overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--coral);outline-offset:3px;border-radius:8px}
.fa{font-family:var(--fa)}

.progress{position:fixed;top:0;left:0;height:3px;width:100%;background:linear-gradient(90deg,var(--sun),var(--coral));transform-origin:0 50%;transform:scaleX(0);z-index:100}

/* NAV (wie bei den anderen Apps) */
.nav{position:fixed;top:12px;left:50%;transform:translateX(-50%);width:min(1100px,calc(100% - 24px));display:flex;align-items:center;justify-content:space-between;padding:8px 10px 8px 16px;border-radius:999px;background:color-mix(in srgb,var(--card) 72%,transparent);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border:1px solid var(--line);z-index:50;transition:box-shadow .3s}
.nav.scrolled{box-shadow:0 8px 30px rgba(30,10,100,.16)}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.15rem;letter-spacing:-.01em}
.brand img{border-radius:9px}
.nav nav{display:flex;align-items:center;gap:22px;font-size:.95rem;color:var(--muted)}
.nav nav a:not(.btn){transition:color .2s}
.nav nav a:not(.btn):hover{color:var(--text)}
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--primary);color:var(--on-primary);font-weight:700;padding:12px 22px;border-radius:999px;transition:transform .25s var(--spring),box-shadow .25s}
.btn:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 8px 20px color-mix(in srgb,var(--primary) 40%,transparent)}
.btn-sm{padding:9px 18px;font-size:.92rem}
nav .btn{color:var(--on-primary)}

/* HERO: violette Fläche mit Schriftzeichen und drei Handys */
.hero{position:relative;isolation:isolate;overflow:hidden;color:#fff;text-align:center;padding:128px 24px 0;border-radius:0 0 56px 56px;background:linear-gradient(165deg,#3A1FA8 0%,#5B3BD8 45%,#8B6DF5 100%)}
.hero::before{content:"";position:absolute;inset:auto -10% -40% -10%;height:70%;background:radial-gradient(closest-side,rgba(254,113,113,.45),transparent);z-index:-1}
.glyphs{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.gl{position:absolute;font-weight:800;color:rgba(255,255,255,.09);line-height:1;animation:drift 16s ease-in-out infinite alternate}
.gl:nth-child(1){font-size:11rem;left:3%;top:14%}
.gl:nth-child(2){font-size:8rem;left:18%;top:52%;animation-delay:-4s}
.gl:nth-child(3){font-size:13rem;right:4%;top:10%;animation-delay:-8s}
.gl:nth-child(4){font-size:7rem;right:20%;top:56%;animation-delay:-2s}
.gl:nth-child(5){font-size:9rem;left:44%;top:2%;animation-delay:-11s}
.gl:nth-child(6){font-size:6rem;left:8%;top:78%;animation-delay:-6s}
@keyframes drift{to{transform:translate(26px,-34px) rotate(6deg)}}
.pill{display:inline-flex;align-items:center;gap:9px;padding:7px 15px;border-radius:999px;background:rgba(255,255,255,.16);color:#fff;font-weight:650;font-size:.88rem;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--sun);box-shadow:0 0 0 0 var(--sun);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}
h1{font-size:clamp(2.5rem,6.4vw,5rem);line-height:1.02;letter-spacing:-.04em;font-weight:850;margin:20px auto 0;max-width:12em}
h1 .hl{display:inline-block;background:linear-gradient(100deg,var(--sun),#FFA8A8);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:1.2rem;max-width:34em;margin:20px auto 0;color:rgba(255,255,255,.88)}
.cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:18px;margin:30px 0 8px}
.play{display:inline-flex;align-items:center;gap:12px;background:#111;color:#fff;padding:11px 24px 11px 18px;border-radius:16px;border:1px solid #444;transition:transform .3s var(--spring),box-shadow .3s;position:relative;overflow:hidden}
.play::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.25) 50%,transparent 65%);transform:translateX(-120%);animation:sweep 4s 1.5s infinite}
@keyframes sweep{to{transform:translateX(120%)}}
.play:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 14px 30px rgba(0,0,0,.32)}
.play span{display:flex;flex-direction:column;line-height:1.1;text-align:left}
.play small{font-size:.7rem;opacity:.8}
.play b{font-size:1.25rem;font-weight:650;letter-spacing:-.01em}
.ghost{font-weight:700;color:#fff;padding:10px 4px;border-bottom:2px solid rgba(255,255,255,.35);transition:border-color .2s}
.ghost:hover{border-color:#fff}

/* Wort in drei Schriften */
.cycle{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center;margin:34px auto 0;min-height:64px}
.cy{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.95);color:#1D1B2E;padding:10px 20px;border-radius:18px;font-weight:750;font-size:1.35rem;box-shadow:0 14px 30px -14px rgba(10,0,70,.6);transition:transform .45s var(--spring),opacity .35s}
.cy.out{opacity:0;transform:translateY(14px) scale(.94)}
.cy .art{font-size:.8rem;padding:2px 9px;border-radius:999px;border:2px solid;font-weight:800}
.art.der{background:var(--der-bg);color:var(--der);border-color:var(--der)}
.art.die{background:var(--die-bg);color:var(--die);border-color:var(--die)}
.art.das{background:var(--das-bg);color:var(--das);border-color:var(--das)}
.cy .art.der{background:#DCEBFF;color:#0B4A8F;border-color:#0B4A8F}
.cy .art.die{background:#FFDDE0;color:#9B1C2E;border-color:#9B1C2E}
.cy .art.das{background:#D6F3E0;color:#0C6A3A;border-color:#0C6A3A}
.cy.en{color:#4B2FC4}

/* drei Handys, leicht gefächert (unten vom Rand der Fläche abgeschnitten) */
.fan{--pw:min(270px,32vw);--off:min(215px,25vw);position:relative;height:calc(var(--pw) * 2.1667 * .86);margin:40px auto 0;max-width:900px}
.phone{position:absolute;bottom:calc(var(--pw) * -2.1667 * .14);width:var(--pw);aspect-ratio:1080/2340;border-radius:40px;border:8px solid #14112B;background:#14112B;box-shadow:0 40px 80px -24px rgba(8,0,60,.75);overflow:hidden}
.phone img{width:100%;height:100%;object-fit:cover;border-radius:32px}
.phone::before{content:"";position:absolute;top:7px;left:50%;width:60px;height:16px;margin-left:-30px;background:#14112B;border-radius:12px;z-index:3}
.phone::after{content:"";position:absolute;inset:0;border-radius:32px;background:linear-gradient(115deg,rgba(255,255,255,.2),transparent 35%);pointer-events:none}
.p-mid{left:50%;margin-left:calc(var(--pw) / -2);z-index:3;animation:rise 7s ease-in-out infinite}
.p-left{left:50%;margin-left:calc(var(--pw) / -2 - var(--off));transform:rotate(-8deg);transform-origin:50% 100%;z-index:2;opacity:.96}
.p-right{left:50%;margin-left:calc(var(--pw) / -2 + var(--off));transform:rotate(8deg);transform-origin:50% 100%;z-index:2;opacity:.96}
@keyframes rise{50%{translate:0 -14px}}

/* ZAHLEN */
.facts{position:relative;z-index:4;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:960px;margin:-46px auto 0;background:var(--card);border:1px solid var(--line);border-radius:28px;padding:22px 12px;box-shadow:0 24px 50px -24px rgba(40,20,140,.35);text-align:center}
.facts div{padding:4px 8px;border-inline-end:1px solid var(--line)}
.facts div:last-child{border:0}
.facts b{display:block;font-size:clamp(1.7rem,3.6vw,2.6rem);font-weight:850;letter-spacing:-.03em;color:var(--primary);line-height:1.1;font-variant-numeric:tabular-nums}
.facts span{color:var(--muted);font-size:.92rem}

/* ABSCHNITTE */
.sec{padding:96px 24px 20px;max-width:1160px;margin:0 auto}
.sec-head{text-align:center;max-width:720px;margin:0 auto 48px}
.eyebrow{display:inline-block;text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;font-weight:800;color:var(--primary);background:var(--soft);padding:6px 14px;border-radius:999px;margin-bottom:16px}
h2{font-size:clamp(1.9rem,4.2vw,3.1rem);line-height:1.1;letter-spacing:-.035em;font-weight:850}
.sec-head p{color:var(--muted);margin-top:14px;font-size:1.1rem}

/* BENTO */
.bento{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(150px,auto);gap:16px}
.tile{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line);border-radius:30px;padding:26px;transition:transform .4s var(--spring),box-shadow .4s}
.tile:hover{transform:translateY(-6px);box-shadow:0 26px 44px -22px rgba(40,20,140,.35)}
.tile h3{font-size:1.3rem;letter-spacing:-.02em;line-height:1.2;margin-bottom:8px}
.tile p{color:var(--muted);font-size:1rem}
.t-search{grid-column:span 3;grid-row:span 2;background:linear-gradient(160deg,var(--soft),var(--card))}
.t-art{grid-column:span 3}
.t-idiom{grid-column:span 3;background:var(--sun-soft);border-color:transparent;color:var(--on-sun)}
.t-idiom p{color:#6B4A00}
@media (prefers-color-scheme:dark){.t-idiom{color:#FFE9BD}.t-idiom p{color:#EBD3A0}}
.t-learn{grid-column:span 2}
.t-goal{grid-column:span 2}
.t-theme{grid-column:span 2}
.shot{display:block;width:min(210px,62%);aspect-ratio:1080/2340;margin:22px auto -90px;border-radius:30px;border:7px solid #14112B;overflow:hidden;box-shadow:0 30px 50px -24px rgba(10,0,70,.6)}
.shot img{width:100%;height:100%;object-fit:cover}
.arts-row{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.arts-row .art{font-size:1.05rem;padding:7px 18px;border:2px solid;border-radius:999px;font-weight:800}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.tags span{background:var(--soft);color:var(--on-soft);font-weight:700;font-size:.85rem;padding:6px 12px;border-radius:999px}
.ring{width:92px;height:92px;border-radius:50%;background:conic-gradient(var(--primary) 0 70%,var(--soft) 70% 100%);display:grid;place-items:center;margin-bottom:12px;animation:spin-in 1.4s var(--ease) both}
.ring i{display:grid;place-items:center;width:70px;height:70px;border-radius:50%;background:var(--card);font-style:normal;font-weight:850;font-size:1.25rem;color:var(--primary)}
@keyframes spin-in{from{transform:rotate(-120deg) scale(.7);opacity:0}}
.duo{display:flex;gap:10px;justify-content:center;margin-top:14px}
.duo span{width:92px;aspect-ratio:1080/2340;border-radius:18px;border:4px solid #14112B;overflow:hidden;box-shadow:0 14px 24px -12px rgba(10,0,70,.5)}
.duo span:first-child{transform:rotate(-4deg)}
.duo span:last-child{transform:rotate(4deg)}
.duo img{width:100%;height:100%;object-fit:cover}

/* UMDREH-KARTEN */
.flips{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.flip{display:block;width:100%;perspective:1000px;background:none;border:0;padding:0;cursor:pointer;text-align:left;min-height:320px;font:inherit;color:inherit}
.flip-in{display:block;position:relative;width:100%;height:100%;min-height:320px;transform-style:preserve-3d;transition:transform .8s var(--ease)}
.face>span{display:block}
.face br{display:none}
.idiom,.lit,.mean,.mean-fa,.eq,.hint{display:block}
.flip[aria-pressed=true] .flip-in{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:30px;padding:26px;display:flex;flex-direction:column;justify-content:space-between;border:1px solid var(--line)}
.front{background:linear-gradient(160deg,#5B3BD8,#8B6DF5);color:#fff;border:0}
.back{background:var(--card);transform:rotateY(180deg)}
.lvl{align-self:flex-start;background:rgba(255,255,255,.2);padding:4px 12px;border-radius:999px;font-size:.82rem;font-weight:800}
.back .lvl{background:var(--soft);color:var(--on-soft)}
.idiom{font-size:clamp(1.5rem,2.6vw,2rem);font-weight:850;letter-spacing:-.02em;line-height:1.15}
.lit{opacity:.85;font-size:.98rem}
.hint{font-size:.88rem;font-weight:700;opacity:.9}
.mean{font-size:1.35rem;font-weight:800;line-height:1.25;letter-spacing:-.01em}
.mean-fa{font-size:1.2rem;color:var(--primary);font-weight:700;margin-top:6px}
.eq{color:var(--muted);font-size:.98rem}
.eq em{font-style:normal;font-weight:700;color:var(--text)}

/* AUSPROBIEREN */
.demo-card{--d-bg:#F2F2FF;--d-card:#fff;--d-text:#1D1B2E;--d-muted:#58557A;--d-line:#DAD6F5;--d-pri:#6445DF;--d-onpri:#fff;--d-soft:#E5E1FF;
  max-width:600px;margin:0 auto;border-radius:34px;padding:22px;background:var(--d-bg);color:var(--d-text);border:1px solid var(--line);box-shadow:0 40px 80px -30px rgba(20,10,80,.4);transition:background .4s,color .4s}
.demo-card[data-t=dark]{--d-bg:#1D1B2E;--d-card:#26233D;--d-text:#ECEAFB;--d-muted:#B5B1D6;--d-line:#3A3659;--d-pri:#A193FC;--d-onpri:#1D1170;--d-soft:#3C3660}
.demo-top{display:flex;gap:10px;align-items:center;margin-bottom:18px;flex-wrap:wrap}
.tabs,.themes{display:flex;gap:4px;background:var(--d-card);padding:4px;border-radius:999px;border:1px solid var(--d-line)}
.tabs{flex:1}
.tabs button,.themes button{border:0;background:transparent;font-weight:700;padding:9px 16px;border-radius:999px;color:var(--d-muted);cursor:pointer;transition:all .3s var(--ease);flex:1}
.tabs button[aria-selected=true],.themes button[aria-pressed=true]{background:var(--d-pri);color:var(--d-onpri)}
.panel[hidden]{display:none}
.s-field{display:flex;align-items:center;gap:10px;background:var(--d-card);border:2.5px solid var(--d-line);border-radius:20px;padding:4px 16px;transition:border-color .25s}
.s-field:focus-within{border-color:var(--d-pri)}
.s-field input{flex:1;min-width:0;background:transparent;border:0;outline:0;font:inherit;font-size:1.1rem;color:var(--d-text);padding:12px 0}
.s-field svg{width:22px;height:22px;stroke:var(--d-muted);fill:none;stroke-width:2.2;stroke-linecap:round}
.s-list{list-style:none;padding:0;margin-top:14px;display:grid;gap:10px;min-height:150px;align-content:start}
.s-item{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 12px;background:var(--d-card);border:1px solid var(--d-line);border-radius:18px;padding:12px 16px;animation:in .35s var(--ease) both}
@keyframes in{from{opacity:0;transform:translateY(10px)}}
.s-de{font-weight:800;font-size:1.15rem}
.s-tr{grid-column:1;color:var(--d-muted);display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.s-tr .fa{color:var(--d-text);font-weight:700}
.s-item .art{grid-row:1/3;grid-column:2;font-size:1rem;padding:6px 14px;border:2px solid;border-radius:999px;font-weight:800}
.demo-card[data-t=light] .art.der,.demo-card[data-t=light] .arts .art.der{background:#DCEBFF;color:#0B4A8F;border-color:#0B4A8F}
.demo-card[data-t=light] .art.die{background:#FFDDE0;color:#9B1C2E;border-color:#9B1C2E}
.demo-card[data-t=light] .art.das{background:#D6F3E0;color:#0C6A3A;border-color:#0C6A3A}
.demo-card[data-t=dark] .art.der{background:#1E3A5F;color:#BBD9FF;border-color:#7DB4F2}
.demo-card[data-t=dark] .art.die{background:#5A2431;color:#FFC8D0;border-color:#F0828F}
.demo-card[data-t=dark] .art.das{background:#1F4A33;color:#BDEBD0;border-color:#6FD19A}
.s-empty{color:var(--d-muted);text-align:center;padding:30px 10px}
.q-hud{display:flex;justify-content:space-between;align-items:center;color:var(--d-muted);font-weight:650;font-size:.95rem;margin-bottom:12px}
.q-streak b{color:var(--d-pri);font-variant-numeric:tabular-nums;display:inline-block}
.q-streak b.pop{animation:pop .5s var(--spring)}
@keyframes pop{40%{transform:scale(1.35)}}
.q-card{background:var(--d-card);border:1px solid var(--d-line);border-radius:24px;padding:26px 18px;text-align:center}
.q-label{color:var(--d-muted);font-size:.95rem;font-weight:600}
.q-word{font-size:clamp(2.2rem,8vw,3rem);font-weight:850;letter-spacing:-.02em;line-height:1.15;margin:6px 0 2px}
.q-gloss{color:var(--d-muted);font-size:1.15rem}
.q-gloss span{margin:0 .35em}
.arts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.arts .art{font-size:1.5rem;padding:16px 0;border-radius:20px;border:2.5px solid;cursor:pointer;font-weight:850;transition:transform .25s var(--spring),opacity .3s,background .3s}
.arts .art:hover:not(:disabled){transform:translateY(-3px) scale(1.03)}
.arts .art:disabled{cursor:default}
.demo-card .arts .art.right{background:#16A34A;border-color:#16A34A;color:#fff}
.arts .art.wrong{animation:shake .4s}
.arts .art.dim{opacity:.4}
@keyframes shake{25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
.q-fb{min-height:3.2em;margin-top:14px;text-align:center;font-weight:650;color:var(--d-muted)}
.q-fb b{color:var(--d-text)}
.q-next{display:block;margin:6px auto 0;border:0;border-radius:999px;padding:11px 26px;font-weight:700;background:var(--d-pri);color:var(--d-onpri);cursor:pointer;transition:transform .25s var(--spring)}
.q-next:hover{transform:scale(1.05)}
.q-next[hidden]{display:none}
.burst{position:fixed;width:10px;height:10px;border-radius:3px;pointer-events:none;z-index:200}

/* DATENSCHUTZ */
.privacy{max-width:960px;margin:90px auto 0;padding:0 24px}
.priv-panel{border-radius:36px;padding:44px clamp(22px,5vw,56px);background:linear-gradient(150deg,var(--soft),var(--card));border:1px solid var(--line)}
.priv-panel h2{margin-bottom:24px}
.priv-list{list-style:none;padding:0;display:grid;gap:18px}
.priv-list li{display:grid;grid-template-columns:52px 1fr;gap:16px;align-items:start}
.priv-list .ic{width:52px;height:52px;border-radius:16px;background:var(--card);display:grid;place-items:center;font-size:1.5rem;border:1px solid var(--line);transition:transform .4s var(--spring)}
.priv-list li:hover .ic{transform:rotate(-10deg) scale(1.1)}
.priv-list b{display:block;font-size:1.1rem;letter-spacing:-.01em}
.priv-list span{color:var(--muted)}

/* ABSCHLUSS */
.final{margin:96px 0 0;text-align:center;color:#fff;padding:90px 24px;border-radius:56px 56px 0 0;background:linear-gradient(165deg,#3A1FA8,#6A47E6 60%,#8B6DF5);position:relative;overflow:hidden;isolation:isolate}
.final::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:rgba(254,113,113,.35);filter:blur(80px);right:-120px;top:-160px;z-index:-1}
.final-icon{margin:0 auto 24px;border-radius:28px;box-shadow:0 20px 40px -10px rgba(0,0,0,.5);animation:rise 5s ease-in-out infinite}
.final h2{max-width:14em;margin:0 auto 14px}
.final p{opacity:.9;font-size:1.15rem;margin-bottom:30px}
.final .play{margin:0 auto}
footer{background:linear-gradient(165deg,#3A1FA8,#6A47E6 60%,#8B6DF5);color:#fff;padding:26px 24px 34px}
.foot-in{max-width:1100px;margin:0 auto;display:flex;flex-wrap:wrap;gap:16px 34px;align-items:center;justify-content:space-between;border-top:1px solid rgba(255,255,255,.25);padding-top:22px}
footer nav{display:flex;gap:24px;opacity:.9}
footer nav a:hover{opacity:1;text-decoration:underline}

/* REVEAL */
.reveal{opacity:0;transform:translateY(34px) scale(.98);filter:blur(6px);transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease)}
.reveal.in{opacity:1;transform:none;filter:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}

.toast{position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translate(-50%,20px);opacity:0;pointer-events:none;z-index:300;padding:.8rem 1.3rem;border-radius:999px;background:#0f172a;color:#fff;font:600 .95rem/1.3 system-ui,sans-serif;box-shadow:0 14px 40px -12px rgba(15,23,42,.6);transition:opacity .3s,transform .3s}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* RESPONSIV */
@media (max-width:900px){
  .nav nav a:not(.btn){display:none}
  .facts{grid-template-columns:repeat(2,1fr);gap:18px 8px;margin-inline:18px}
  .facts div:nth-child(2){border:0}
  .bento{grid-template-columns:1fr 1fr}
  .tile,.t-search,.t-art,.t-idiom{grid-column:span 2;grid-row:auto}
  .t-learn,.t-goal{grid-column:span 1}
  .t-theme{grid-column:span 2}
  .flips{grid-template-columns:1fr}
  .flip,.flip-in{min-height:260px}
  .gl{opacity:.6}
}
@media (max-width:560px){
  .hero{padding-top:112px;border-radius:0 0 36px 36px}
  .bento{grid-template-columns:1fr}
  .tile,.t-learn,.t-goal,.t-theme{grid-column:span 1}
  .fan{--pw:42vw;--off:30vw}
  .cy{font-size:1.1rem;padding:8px 14px}
  .final{border-radius:36px 36px 0 0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none;filter:none}
  html{scroll-behavior:auto}
}