/* Hero — liquid, scaled from the 1440px Figma frame (1vw = 14.4px) */
#neue-hero { position: sticky; top: 0; height: 100vh; height: 100svh; z-index: 0; background: #ff1100; color: #141414; display: flex; align-items: center; justify-content: center; padding: calc(3.65vw + 7.5vw) 4vw 3vw; text-align: center; box-sizing: border-box; overflow: hidden; }
#neue-hero .neue-inner { display: flex; flex-direction: column; align-items: center; width: min(86vw, 1560px); }
#neue-logo { position: absolute; top: 3.65vw; left: 50%; transform: translateX(-50%); width: 14.39vw; height: auto; pointer-events: none; }
#neue-hero h1 { margin: 0; padding: 0; border: 0; text-transform: none; text-align: center; width: 100%; font: 700 min(5.8vw, 9.4svh)/.9 'Times New Roman MT Bold Condensed', serif; letter-spacing: -.02em; color: #141414; }
#neue-hero h1::before, #neue-hero h1::after { display: none; }
/* Skrivningen: ett span per tecken (neue.js). Dolda tecken tar sin plats, så raden ligger stilla medan den skrivs. */
.neue-ch { visibility: hidden; position: relative; }
.neue-ch.on { visibility: visible; }
/* Markören: absolut ::after på senaste tecknet, versalhöjd till baslinje (Times New Roman MT Bold Condensed: radboxens
   topp ligger .92em över baslinjen, versalhöjden är .68em). Utanför flödet, så raden blir inte bredare av den. */
.neue-ch.cur::after { content: ''; position: absolute; left: calc(100% + .02em); top: .24em; width: .06em; height: .68em; background: currentColor; visibility: visible; animation: neue-blink 1s steps(1) infinite; }
.neue-ch.cur.pre::after { left: auto; right: calc(100% + .02em); }
.neue-typing .neue-ch.cur::after { animation: none; }
/* När meningen är färdigskriven försvinner markören */
.neue-done .neue-ch.cur::after { visibility: hidden; animation: none; }
@keyframes neue-blink { 50% { opacity: 0; } }
.neue-actions { display: flex; flex-direction: column; align-items: center; gap: 1.8vw; margin-top: 4vw; /* 2.3vw t.o.m. 20/10 16:30, Joel ville ha knappen längre ned */ opacity: 0; transform: translateY(10px); transition: opacity .6s, transform .6s; }
.neue-actions.in { opacity: 1; transform: none; }
.neue-actions a { font-family: 'AM Kosmos', sans-serif; font-weight: 500; text-decoration: none; }
#neue-hero .neue-btn { font: 700 max(24px, 3.7vw)/1.1 'Times New Roman MT Bold Condensed', serif; letter-spacing: -.02em; background: #141414; color: #fff; border-radius: 999px; padding: .22em .85em .3em; transition: background .2s, color .2s; }
#neue-hero .neue-btn:hover { background: #f5f5f5; color: #141414; }
.neue-hero-layer { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
@media (max-width: 900px) { #neue-hero h1 { font-size: min(8vw, 9svh); } }
@media (max-width: 640px) { #neue-hero .neue-inner { width: 92vw; } #neue-hero h1 { font-size: min(10.6vw, 7.4svh); } #neue-logo { width: 28vw; top: 7vw; } #neue-hero { padding: 22vw 4vw 12vw; } .neue-actions { margin-top: 5.5vw; } /* knappen lite längre ned på mobil (Joel 2026-10-20) */ }
.neue-site { position: relative; z-index: 1; background: #f5f5f5; }

#neue-stickers { position: absolute; left: 0; top: 0; width: 100%; height: 0; overflow: visible; z-index: 9000; pointer-events: none; }
.neue-sticker { position: absolute; left: 0; top: 0; will-change: transform; }
.neue-sticker svg { display: block; width: 100%; height: 100%; }
.peel-f, .peel-b { position: absolute; inset: 0; }
.peel-b { transform-origin: 0 0; filter: drop-shadow(0 0 6px rgba(0,0,0,.3)); }
#neue-mstickers { position: fixed; inset: 0; z-index: 9000; overflow: hidden; pointer-events: none; }
.neue-hero-layer .neue-sticker.grab { pointer-events: auto; touch-action: none; cursor: grab; }
.neue-hero-layer .neue-sticker.held { filter: drop-shadow(0 12px 18px rgba(0,0,0,.3)); }