/*  Core VERSION: 1.1
   CHANGES FROM v1.0:
   - btn-gold:hover   — was hsla(gold,0.9) [transparent/invisible]; now solid darker gold hsl(40 52% 44%)
   - btn-white:hover  — was #fff [no visible change]; now flips midnight bg + white text
   - btn-large:hover  — fixed hsla() → hsl() / opacity shorthand for modern CSS
   - btn-pulse        — added :hover { animation:none } so bounce doesn't fight hover transform
   - transition on .btn — added transform so the translateY lift animates smoothly
   All other rules are byte-for-byte identical to v1.0.
   ============================================================ */
 
/* ============================================================
   ROOT / THEME VARIABLES
   ============================================================ */
:root {
  --midnight: 192 74% 17%;
  --midnight-foreground: 190 40% 94%;
  --gold: 40 52% 54%;
  --primary: 192 74% 17%;
  --primary-foreground: 190 40% 94%;
  --mist: 190 40% 94%;
  --muted-foreground: 192 10% 40%;
  --foreground: 0 0% 12%;
  --background: 0 0% 100%;
  --border: 190 20% 88%;
  --radius: 0.5rem;
}
 
/* ============================================================
   RESET / BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
 
html { scroll-behavior: smooth; }
 
body {
  font-family: 'Montserrat', Arial, sans-serif;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
 
h1, h2, h3, h4 { font-family: 'Raleway', sans-serif; }
 
img, svg, video { display: block; max-width: 100%; }
 
a { color: inherit; text-decoration: none; }
 
button { font-family: inherit; cursor: pointer; }
 
.vfb-no-scroll { overflow: hidden; }
 
/* ============================================================
   GRADIENT TEXT
   ============================================================ */
.text-gradient-gold {
  background: linear-gradient(to right, hsl(var(--gold)), hsl(35, 65%, 65%));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
 
/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  border: none;
  border-radius: calc(var(--radius) - 2px);
  font-family: inherit;
  font-weight: 600;
  font-size: 0.875rem;
  height: 2.5rem;
  padding: 0 1.25rem;
  cursor: pointer;
  /* CHANGED v1.1: added transform to transition so lift animates */
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
 
/* Gold — primary CTA */
.btn-gold {
  background-color: hsl(var(--gold));
  color: hsl(var(--midnight));
}
/* CHANGED v1.1: was hsla(var(--gold), 0.9) which made background transparent/invisible.
   Now darkens gold by ~10% lightness so button stays visible and changes colour. */
.btn-gold:hover {
  background-color: hsl(40 52% 44%);
  color: hsl(var(--midnight));
  transform: translateY(-1px);
  box-shadow: 0 4px 14px hsl(40 52% 44% / 0.4);
}
.btn-gold:active {
  background-color: hsl(40 52% 38%);
  transform: translateY(0);
  box-shadow: none;
}
 
/* White — secondary CTA */
.btn-white {
  background-color: rgba(255,255,255,0.9);
  color: hsl(var(--midnight));
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
/* CHANGED v1.1: was background-color:#fff — no visible change against near-white button.
   Now flips to midnight + white text for clear contrast. */
.btn-white:hover {
  background-color: hsl(var(--midnight));
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.2);
}
.btn-white:active {
  transform: translateY(0);
  box-shadow: none;
}
 
/* Ghost light */
.btn-ghost-light {
  background-color: rgba(255,255,255,0.2);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.btn-ghost-light:hover {
  background-color: rgba(255,255,255,0.30);
  border-color: rgba(255,255,255,0.6);
}
 
/* Large modifier */
.btn-large {
  height: 2.75rem;
  font-size: 1rem;
  font-weight: 700;
  padding: 1.5rem 2rem;
  border-radius: var(--radius);
  /* CHANGED v1.1: hsla() 3-arg form invalid in some browsers; use modern / syntax */
  box-shadow: 0 10px 15px -3px hsl(var(--gold) / 0.2);
}
.btn-large:hover {
  box-shadow: 0 20px 25px -5px hsl(var(--gold) / 0.4);
}
 
/* Pulse animation */
@keyframes bounce-attention {
  0%, 100% { transform: scale(1); }
  15%       { transform: scale(1.08); }
  30%       { transform: scale(1); }
  45%       { transform: scale(1.05); }
  60%       { transform: scale(1); }
}
.btn-pulse {
  animation: bounce-attention 2.5s ease-in-out infinite;
}
/* CHANGED v1.1: freeze pulse on hover so it doesn't fight the translateY */
.btn-pulse:hover {
  animation: none;
}
 
.icon-arrow { margin-left: 0.5rem; }
 
/* ============================================================
   LAYOUT
   ============================================================ */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
}
@media (min-width: 1024px) { .container { padding: 0 2rem; } }
 
.text-center { text-align: center; }
 
/* ============================================================
   GRID SYSTEM
   ============================================================ */
.grid { display: grid; gap: 1.5rem; }
 
.grid-3 { grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
 
.grid-4 { grid-template-columns: 1fr; }
@media (min-width: 640px)  { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-4 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }
 
/* ============================================================
   SECTION SYSTEM
   ============================================================ */
.section { padding: 5rem 0; position: relative; overflow: hidden; }
.section-light { background-color: hsl(var(--mist)); }
.section-white { background-color: #fff; }
.section-dark  { background-color: hsl(var(--midnight)); color: #fff; }
 
.section-header { text-align: center; margin-bottom: 3.5rem; }
 
.section-title { font-size: 1.875rem; font-weight: 700; color: hsl(var(--primary)); margin-bottom: 1rem; }
@media (min-width: 768px) { .section-title { font-size: 2.25rem; } }
 
.section-title-light { color: #fff; }
.section-title-sm { font-size: 1.5rem; margin-bottom: 1.5rem; }
 
.section-subtitle { color: hsl(var(--muted-foreground)); max-width: 42rem; margin: 0 auto; }
.section-subtitle-light { color: rgba(255,255,255,0.6); }
 
/* ============================================================
   GOLD DIVIDER
   ============================================================ */
.section-divider-wrap { display: flex; justify-content: center; padding: 1rem 0; }
.section-divider {
  width: 80%;
  height: 1px;
  background: linear-gradient(to right, transparent, hsl(var(--gold) / 0.4), transparent);
}
 
/* ============================================================
   HEADER OFFSET + SCROLL STATE
   ============================================================ */
body { padding-top: 0; }
 
.vfb-header.is-scrolled {
  background-color: rgba(8, 71, 83, 0.98);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}