/* === Pro Boost — SAFE MODE === */
:root{
  --rn-accent-1:#7c5cff;
  --rn-accent-2:#5bd2ff;
  --rn-border: rgba(255,255,255,.12);
  --rn-muted:#7c8a9e;
}
html{scroll-behavior:smooth}
body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

/* Gentle improvements; no visibility changes */
a.button, .button, button, [type="submit"]{ border-radius: 12px; transition: transform .12s ease, box-shadow .2s ease }
a.button:hover, .button:hover, button:hover, [type="submit"]:hover{ transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0,0,0,.18) }

.card, .feature, .tile{ border: 1px solid var(--rn-border); border-radius: 16px; backdrop-filter: blur(6px) }

hr{ border:0; height:1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent) }

/* Reveal additive only: base is visible */
.rn-reveal{ will-change: transform }
.rn-reveal.in{}

header a, footer a{
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0% 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size .25s ease;
}
header a:hover, footer a:hover{ background-size: 100% 1px }

/* Progress bar + top button */
.rn-progress{ position: fixed; top:0; left:0; height:3px; width:0%; background: linear-gradient(90deg, var(--rn-accent-1), var(--rn-accent-2)); z-index: 9999 }
#rn-top{
  position: fixed; right: 18px; bottom: 18px; width: 44px; height: 44px;
  border-radius: 999px; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--rn-accent-1), var(--rn-accent-2));
  color: #fff; border:0; cursor:pointer;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  opacity:0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease;
  z-index: 9999;
}
#rn-top.in{ opacity:1; transform: translateY(0) }

/* Images: only if rn-fade is present */
img.rn-fade{ opacity:0; transform: translateY(6px); transition: opacity .5s ease, transform .5s ease }
img.rn-fade.rn-img-in{ opacity:1; transform: none }

@media (prefers-reduced-motion: reduce){
  #rn-top{ transition: none }
}


/* === BALANCED reveal animations (additive) === */
.rn-reveal.in{ animation: rnReveal .6s ease both }
.rn-reveal.rn-left.in{ animation-name: rnRevealLeft }
.rn-reveal.rn-right.in{ animation-name: rnRevealRight }
.rn-reveal.rn-zoom.in{ animation-name: rnRevealZoom }

@keyframes rnReveal{ from{ opacity:.35; transform: translateY(8px) } to{ opacity:1; transform:none } }
@keyframes rnRevealLeft{ from{ opacity:.35; transform: translateX(-10px) } to{ opacity:1; transform:none } }
@keyframes rnRevealRight{ from{ opacity:.35; transform: translateX(10px) } to{ opacity:1; transform:none } }
@keyframes rnRevealZoom{ from{ opacity:.35; transform: scale(.97) } to{ opacity:1; transform: none } }

/* Images: additive fade */
img.rn-fade.rn-img-in{ animation: rnImg .5s ease both }
@keyframes rnImg{ from{ opacity:.15; transform: translateY(6px) } to{ opacity:1; transform:none } }