/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; color-scheme: only light; background: var(--dark); }
body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: #f7f7fc;
  color: #1a0a2e;
  line-height: 1.7;
  overflow-x: hidden;
  animation: page-reveal .5s ease both;
}
@keyframes page-reveal {
  from { opacity: 0; }
  to   { opacity: 1; }
}
a { text-decoration: none; color: inherit; }

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  /* Dark purple-black for hero / contact */
  --dark:       #0f0520;
  --dark-2:     #160a2e;
  --dark-3:     #1e1040;
  --dark-border:#2e1855;

  /* Light backgrounds — neutral, not pink */
  --light:      #f7f7fc;
  --light-2:    #f0f0f9;
  --white:      #ffffff;

  /* Text */
  --text:       #0f0520;
  --text-muted: #5a4870;
  --text-dim:   #9585a8;
  --border:     #e4e2ee;

  /* ★ Pink accent palette */
  --violet:     #f472b6;
  --violet-2:   #ec4899;
  --violet-glow:#fbcfe8;
  --violet-soft:#fdf2f8;

  --radius:     8px;
  --radius-sm:  6px;
  --radius-lg:  12px;

  --shadow-sm:  0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow:     0 4px 16px rgba(0,0,0,.07), 0 1px 4px rgba(0,0,0,.04);
  --shadow-lg:  0 20px 60px rgba(0,0,0,.11), 0 4px 16px rgba(0,0,0,.05);
  --shadow-pink: 0 6px 24px rgba(244,114,182,.28);

  /* Pixel offset (used for card shadows) */
  --pixel-offset: 4px 4px 0 0 rgba(0,0,0,.1);
  --pixel-offset-pink: 4px 4px 0 0 var(--violet);
}

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--dark); }
::-webkit-scrollbar-thumb { background: var(--violet); border-radius: 0; }

/* ============================================================
   GLOBAL POLISH
   ============================================================ */
::selection { background: rgba(244,114,182,.25); }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 2px; }

/* Scroll progress bar */
#scroll-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--violet), var(--violet-glow));
  z-index: 9999; pointer-events: none;
  transition: width .1s linear;
}

/* Back to top button — pixel style square */
#back-to-top {
  position: fixed; bottom: 2rem; right: 2rem;
  width: 44px; height: 44px; border-radius: 4px;
  background: var(--violet); color: #fff; border: 2px solid rgba(0,0,0,.15);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 4px 4px 0 0 rgba(0,0,0,.2);
  opacity: 0; transform: translateY(16px) scale(.9);
  transition: opacity .3s ease, transform .3s ease, background .2s, box-shadow .2s;
  z-index: 50;
}
#back-to-top.visible { opacity: 1; transform: translateY(0) scale(1); }
#back-to-top:hover {
  background: var(--violet-2);
  box-shadow: 6px 6px 0 0 rgba(0,0,0,.25);
  transform: translate(-2px, -2px);
}
#back-to-top svg { width: 18px; height: 18px; }