@font-face {
  font-family: 'STALPH';
  src: url('../assets/fonts/STALPH.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --pink-dark:   #f177ae;
  --pink-med:    #f494be;
  --pink-light:  #f0cbd9;
  --yellow:      #fad448;
  --blue:        #6581b8;
  --blue-light:  #9baad1;
  --black:       #231F20;
  --go-live:     #e63946;
  --wallet-green:#2ecc71;
  --white:       #ffffff;
  --font-display: 'STALPH', Georgia, serif;
  --font-body:    'STALPH', Georgia, serif;
  --font-ui:      'STALPH', Georgia, serif;
  --space-xs:  4px;  --space-sm:  8px;  --space-md:  16px;
  --space-lg:  24px; --space-xl:  40px; --space-2xl: 64px;
  --radius-sm:   6px;  --radius-md:   12px; --radius-lg:   20px;
  --radius-xl:   32px; --radius-pill: 999px;
  --shadow-card: 0 2px 12px rgba(35,31,32,0.10);
  --shadow-pop:  0 6px 24px rgba(241,119,174,0.25);
  --shadow-nav:  0 2px 8px rgba(35,31,32,0.08);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms; --dur-med: 280ms; --dur-slow: 500ms;
  --nav-h: 70px;
  --sidebar-w: 180px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 15px; }
body { font-family: var(--font-body); background: var(--blue-light); color: var(--black); min-height: 100vh; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: var(--font-body); }
img, svg { display: block; max-width: 100%; }
input, textarea, select { font-family: var(--font-body); }
h1,h2,h3,h4,h5,h6,p,span,div,a,button,label,input,textarea { font-family: var(--font-body); }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--pink-light); }
::-webkit-scrollbar-thumb { background: var(--pink-med); border-radius: var(--radius-pill); }
.stalph { font-family: var(--font-body); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@keyframes fadeUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes pulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.06); } }
@keyframes shimmer { from { background-position:-400px 0; } to { background-position:400px 0; } }
@keyframes heartbeat { 0%,100%{transform:scale(1);} 14%{transform:scale(1.3);} 28%{transform:scale(1);} 42%{transform:scale(1.15);} 70%{transform:scale(1);} }
@keyframes marqueeScroll { from{transform:translateX(0);} to{transform:translateX(-50%);} }
@keyframes floatParticle { 0%{transform:translateY(100vh) scale(0);opacity:0;} 10%{opacity:.6;} 90%{opacity:.4;} 100%{transform:translateY(-20vh) scale(1.2);opacity:0;} }
.anim-fade-up { animation: fadeUp var(--dur-med) var(--ease-smooth) both; }
.anim-fade-in { animation: fadeIn var(--dur-med) var(--ease-smooth) both; }
.anim-heartbeat { animation: heartbeat 1.4s ease-in-out infinite; }