@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap');



:root {

  --font: 'Nunito', system-ui, sans-serif;

  --cg-primary: #FA5876;

  --cg-primary-hover: #fb7890;

  --cg-primary-dark: #d94462;

  --cg-primary-rgb: 250, 88, 118;

  --cg-accent: var(--cg-primary);

  --cg-accent-hover: var(--cg-primary-hover);

  --cg-bg: #131218;

  --cg-sidebar: #191923;

  --cg-surface: #23232f;

  --cg-surface-2: #2b2b38;

  --cg-border: rgba(255, 255, 255, 0.08);

  --cg-text: #ffffff;

  --cg-text-muted: #a8a8b3;

  --cg-text-dim: #6e6e7a;

  --cg-pink: var(--cg-primary);

  --cg-green: #3dd68c;

  --cg-orange: #ff9f43;

  --cg-sidebar-w: 240px;

  --cg-radius: 12px;

  --cg-radius-lg: 16px;

  --cg-transition: 0.2s ease;

}



*, *::before, *::after { box-sizing: border-box; }



html {

  scroll-behavior: smooth;

  -webkit-text-size-adjust: 100%;

}



body {

  margin: 0;

  font-family: var(--font);

  background: var(--cg-bg);

  color: var(--cg-text);

  line-height: 1.5;

  -webkit-font-smoothing: antialiased;

  overflow-x: hidden;

}



img { max-width: 100%; display: block; }



a { color: inherit; text-decoration: none; }



button { font-family: inherit; cursor: pointer; }



.card {

  background: var(--cg-surface);

  border-radius: var(--cg-radius-lg);

  border: 1px solid var(--cg-border);

}



.sr-only {

  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;

  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;

}



.btn {

  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;

  padding: 0.65rem 1.25rem; border-radius: 999px; border: none;

  font: inherit; font-weight: 700; cursor: pointer; transition: var(--cg-transition);

}



.btn-primary {

  background: var(--cg-primary);

  color: #fff;

}



.btn-primary:hover { background: var(--cg-primary-hover); }



.btn-secondary {

  background: var(--cg-surface-2); color: var(--cg-text); border: 1px solid var(--cg-border);

}



.btn-secondary:hover {

  border-color: rgba(var(--cg-primary-rgb), 0.35);

}



.section-title {

  font-size: 1.35rem; font-weight: 800; margin: 0;

}



.section-subtitle {

  color: var(--cg-text-muted); margin: 0.25rem 0 0; font-size: 0.9rem;

}