/* ============================================================
   BRIGHTGET SYSTEMS — ROOT CSS
   Change colors here → entire website updates automatically
   ============================================================ */

:root {
  /* ── Brand Colors ── */
  --primary:        #5c4018;      /* #1a6fb5 Main brand blue */
  --primary-dark:   #8c621e;      /* #0f4d8a */
  --primary-light:  #e8f2fc;      /* Light tint */
  --accent:         #C99159;      /* #f5a623 Gold accent */
  --accent-dark:    #A06A34;    /*  e08a00 */

  /* ── Neutrals ── */
  --white:          #ffffff;
  --off-white:      #f8f9fb;
  --light-gray:     #edf0f5;
  --mid-gray:       #9ba8b8;
  --dark-gray:      #4a5568;
  --charcoal:       #1e2532;
  --black:          #0d1117;

  /* ── Text ── */
  --text-primary:   #1e2532;
  --text-secondary: #5a6778;
  --text-muted:     #9ba8b8;
  --text-light:     #ffffff;

  /* ── Backgrounds ── */
  --bg-page:        #ffffff;
  --bg-section:     #f8f9fb;
  --bg-dark:        #0f1b2d; /*  */
  --bg-card:        #ffffff;

  /* ── Borders ── */
  --border:         #dde3ec;
  --border-light:   #edf0f5;

  /* ── Shadows ── */
  --shadow-sm:      0 2px 8px rgba(26, 111, 181, 0.48);
  --shadow-md:      0 8px 32px rgba(26, 111, 181, 0.82);
  --shadow-lg:      0 20px 60px rgba(26, 111, 181, 0.88);
  --shadow-card:    0 4px 20px rgba(0,0,0,0.58);

  /* ── Typography ── */
  --font-display:   'Playfair Display', Georgia, serif;
  --font-heading:   'Raleway', 'Segoe UI', sans-serif;
  --font-body:      'Nunito', 'Segoe UI', sans-serif;
  --font-mono:      'JetBrains Mono', monospace;

  /* ── Spacing ── */
  --section-py:     100px;
  --section-px:     80px;
  --container-max:  1280px;

  /* ── Radius ── */
  --radius-sm:      6px;
  --radius-md:      12px;
  --radius-lg:      20px;
  --radius-xl:      32px;
  --radius-full:    9999px;

  /* ── Transitions ── */
  --ease:           cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition:     0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:0.6s cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Navbar ── */
  --navbar-height:  80px;
  --navbar-bg:      rgba(255,255,255,0.97);
  --navbar-shadow:  0 2px 20px rgba(0,0,0,0.08);
}

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--bg-page);
  line-height: 1.7;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* ── Typography Scale ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.1;
  color: var(--text-primary);
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.6rem); }
h4 { font-size: 1.2rem; }
p  { color: black; }

/* ── Container ── */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, var(--section-px));
}

/* ── Section ── */
.section {
  padding: 48px 30px;
  /* padding: clamp(60px, 8vw, var(--section-py)) 0; */
}

.section-header {
  text-align: center;
  margin-bottom: 60px;
}

.section-tag {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
  background: var(--primary-light);
  padding: 6px 18px;
  border-radius: var(--radius-full);
  margin-bottom: 14px;
}

.section-title {
  font-family: var(--font-display);
  color: var(--text-primary);
  margin-bottom: 12px;
}

.section-subtitle {
  max-width: 600px;
  margin: 0 auto;
  color: var(--text-secondary);
  font-size: 1rem;
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}

.btn-primary {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}
.btn-primary:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(26,111,181,0.3);
}

.btn-accent {
  background: var(--accent);
  color: var(--white);
  border-color: var(--accent);
}
.btn-accent:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(245,166,35,0.3);
}

.btn-outline {
  background: transparent;
  color: var(--primary);
  border-color: var(--primary);
}
.btn-outline:hover {
  background: var(--primary);
  color: var(--white);
  transform: translateY(-2px);
}

.btn-white {
  background: var(--white);
  color: var(--primary);
  border-color: var(--white);
}
.btn-white:hover {
  background: transparent;
  color: var(--white);
  transform: translateY(-2px);
}

/* ── Cards ── */
.card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

/* ── Badge ── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* ── Divider ── */
.divider {
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: 2px;
  margin: 16px auto;
}
.divider-left { margin-left: 0; }

/* ── Reveal Animations (scroll-triggered) ── */
.reveal {
  opacity: 0; 
  transform: translateY(40px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal-left.revealed {
  opacity: 1;
  transform: translateX(0);
}
.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal-right.revealed {
  opacity: 1;
  transform: translateX(0);
}
.reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal-scale.revealed {
  opacity: 1;
  transform: scale(1);
}

/* ── Delay Utilities ── */
.delay-1 { transition-delay: 0.1s !important; }
.delay-2 { transition-delay: 0.2s !important; }
.delay-3 { transition-delay: 0.3s !important; }
.delay-4 { transition-delay: 0.4s !important; }
.delay-5 { transition-delay: 0.5s !important; }
.delay-6 { transition-delay: 0.6s !important; }

/* ── BG Utility ── */
.bg-primary { background: var(--primary); }
.bg-dark    { background: var(--bg-dark); }
.bg-section { background: var(--bg-section); }
.text-white { color: var(--white) !important; }
.text-primary-color { color: var(--primary) !important; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--light-gray); }
::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 3px; }

/* ── Selection ── */
::selection { background: var(--primary); color: var(--white); }






#lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  display: none;   /* ✅ IMPORTANT */
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

#lightbox.open {
  display: flex;   /* ✅ Only when active */
}