:root {
  /* Brand */
  --yellow:      #fec532;
  --yellow-dark: #f0a800;
  --yellow-light:#fde68a;
  --yellow-pale: #fffcf0;

  /* Grays — from logo palette */
  --gray-logo:  #929292;
  --gray-light: #f4f4f4;
  --gray-soft:  #e8e8e8;
  --gray-mid:   #d0d0d0;
  --gray-dark:  #484848;
  --charcoal:   #1e1e1e;
  --black:      #0d0d0d;
  --white:      #ffffff;

  /* Semantic aliases */
  --bg:         var(--gray-light);   /* page background = logo light grey */
  --warm:       var(--gray-light);
  --surface:    var(--white);
  --text:       var(--charcoal);
  --gray:       #6b6b6b;
  --muted:      var(--gray-logo);
  --dark:       #1c1c1e;
  --border:     var(--gray-soft);
  --border-mid: var(--gray-mid);

  /* Radius */
  --r-sm:   4px;
  --r:      10px;
  --r-lg:   18px;
  --r-xl:   28px;
  --r-pill: 999px;

  /* Shadows — tuned for grey background */
  --sh-xs: 0 1px 4px rgba(0,0,0,0.07);
  --sh-sm: 0 2px 16px rgba(0,0,0,0.10);
  --sh-md: 0 8px 32px rgba(0,0,0,0.12);
  --sh-lg: 0 20px 64px rgba(0,0,0,0.15);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ═══════════════════════════════════
   NAV
═══════════════════════════════════ */
#navbar {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  height:68px; padding:0 48px;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, box-shadow .3s;
}
#navbar.scrolled {
  border-bottom-color: var(--border);
  box-shadow: var(--sh-sm);
}
.nav-logo { display:flex; align-items:center; height:100%; text-decoration:none; }
.nav-logo-img { height:100%; width:auto; display:block; }
.nav-links { display:flex; align-items:center; gap:2px; }
.nav-links a {
  color: var(--gray-logo); text-decoration:none;
  font-size:14px; font-weight:500;
  padding:7px 14px; border-radius: var(--r-pill);
  transition: color .18s, background .18s;
  position: relative;
}
.nav-links a:hover { color: var(--charcoal); background: var(--gray-soft); }
.nav-links a.active { color: var(--charcoal); font-weight:600; }
.nav-links a.active::after {
  content: '';
  position: absolute;
  bottom: 5px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px;
  background: var(--yellow);
  border-radius: 50%;
}
.nav-cta {
  background: var(--yellow) !important;
  color: var(--black) !important;
  font-weight:700 !important;
  padding:9px 22px !important;
  border-radius: var(--r-pill) !important;
  transition: background .18s, transform .15s, box-shadow .18s !important;
  margin-left:6px;
  box-shadow: 0 2px 8px rgba(254,197,50,0.35) !important;
}
.nav-cta:hover {
  background: var(--yellow-dark) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(254,197,50,0.5) !important;
}
.nav-cta.active::after { display:none; }

/* ═══════════════════════════════════
   BUTTONS
═══════════════════════════════════ */
.btn-primary {
  display:inline-flex; align-items:center; gap:8px;
  background: var(--yellow); color: var(--black);
  padding:14px 30px; border-radius: var(--r);
  font-weight:700; font-size:14px; letter-spacing:0.2px;
  border:none; cursor:pointer;
  text-decoration:none; font-family:'Outfit',sans-serif;
  box-shadow: 0 2px 0 rgba(0,0,0,0.12);
  transition: background .18s, box-shadow .22s, transform .15s;
  white-space:nowrap;
}
.btn-primary:hover {
  background: var(--yellow-dark);
  box-shadow: 0 2px 0 rgba(0,0,0,0.12), 0 8px 24px rgba(254,197,50,0.45);
  transform: translateY(-2px);
}
.btn-secondary {
  display:inline-flex; align-items:center; gap:8px;
  color: var(--charcoal); font-size:14px; font-weight:600;
  text-decoration:none; padding:13px 28px;
  border-radius: var(--r);
  border: 1.5px solid var(--border-mid);
  background: var(--white);
  transition: border-color .18s, box-shadow .18s, transform .15s;
  white-space:nowrap;
}
.btn-secondary:hover {
  border-color: var(--charcoal);
  box-shadow: var(--sh-xs);
  transform: translateY(-1px);
}
/* btn-dark: intentionally removed — alias for btn-primary, use btn-primary instead */

/* ═══════════════════════════════════
   SECTION BASICS
═══════════════════════════════════ */
.section { padding:120px 64px; }
.section-inner { max-width:1200px; margin:0 auto; }

.label-tag {
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; font-weight:700;
  letter-spacing:2.5px; text-transform:uppercase;
  color: var(--gray-dark); margin-bottom:16px;
}
.label-tag::before {
  content:''; width:16px; height:2px;
  background: var(--yellow); border-radius:2px; flex-shrink:0;
}

/* ═══════════════════════════════════
   PAGE HERO (inner pages)
═══════════════════════════════════ */
.page-hero {
  background: var(--white);
  min-height: 44vh;
  padding: 130px 64px 72px;
  display:flex; align-items:flex-end;
  position:relative; overflow:hidden;
  border-bottom: 3px solid var(--yellow);
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}
.page-hero-bg { display:none; }
.page-hero::after { display:none; }
.page-hero-content {
  position:relative; z-index:1;
  max-width:1200px; margin:0 auto; width:100%;
}
.page-hero .label-tag { color: var(--gray-dark); }
.page-hero .label-tag::before { background: var(--yellow); }
.page-hero h1 {
  font-family:'Bebas Neue',sans-serif;
  font-size: clamp(44px,9vw,120px);
  line-height:0.92; letter-spacing:1px;
  color: var(--black);
}
.page-hero h1 .accent { color: var(--yellow-dark); }
.page-hero p {
  font-size:15px; color: var(--gray-logo);
  margin-top:16px; max-width:480px; line-height:1.8;
}

/* ═══════════════════════════════════
   CTA BANNER
═══════════════════════════════════ */
.cta-banner {
  background: var(--charcoal);
  padding: 96px 64px;
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--yellow);
}
.cta-inner {
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center;
  justify-content:space-between; gap:48px; flex-wrap:wrap;
}
.cta-text h2 {
  font-family:'Bebas Neue',sans-serif;
  font-size: clamp(36px,4.5vw,60px);
  color: var(--white); letter-spacing:1px;
  line-height:1; margin-bottom:10px;
}
.cta-text p { color: rgba(255,255,255,0.5); font-size:16px; }

/* ═══════════════════════════════════
   FOOTER
═══════════════════════════════════ */
footer {
  background: var(--white);
  padding: 72px 64px;
  border-top: 3px solid var(--yellow);
}
.footer-inner {
  max-width:1200px; margin:0 auto;
  display:flex; justify-content:space-between;
  align-items:flex-start; gap:56px; flex-wrap:wrap;
}
.footer-brand { max-width:300px; }
.footer-brand-logo {
  height:60px; width:auto; display:block; margin-bottom:20px;
}
.footer-brand p { font-size:14px; color: var(--gray); line-height:1.75; }
.footer-links h4 {
  font-size:11px; font-weight:700; letter-spacing:2.5px;
  text-transform:uppercase; color: var(--charcoal); margin-bottom:18px;
}
.footer-links ul { list-style:none; }
.footer-links ul li { margin-bottom:10px; }
.footer-links ul li a {
  color: var(--gray); text-decoration:none;
  font-size:14px; transition:color .18s;
}
.footer-links ul li a:hover { color: var(--yellow-dark); }
.footer-bottom {
  max-width:1200px; margin:48px auto 0;
  padding-top:24px; border-top:1px solid var(--border);
  display:flex; justify-content:space-between;
  align-items:center; flex-wrap:wrap; gap:12px;
}
.footer-bottom p { font-size:13px; color: var(--gray); }
.footer-bottom a { color: var(--gray); text-decoration:none; transition:color .18s; }
.footer-bottom a:hover { color: var(--yellow-dark); }

/* ═══════════════════════════════════
   SCROLL ANIMATION
═══════════════════════════════════ */
.fade-up {
  opacity:0; transform: translateY(24px);
  transition: opacity .65s ease, transform .65s ease;
}
.fade-up.visible { opacity:1; transform: translateY(0); }

/* ═══════════════════════════════════
   RESPONSIVE — GLOBAL
═══════════════════════════════════ */
@media (max-width:960px) {
  #navbar { height:62px; padding:0 20px; }
  .nav-links { display:none; }
  .section { padding:80px 20px; }
  .cta-banner { padding:64px 20px; }
  .cta-inner { flex-direction: column; align-items: flex-start; gap: 28px; }
  footer { padding:48px 20px 40px; }
  .footer-inner { gap: 36px; }
  .footer-brand { max-width: 100%; }
  .page-hero { padding:104px 20px 48px; min-height: auto; }
}
@media (max-width:600px) {
  .cta-text h2 { font-size: clamp(28px, 8vw, 44px); }
  .cta-inner > div { width: 100%; }
  .cta-inner > div .btn-primary,
  .cta-inner > div .btn-secondary { width: 100%; justify-content: center; }
  .page-hero h1 { font-size: clamp(38px, 12vw, 64px); }
  .page-hero p { font-size: 14px; }
  .btn-primary, .btn-secondary { font-size: 15px; padding: 13px 24px; }
  .footer-inner { flex-direction: column; gap: 28px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 6px; }
}
@media (max-width:400px) {
  .page-hero { padding: 96px 16px 40px; }
  .btn-primary, .btn-secondary { padding: 12px 20px; font-size: 14px; }
}