/* Ragnarok na naman?! — shared "chunky sticker" design system
   Used by all pages. Fonts are loaded per-page via <link> (Lilita One, Baloo 2,
   Space Grotesk). Keep this in sync across pages. */

*{box-sizing:border-box}
body{margin:0;background:#fff3f6;font-family:'Baloo 2',system-ui,sans-serif;color:#3a2230;-webkit-font-smoothing:antialiased}
a{color:#ff5c8a;text-decoration:none}
a:hover{color:#e03d6f}
code,.mono{font-family:'Space Grotesk',ui-monospace,Menlo,monospace}

/* ---- keyframes ---- */
@keyframes rnn-float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-9px) rotate(2deg)}}
@keyframes rnn-blink{0%,92%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
@keyframes rnn-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.82)}}
@keyframes rnn-wob{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes rnn-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes rnn-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes rnn-pop{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}

/* ---- springy buttons (design's style-hover/active, as real CSS) ---- */
.rnn-btn{transition:transform .15s cubic-bezier(.34,1.56,.64,1),box-shadow .15s ease}
.rnn-btn:hover{transform:translate(-1px,-3px) rotate(-1.5deg);box-shadow:5px 8px 0 #3a2230}
.rnn-btn.r:hover{transform:translate(-1px,-3px) rotate(1.5deg)}
.rnn-btn:active{transform:translate(2px,3px);box-shadow:1px 1px 0 #3a2230}
.rnn-navbtn{transition:transform .15s cubic-bezier(.34,1.56,.64,1),box-shadow .15s ease}
.rnn-navbtn:hover{transform:translate(-1px,-2px) rotate(-1.5deg);box-shadow:4px 6px 0 #3a2230}
.rnn-navbtn:active{transform:translate(1px,2px);box-shadow:1px 1px 0 #3a2230}
.rnn-press{transition:transform .12s ease,box-shadow .12s ease}
.rnn-press:active{transform:translate(2px,3px);box-shadow:1px 1px 0 #3a2230}

/* ---- form inputs (design's style-focus, as real CSS) ---- */
.rnn-in:focus{border-color:#ff5c8a;box-shadow:0 0 0 4px #ff5c8a33;background:#fff}
.rnn-submit{transition:transform .12s ease,box-shadow .12s ease}
.rnn-submit:active{transform:translate(2px,3px);box-shadow:1px 1px 0 #3a2230}
.rnn-msg{text-align:center;font:700 13px/1.4 'Baloo 2';min-height:1.2em;margin-top:14px}
.rnn-msg.err{color:#e03d6f}
.rnn-msg.ok{color:#3a8a52}

/* ---- responsive top nav (hamburger below 880px) ---- */
.rnn-navlinks{display:flex;gap:20px;align-items:center;font:700 13px/1 'Baloo 2'}
.rnn-burger{display:none;flex:none;align-items:center;justify-content:center;width:42px;height:38px;background:#fff;border:2.5px solid #3a2230;border-radius:12px;box-shadow:2px 3px 0 #3a2230;cursor:pointer;padding:0}
.rnn-burger:active{transform:translate(1px,2px);box-shadow:1px 1px 0 #3a2230}
.rnn-cta-mobile{display:none}
@media(max-width:880px){
  .rnn-navlinks{display:none}
  .rnn-navlinks.open{display:flex;flex-direction:column;align-items:flex-start;gap:16px;font-size:15px;position:absolute;top:100%;left:0;right:0;background:#fff3f6;border-bottom:2.5px solid #3a2230;padding:18px 22px;box-shadow:0 14px 22px rgba(58,34,48,.14)}
  .rnn-burger{display:inline-flex}
  .rnn-navcta{display:none}
  .rnn-navlinks.open .rnn-cta-mobile{display:inline-block}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none !important}
}