/* ========================================================================== */
/* Variables – TRYHARDGG ANALYTICS                                               */
/* ========================================================================== */

:root {
  --sv-bg:          #06091e;
  --sv-bg-mid:      #0a1230;
  --sv-surface:     #0e1b4a;
  --sv-surface-alt: #112060;

  --sv-primary:      #e0b847;
  --sv-primary-glow: rgba(224, 184, 71, 0.13);
  --sv-primary-dark: #c49a2c;
  --sv-primary-lite: #eecf72;

  --sv-teal:   #0dcfbc;
  --sv-violet: #7b6fff;

  --sv-text:       #d8e8ff;
  --sv-text-muted: #7896c4;
  --sv-text-dim:   #4e6a9a;

  --sv-border:        #152e68;
  --sv-border-bright: #1e3f8c;

  --sv-danger:  #ff4d4d;
  --sv-success: #00dfa0;
  --sv-warn:    #f5a623;

  --sv-font-sans:  'Lato', 'Inter', system-ui, -apple-system, sans-serif;
  --sv-font-serif: 'Merriweather', Georgia, serif;

  --sv-fs-xs:   0.75rem;
  --sv-fs-sm:   0.875rem;
  --sv-fs-base: 1rem;
  --sv-fs-lg:   1.125rem;
  --sv-fs-xl:   1.25rem;
  --sv-fs-2xl:  1.5rem;
  --sv-fs-3xl:  1.875rem;
  --sv-fs-4xl:  2.25rem;

  --sv-lh-tight:   1.2;
  --sv-lh-normal:  1.6;
  --sv-lh-relaxed: 1.75;

  --sv-s1:  0.25rem;
  --sv-s2:  0.5rem;
  --sv-s3:  0.75rem;
  --sv-s4:  1rem;
  --sv-s5:  1.25rem;
  --sv-s6:  1.5rem;
  --sv-s8:  2rem;
  --sv-s10: 2.5rem;
  --sv-s12: 3rem;
  --sv-s16: 4rem;
  --sv-s20: 5rem;

  --sv-r-sm:   4px;
  --sv-r-md:   8px;
  --sv-r-lg:   12px;
  --sv-r-xl:   18px;
  --sv-r-full: 999px;

  --sv-shadow:       0 8px 28px rgba(0, 0, 0, 0.4);
  --sv-shadow-soft:  0 4px 14px rgba(0, 0, 0, 0.28);
  --sv-shadow-glow:  0 0 22px rgba(224, 184, 71, 0.2);
  --sv-shadow-focus: 0 0 0 3px rgba(224, 184, 71, 0.38);
  --sv-shadow-teal:  0 0 16px rgba(13, 207, 188, 0.18);

  --sv-t-fast: 130ms ease-out;
  --sv-t-base: 200ms ease-out;
  --sv-t-slow: 280ms ease-out;

  --sv-container: 1120px;
  --sv-px:        1rem;

  --sv-z-header:  100;
  --sv-z-overlay: 400;
  --sv-z-modal:   500;
}

@media (min-width: 768px) {
  :root {
    --sv-px: 1.5rem;
    --sv-fs-xl:  1.375rem;
    --sv-fs-2xl: 1.75rem;
    --sv-fs-3xl: 2.125rem;
    --sv-fs-4xl: 2.5rem;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { margin: 0; padding: 0; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; }
h1,h2,h3,h4,h5,h6,p,figure,blockquote,ul,ol,dl { margin: 0; }
ul, ol { padding-left: 1.4rem; }
img,picture,video,canvas,svg { display: block; max-width: 100%; height: auto; }
button,input,textarea,select { font: inherit; color: inherit; }
button { border: none; background: none; padding: 0; }
a { color: inherit; text-decoration: none; }
fieldset { border: 0; margin: 0; padding: 0; }
legend { padding: 0; }

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  font-family: var(--sv-font-sans);
  font-size: var(--sv-fs-base);
  line-height: var(--sv-lh-normal);
  color: var(--sv-text);
  background-color: var(--sv-bg);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main { flex: 1; display: flex; flex-direction: column; }

h1,h2,h3,h4,h5,h6 { font-weight: 700; letter-spacing: -0.02em; color: var(--sv-text); line-height: 1.2; }
h1 { font-size: var(--sv-fs-4xl); font-weight: 800; margin-bottom: var(--sv-s4); }
h2 { font-size: var(--sv-fs-3xl); margin-bottom: var(--sv-s3); }
h3 { font-size: var(--sv-fs-2xl); margin-bottom: var(--sv-s2); }
h4 { font-size: var(--sv-fs-xl); margin-bottom: var(--sv-s2); font-weight: 600; }

p { margin-bottom: var(--sv-s3); color: var(--sv-text); line-height: 1.65; }

.container { max-width: var(--sv-container); margin: 0 auto; padding: 0 var(--sv-px); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--sv-s4) var(--sv-s6); border-radius: var(--sv-r-md);
  font-size: var(--sv-fs-sm); font-weight: 700; cursor: pointer;
  transition: all var(--sv-t-base); border: none; text-decoration: none;
  white-space: nowrap; gap: var(--sv-s2); letter-spacing: 0.02em;
}

.btn-primary {
  background: linear-gradient(135deg, var(--sv-primary) 0%, var(--sv-primary-dark) 100%);
  color: var(--sv-bg); box-shadow: var(--sv-shadow-glow);
}
.btn-primary:hover { background: linear-gradient(135deg, var(--sv-primary-lite) 0%, var(--sv-primary) 100%); color: var(--sv-bg); transform: translateY(-1px); }

.btn-outline { background: transparent; color: var(--sv-teal); border: 2px solid var(--sv-teal); }
.btn-outline:hover { background: rgba(13,207,188,0.08); transform: translateY(-1px); }

.btn-primary-sm {
  background: linear-gradient(135deg, var(--sv-primary) 0%, var(--sv-primary-dark) 100%);
  color: var(--sv-bg); padding: var(--sv-s2) var(--sv-s4); font-size: var(--sv-fs-xs);
  border-radius: var(--sv-r-sm); display: inline-flex; align-items: center;
  text-decoration: none; font-weight: 700; transition: all var(--sv-t-base);
}
.btn-primary-sm:hover { filter: brightness(1.08); color: var(--sv-bg); }

.btn-secondary-sm {
  background: transparent; color: var(--sv-teal); border: 1px solid var(--sv-teal);
  padding: var(--sv-s2) var(--sv-s4); font-size: var(--sv-fs-xs);
  border-radius: var(--sv-r-sm); display: inline-flex; align-items: center;
  text-decoration: none; font-weight: 600; transition: all var(--sv-t-base);
}
.btn-secondary-sm:hover { background: rgba(13,207,188,0.1); }

.btn--primary {
  background: linear-gradient(135deg, var(--sv-primary) 0%, var(--sv-primary-dark) 100%);
  color: var(--sv-bg); padding: var(--sv-s4) var(--sv-s8); border-radius: var(--sv-r-md);
  font-weight: 700; display: inline-flex; align-items: center; text-decoration: none;
  transition: all var(--sv-t-base);
}
.btn--primary:hover { filter: brightness(1.1); transform: translateY(-1px); }

.btn--secondary {
  background: transparent; color: var(--sv-teal); border: 2px solid var(--sv-teal);
  padding: var(--sv-s4) var(--sv-s8); border-radius: var(--sv-r-md);
  font-weight: 600; display: inline-flex; align-items: center; text-decoration: none;
  transition: all var(--sv-t-base);
}
.btn--secondary:hover { background: rgba(13,207,188,0.08); }