/*
=====================================================
GROE DIGITAL — BRAND SYSTEM
=====================================================
Change values here and they update across every page.
Colors, fonts, spacing, and shared UI variables.
=====================================================
*/

:root {
  /* PRIMARY */
  --green: #00E87B;
  --green-dim: #00e87b22;
  --green-dark: #0a2a1a;
  --cyan: #00B4D8;

  /* BACKGROUNDS */
  --dark: #050505;
  --card: #0A0A0A;
  --border: #161616;
  --input-bg: #0D0D0D;

  /* TEXT */
  --white: #FFFFFF;
  --light: #D0D0D0;
  --gray: #999999;
  --dim: #666666;
  --faint: #555555;

  /* STATUS */
  --red: #FF4455;
  --yellow: #FFB800;

  /* FONTS */
  --font-body: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* COMPANY INFO (referenced in comments for easy find-replace) */
  /* Company: Groe Digital Inc. */
  /* Email: hello@groedigital.com */
  /* Domain: groedigital.com */
}

/* BASE RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--dark);
  color: var(--white);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
  width: 100%;
}

/* NOISE TEXTURE */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9999;
}

/* FONT PRECONNECTS ARE IN EACH HTML FILE */

/* LOADER (shared across all pages) */
.page-loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--dark); z-index: 10000; display: flex; align-items: center; justify-content: center; transition: opacity .4s ease, visibility .4s ease; }
.page-loader.hide { opacity: 0; visibility: hidden; }
.loader-inner { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.loader-logo { font-family: var(--font-body); font-weight: 800; font-size: 24px; color: var(--green); opacity: 0; animation: loaderFadeIn .5s ease .1s forwards; }
.loader-logo span { color: var(--white); }
.loader-bar { width: 120px; height: 2px; background: var(--border); border-radius: 2px; overflow: hidden; opacity: 0; animation: loaderFadeIn .5s ease .2s forwards; }
.loader-fill { width: 0; height: 100%; background: linear-gradient(90deg, var(--green), var(--cyan)); border-radius: 2px; animation: loaderProgress .8s ease .3s forwards; }
@keyframes loaderFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes loaderProgress { 0% { width: 0; } 100% { width: 100%; } }

/* SHARED ANIMATIONS */
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes glowPulse { 0%, 100% { box-shadow: 0 0 20px var(--green-dim); } 50% { box-shadow: 0 0 40px var(--green-dim), 0 0 60px rgba(0,232,123,0.08); } }