/* ============================================================
   HTG — CORE DESIGN SYSTEM v3
   Compact announcement bar, glassy mobile drawer, new footer
   ============================================================ */

:root {
  /* Brand Primitives */
  --htg-green: #4AAB48;
  --htg-forest: #225529;
  --htg-gold: #EF9623;
  --htg-sun: #FFD302;
  --htg-green-soft: #6BC065;
  --htg-forest-deep: #143818;

  --grad-primary: linear-gradient(135deg, #4AAB48 0%, #225529 100%);
  --grad-warm: linear-gradient(135deg, #FFD302 0%, #EF9623 100%);
  --grad-forest: linear-gradient(135deg, #225529 0%, #0e2411 100%);
  --grad-sunrise: linear-gradient(135deg, #EF9623 0%, #FFD302 50%, #4AAB48 100%);
  --grad-premium: linear-gradient(135deg, #225529 0%, #4AAB48 50%, #FFD302 100%);

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 250ms;
  --dur-med: 450ms;
  --dur-slow: 750ms;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 32px;
}

/* ============================================
   LIGHT MODE
   ============================================ */
:root[data-theme="light"] {
  --bg-canvas: #F2F9F0;
  --bg-elevated: rgba(255, 255, 255, 0.55);
  --bg-elevated-solid: #FFFFFF;
  --bg-tinted: #DDF0D8;
  --bg-deep: #C8E5C0;
  --bg-warm: #FFF4D6;
  --bg-accent: #FFE8C4;

  /* Footer — distinct dark creamy surface for contrast in light mode */
  --bg-footer: #1E2B22;
  --bg-footer-accent: #2A3B2E;
  --text-footer: #E4EFE0;
  --text-footer-muted: #95A89C;

  --text-primary: #0E2411;
  --text-secondary: #3A5240;
  --text-muted: #6B8070;

  --border-glass: rgba(34, 85, 41, 0.18);
  --border-strong: rgba(34, 85, 41, 0.32);

  --shadow-glass: 0 10px 40px rgba(34, 85, 41, 0.12), 0 2px 8px rgba(34, 85, 41, 0.08);
  --shadow-lift: 0 20px 56px rgba(34, 85, 41, 0.18), 0 4px 12px rgba(34, 85, 41, 0.1);
  --shadow-xl: 0 40px 80px rgba(34, 85, 41, 0.25);

  --glass-highlight: rgba(255, 255, 255, 0.7);
  --glass-blur: 24px;
  --glass-saturation: 180%;

  --mesh-1: rgba(74, 171, 72, 0.35);
  --mesh-2: rgba(255, 211, 2, 0.3);
  --mesh-3: rgba(239, 150, 35, 0.28);
  --noise-opacity: 0.04;
}

/* ============================================
   DARK MODE
   ============================================ */
:root[data-theme="dark"] {
  --bg-canvas: #07110B;
  --bg-elevated: rgba(22, 38, 28, 0.55);
  --bg-elevated-solid: #152319;
  --bg-tinted: #14231A;
  --bg-deep: #0B1610;
  --bg-warm: #2A1F0C;
  --bg-accent: #2D1E0A;

  /* Footer in dark mode — slightly lighter than canvas for contrast */
  --bg-footer: #0F1D15;
  --bg-footer-accent: #16271C;
  --text-footer: #E4EFE0;
  --text-footer-muted: #8FA095;

  --text-primary: #EEF7EC;
  --text-secondary: #B4C9B8;
  --text-muted: #7C8C7E;

  --border-glass: rgba(255, 210, 2, 0.18);
  --border-strong: rgba(255, 210, 2, 0.35);

  --shadow-glass: 0 16px 48px rgba(0, 0, 0, 0.6);
  --shadow-lift: 0 24px 64px rgba(0, 0, 0, 0.75);
  --shadow-xl: 0 40px 80px rgba(0, 0, 0, 0.85);

  --glass-highlight: rgba(255, 255, 255, 0.08);
  --glass-blur: 24px;
  --glass-saturation: 200%;

  --mesh-1: rgba(74, 171, 72, 0.3);
  --mesh-2: rgba(255, 210, 2, 0.2);
  --mesh-3: rgba(239, 150, 35, 0.25);
  --noise-opacity: 0.06;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  background: var(--bg-canvas);
  color: var(--text-primary);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* HTG_FIX: body transition removed (caused iOS half-toggle) */
  overflow-x: hidden;
  min-height: 100vh;
  position: relative;
  /* GPU compositing hint — reduces repaint cost on theme change & scroll */
  /* HTG_KILL: will-change removed */
}

body.drawer-open { overflow: hidden; }

body::before {
  content: '';
  position: fixed;
  inset: -20%;
  background:
    radial-gradient(circle 600px at 10% 10%, var(--mesh-1), transparent 55%),
    radial-gradient(circle 500px at 90% 20%, var(--mesh-2), transparent 55%),
    radial-gradient(circle 550px at 50% 80%, var(--mesh-3), transparent 55%);
  pointer-events: none;
  z-index: -2;
  /* HTG_KILL: infinite animation removed */ animation: none;
}
/* HTG_KILL: @keyframes meshShift removed */

body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: var(--noise-opacity);
  pointer-events: none;
  z-index: -1;
  mix-blend-mode: overlay;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--dur-fast); }

h1, h2, h3, h4, h5 { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.02em; line-height: 1.1; }

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--htg-forest);
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}
.eyebrow::before { content: ''; width: 32px; height: 2px; background: var(--grad-warm); border-radius: 2px; }
:root[data-theme="dark"] .eyebrow { color: var(--htg-sun); }

.container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .container { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .container { padding: 0 2rem; } }

section { position: relative; }
.section { padding: 3rem 0; }
@media (min-width: 768px) { .section { padding: 5rem 0; } }
@media (min-width: 1024px) { .section { padding: 7rem 0; } }

.section-head { text-align: center; max-width: 720px; margin: 0 auto 3rem; padding: 0 0.5rem; }
@media (min-width: 768px) { .section-head { margin-bottom: 4rem; } }
.section-head .eyebrow { justify-content: center; margin-bottom: 1rem; }
.section-head__title { font-size: clamp(1.625rem, 5vw, 3rem); font-weight: 400; line-height: 1.1; letter-spacing: -0.025em; margin-bottom: 1rem; }
.section-head__title em { font-style: italic; background: var(--grad-warm); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.section-head__sub { color: var(--text-secondary); font-size: 1rem; line-height: 1.7; }
@media (min-width: 768px) { .section-head__sub { font-size: 1.0625rem; } }

/* ============================================
   ANNOUNCEMENT BAR — COMPACT
   ============================================ */
.announce-bar {
  background: var(--grad-primary);
  color: #FFF;
  font-size: 0.8125rem;
  padding: 0.5rem 0;
  position: relative;
  overflow: hidden;
}
.announce-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 211, 2, 0.1), transparent);
  /* HTG_KILL: infinite animation removed */ animation: none;
}
/* HTG_KILL: @keyframes shimmer removed */

.announce-bar__inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.announce-bar__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #FFF;
  white-space: nowrap;
  font-weight: 500;
}
.announce-bar svg { width: 13px; height: 13px; opacity: 0.9; flex-shrink: 0; }
.announce-bar__separator { opacity: 0.5; }
.announce-bar__motto { font-style: italic; font-weight: 500; }

@media (max-width: 640px) {
  .announce-bar { font-size: 0.75rem; padding: 0.4rem 0; }
  .announce-bar__separator { display: none; }
  .announce-bar__motto span { display: none; }
}

/* ============================================
   NAVIGATION
   ============================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 0.75rem 0;
  background: var(--bg-elevated);
  /* HTG_KILL: backdrop-filter removed */
  /* HTG_KILL: backdrop-filter removed */
  border-bottom: 1px solid var(--border-glass);
  transition: transform var(--dur-med) var(--ease-out-expo), opacity var(--dur-med) var(--ease-out-expo), border-color var(--dur-med) var(--ease-out-expo);
}
.nav.is-scrolled { padding: 0.5rem 0; box-shadow: var(--shadow-glass); }

.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.nav__brand { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; min-width: 0; }
.nav__logo {
  display: grid;
  place-items: center;
  position: relative;
  flex-shrink: 0;
}
.nav__logo-text {
  font-family: var(--font-display);
  font-weight: 700;
  color: #FFF;
  font-size: 0.875rem;
  letter-spacing: -0.02em;
  z-index: 1;
}
.nav__brand-text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.nav__brand-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--text-primary);
  letter-spacing: -0.015em;
  white-space: nowrap;
}
.nav__brand-tag {
  font-size: 0.625rem;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 639px) {
  .nav__brand-tag { display: none; }
  .nav__brand-name { font-size: 0.875rem; }
}

.nav__menu { display: none; gap: 0.25rem; list-style: none; align-items: center; }
@media (min-width: 1024px) { .nav__menu { display: flex; } }

.nav__item { position: relative; }
.nav__link {
  padding: 0.625rem 1rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-secondary);
  border-radius: 10px;
  transition: transform var(--dur-fast) var(--ease-out-expo), opacity var(--dur-fast) var(--ease-out-expo), border-color var(--dur-fast) var(--ease-out-expo);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.nav__link:hover, .nav__link.is-active { color: var(--htg-forest); background: var(--bg-tinted); }
:root[data-theme="dark"] .nav__link:hover, :root[data-theme="dark"] .nav__link.is-active { color: var(--htg-sun); }

.nav__dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  min-width: 260px;
  background: var(--bg-elevated-solid);
  /* HTG_KILL: backdrop-filter removed */
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift);
  padding: 0.5rem;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: transform var(--dur-fast) var(--ease-out-expo), opacity var(--dur-fast) var(--ease-out-expo), border-color var(--dur-fast) var(--ease-out-expo);
  z-index: 10;
}
.nav__item--has-children:hover .nav__dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__dropdown-link { display: block; padding: 0.75rem 1rem; font-size: 0.9rem; color: var(--text-secondary); border-radius: 8px; transition: transform var(--dur-fast), opacity var(--dur-fast), border-color var(--dur-fast); }
.nav__dropdown-link:hover { background: var(--bg-tinted); color: var(--htg-sun); }
:root[data-theme="dark"] .nav__dropdown-link:hover { color: var(--htg-gold); }

.nav__actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }

.theme-toggle {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--border-glass);
  background: var(--bg-elevated);
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--text-secondary);
  transition: transform var(--dur-fast) var(--ease-out-expo), opacity var(--dur-fast) var(--ease-out-expo), border-color var(--dur-fast) var(--ease-out-expo);
  /* HTG_KILL: backdrop-filter removed */
  flex-shrink: 0;
}
.theme-toggle:hover { color: var(--htg-gold); border-color: var(--htg-gold); transform: translateY(-2px) rotate(15deg); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .sun { display: none; }
.theme-toggle .moon { display: block; }
:root[data-theme="dark"] .theme-toggle .sun { display: block; }
:root[data-theme="dark"] .theme-toggle .moon { display: none; }

/* Desktop-only CTA button — hidden entirely on mobile (user request) */
.nav__cta--desktop-only { display: none; }
@media (min-width: 1024px) {
  .nav__cta--desktop-only { display: inline-flex; }
}

.nav__mobile-toggle {
  display: grid;
  place-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border-glass);
  border-radius: 10px;
  background: var(--bg-elevated);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: transform var(--dur-fast), opacity var(--dur-fast), border-color var(--dur-fast);
}
.nav__mobile-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text-primary);
  transition: transform var(--dur-fast), opacity var(--dur-fast), border-color var(--dur-fast);
  border-radius: 2px;
}
.nav__mobile-toggle.is-open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav__mobile-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav__mobile-toggle.is-open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
@media (min-width: 1024px) { .nav__mobile-toggle { display: none; } }

/* ============================================
   MOBILE DRAWER — GLASS SLIDE-IN
   ============================================ */
.nav__drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  /* HTG_KILL: backdrop-filter removed */
  /* HTG_KILL: backdrop-filter removed */
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-med) var(--ease-out-expo), visibility 0s linear var(--dur-med);
  z-index: 200;
}
.nav__drawer-overlay.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-med) var(--ease-out-expo);
}

.nav__drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(92vw, 420px);
  background: var(--bg-elevated);
  /* HTG_KILL: backdrop-filter removed */
  /* HTG_KILL: backdrop-filter removed */
  border-left: 1px solid var(--border-glass);
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.25);
  z-index: 201;
  transform: translateX(100%);
  transition: transform 500ms var(--ease-out-expo);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
}
.nav__drawer::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 10%, var(--mesh-1), transparent 50%),
    radial-gradient(circle at 80% 90%, var(--mesh-2), transparent 50%);
  opacity: 0.4;
  pointer-events: none;
  z-index: -1;
}
.nav__drawer.is-open { transform: translateX(0); }
@media (min-width: 1024px) { .nav__drawer { display: none; } }

.nav__drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem;
  border-bottom: 1px solid var(--border-glass);
  background: var(--bg-elevated);
  /* HTG_KILL: backdrop-filter removed */
  position: sticky;
  top: 0;
  z-index: 2;
}

.nav__drawer-close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-glass);
  background: var(--bg-elevated-solid);
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--text-primary);
  transition: transform var(--dur-fast), opacity var(--dur-fast), border-color var(--dur-fast);
  flex-shrink: 0;
}
.nav__drawer-close:hover { background: var(--htg-gold); color: #FFF; border-color: var(--htg-gold); transform: rotate(90deg); }
.nav__drawer-close svg { width: 18px; height: 18px; }

.nav__drawer-nav { flex: 1; padding: 1.25rem; }

.nav__drawer-list { list-style: none; display: flex; flex-direction: column; gap: 0.125rem; }

.nav__drawer-item { }

.nav__drawer-link,
.nav__drawer-link--parent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1rem 1.125rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  border-radius: 12px;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-fast), opacity var(--dur-fast), border-color var(--dur-fast);
  text-align: left;
  font-family: var(--font-body);
}
.nav__drawer-link:hover,
.nav__drawer-link--parent:hover {
  background: var(--bg-tinted);
  border-color: var(--border-glass);
}

.nav__drawer-chevron {
  width: 16px;
  height: 16px;
  transition: transform var(--dur-med) var(--ease-out-expo);
}
.nav__drawer-item.is-open .nav__drawer-chevron { transform: rotate(180deg); }
.nav__drawer-item.is-open .nav__drawer-link--parent {
  background: var(--bg-tinted);
  color: var(--htg-forest);
}
:root[data-theme="dark"] .nav__drawer-item.is-open .nav__drawer-link--parent { color: var(--htg-sun); }

.nav__drawer-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 400ms var(--ease-out-expo);
}
.nav__drawer-item.is-open .nav__drawer-panel { max-height: 500px; }

.nav__drawer-sublist {
  list-style: none;
  padding: 0.5rem 0 0.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  border-left: 2px solid var(--border-glass);
  margin-left: 1rem;
}

.nav__drawer-sublink {
  display: block;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
  border-radius: 8px;
  font-weight: 500;
}
.nav__drawer-sublink:hover {
  background: var(--bg-tinted);
  color: var(--htg-sun);
}
:root[data-theme="dark"] .nav__drawer-sublink:hover {
  color: var(--htg-gold);
}
.nav__drawer-sublink--all {
  color: var(--htg-green);
  font-weight: 700;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
:root[data-theme="dark"] .nav__drawer-sublink--all {
  color: var(--htg-gold);
}
:root[data-theme="dark"] .nav__drawer-sublink--all { color: var(--htg-gold); }

.nav__drawer-cta {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-glass);
}

.nav__drawer-contact {
  margin-top: 1.5rem;
  padding: 1rem;
  border-radius: 14px;
  background: var(--bg-tinted);
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.nav__drawer-contact-link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.875rem;
  color: var(--text-primary);
  font-weight: 500;
}
.nav__drawer-contact-link svg { width: 16px; height: 16px; color: var(--htg-green); flex-shrink: 0; }
:root[data-theme="dark"] .nav__drawer-contact-link svg { color: var(--htg-sun); }

/* ============================================
   BUTTONS
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform var(--dur-med) var(--ease-out-expo), opacity var(--dur-med) var(--ease-out-expo), border-color var(--dur-med) var(--ease-out-expo);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  line-height: 1;
}
@media (min-width: 768px) { .btn { padding: 1rem 1.75rem; } }

.btn--primary {
  background: var(--grad-primary);
  color: #FFF;
  box-shadow: 0 10px 30px rgba(34, 85, 41, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.btn--primary::before { content: ''; position: absolute; inset: 0; background: var(--grad-warm); opacity: 0; transition: opacity var(--dur-med); }
.btn--primary:hover { transform: translateY(-3px); box-shadow: 0 20px 48px rgba(34, 85, 41, 0.5); color: #FFF; }
.btn--primary:hover::before { opacity: 0.35; }
.btn--primary > * { position: relative; z-index: 1; }

.btn--ghost {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  /* HTG_KILL: backdrop-filter removed */
}
.btn--ghost:hover { background: var(--bg-tinted); border-color: var(--htg-green); color: var(--htg-forest); transform: translateY(-2px); }
:root[data-theme="dark"] .btn--ghost:hover { color: var(--htg-sun); }

.btn--ghost-light {
  background: rgba(255, 255, 255, 0.7);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  /* HTG_KILL: backdrop-filter removed */
}
:root[data-theme="dark"] .btn--ghost-light { background: rgba(255, 255, 255, 0.1); color: #FFF; border-color: rgba(255, 255, 255, 0.3); }
.btn--ghost-light:hover { background: rgba(255, 255, 255, 0.9); border-color: var(--htg-green); color: var(--htg-forest); transform: translateY(-2px); }
:root[data-theme="dark"] .btn--ghost-light:hover { background: rgba(255, 255, 255, 0.2); color: #FFF; }

.btn--gold {
  background: var(--grad-warm);
  color: #1a1410;
  box-shadow: 0 12px 36px rgba(239, 150, 35, 0.35);
}
.btn--gold:hover { transform: translateY(-3px); box-shadow: 0 20px 48px rgba(239, 150, 35, 0.55); color: #1a1410; }

.btn svg { width: 16px; height: 16px; transition: transform var(--dur-fast); flex-shrink: 0; }
.btn:hover svg { transform: translateX(4px); }

/* ============================================
   GLASS SURFACES
   ============================================ */
.glass {
  background: var(--bg-elevated);
  /* HTG_KILL: backdrop-filter removed */
  /* HTG_KILL: backdrop-filter removed */
  border: 1px solid var(--border-glass);
  box-shadow: var(--shadow-glass), inset 0 1px 0 var(--glass-highlight);
  border-radius: var(--radius-lg);
  position: relative;
}

/* ============================================
   TRUST BAR
   ============================================ */
.trust-bar {
  padding: 2rem 0;
  background: var(--bg-elevated);
  /* HTG_KILL: backdrop-filter removed */
  border-top: 1px solid var(--border-glass);
  border-bottom: 1px solid var(--border-glass);
  position: relative;
  overflow: hidden;
}
.trust-bar::before { content: ''; position: absolute; inset: 0; background: var(--grad-warm); opacity: 0.06; pointer-events: none; }
@media (min-width: 768px) { .trust-bar { padding: 3rem 0; } }

.trust-bar__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  text-align: center;
  position: relative;
  z-index: 1;
}
@media (min-width: 640px) { .trust-bar__grid { grid-template-columns: repeat(4, 1fr); gap: 2rem; } }

.trust-item { display: flex; flex-direction: column; align-items: center; gap: 0.375rem; }
.trust-item__stat {
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 5vw, 2.75rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.025em;
  background: var(--grad-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
:root[data-theme="dark"] .trust-item__stat { background: var(--grad-warm); -webkit-background-clip: text; }
.trust-item__label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
@media (min-width: 768px) { .trust-item__label { font-size: 0.8125rem; } }

/* ============================================
   SERVICES GRID
   ============================================ */
.services-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .services-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } }
@media (min-width: 1024px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }

.service-card {
  position: relative;
  padding: 1.75rem 1.5rem;
  border-radius: 24px;
  background: var(--bg-elevated);
  /* HTG_KILL: backdrop-filter removed */
  border: 1px solid var(--border-glass);
  box-shadow: var(--shadow-glass);
  transition: transform var(--dur-med) var(--ease-out-expo), opacity var(--dur-med) var(--ease-out-expo), border-color var(--dur-med) var(--ease-out-expo);
  overflow: hidden;
  isolation: isolate;
}
@media (min-width: 768px) { .service-card { padding: 2rem; } }

.service-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(145deg, rgba(255,255,255,0.5), transparent 50%);
  pointer-events: none;
  z-index: -1;
}
:root[data-theme="dark"] .service-card::before { background: linear-gradient(145deg, rgba(255,255,255,0.08), transparent 50%); }

.service-card:hover { transform: translateY(-8px); border-color: var(--htg-green); box-shadow: var(--shadow-lift); }

.service-card__icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: var(--bg-tinted);
  display: grid; place-items: center;
  color: var(--htg-forest);
  margin-bottom: 1.25rem;
  transition: transform var(--dur-med) var(--ease-out-expo), opacity var(--dur-med) var(--ease-out-expo), border-color var(--dur-med) var(--ease-out-expo);
  position: relative;
  overflow: hidden;
}
.service-card__icon::before { content: ''; position: absolute; inset: 0; background: var(--grad-warm); opacity: 0; transition: opacity var(--dur-med); }
:root[data-theme="dark"] .service-card__icon { color: var(--htg-sun); }
.service-card:hover .service-card__icon { color: #FFF; transform: rotate(-8deg) scale(1.08); }
.service-card:hover .service-card__icon::before { opacity: 1; }
.service-card__icon svg { width: 26px; height: 26px; position: relative; z-index: 1; }

.service-card__title { font-size: 1.1875rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.625rem; line-height: 1.3; letter-spacing: -0.015em; }
@media (min-width: 768px) { .service-card__title { font-size: 1.25rem; } }

.service-card__desc { font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.65; margin-bottom: 1.5rem; }

.service-card__link { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 700; color: var(--htg-green); letter-spacing: 0.02em; }
:root[data-theme="dark"] .service-card__link { color: var(--htg-sun); }
.service-card__link svg { width: 16px; height: 16px; transition: transform var(--dur-fast); }
.service-card:hover .service-card__link svg { transform: translateX(6px); }

.service-card__num { position: absolute; top: 1.5rem; right: 1.5rem; font-family: var(--font-mono); font-size: 0.75rem; color: var(--htg-gold); letter-spacing: 0.05em; font-weight: 600; }

/* ============================================
   CTA BANNER
   ============================================ */
.cta-banner {
  position: relative;
  padding: 3rem 1.5rem;
  border-radius: var(--radius-xl);
  background: var(--grad-primary);
  color: #FFF;
  overflow: hidden;
  text-align: center;
}
@media (min-width: 768px) { .cta-banner { padding: 5rem 3rem; border-radius: var(--radius-2xl); } }

.cta-banner::before { content: ''; position: absolute; top: -30%; right: -10%; width: 500px; height: 500px; background: radial-gradient(circle, var(--htg-sun), transparent 60%); opacity: 0.4; /* HTG_KILL: filter:blur removed */ }
.cta-banner::after { content: ''; position: absolute; bottom: -40%; left: -10%; width: 400px; height: 400px; background: radial-gradient(circle, var(--htg-gold), transparent 60%); opacity: 0.35; /* HTG_KILL: filter:blur removed */ }

.cta-banner__inner { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; }

.cta-banner__motto { font-family: var(--font-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--htg-sun); margin-bottom: 1rem; display: inline-flex; align-items: center; gap: 0.75rem; font-weight: 700; }
.cta-banner__motto::before, .cta-banner__motto::after { content: ''; width: 24px; height: 1px; background: var(--htg-sun); }

.cta-banner__title { font-size: clamp(1.625rem, 4.5vw, 3rem); font-weight: 400; line-height: 1.1; margin-bottom: 1rem; letter-spacing: -0.025em; }
.cta-banner__title em { font-style: italic; color: var(--htg-sun); }

.cta-banner__sub { font-size: 1rem; opacity: 0.92; margin-bottom: 2rem; line-height: 1.65; }
@media (min-width: 768px) { .cta-banner__sub { font-size: 1.125rem; margin-bottom: 2.5rem; } }

.cta-banner__actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }
.cta-banner .btn--ghost { background: rgba(255, 255, 255, 0.15); color: #FFF; border-color: rgba(255, 255, 255, 0.3); }
.cta-banner .btn--ghost:hover { background: rgba(255, 255, 255, 0.25); border-color: #FFF; color: #FFF; }

/* ============================================
   FOOTER — DISTINCT DARK SURFACE
   ============================================ */
.footer {
  padding: 3rem 0 2rem;
  margin-top: 3rem;
  background: var(--bg-footer);
  color: var(--text-footer);
  position: relative;
  overflow: hidden;
}
.footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 10% 0%, rgba(74, 171, 72, 0.08), transparent 40%),
    radial-gradient(circle at 90% 100%, rgba(239, 150, 35, 0.08), transparent 40%);
  pointer-events: none;
}
.footer::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--grad-premium);
  opacity: 0.5;
}
@media (min-width: 768px) { .footer { padding: 5rem 0 2rem; margin-top: 4rem; } }

.footer > .container { position: relative; z-index: 1; }

.footer__grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .footer__grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 3rem; } }

.footer__brand { max-width: 400px; }

.footer__brand-logo { margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.75rem; }
.footer__brand-logo .nav__logo { width: 44px; height: 44px; }
.footer__brand-logo .nav__brand-name { color: var(--text-footer); }
.footer__brand-logo .nav__brand-tag { color: var(--text-footer-muted); }

.footer__brand-text {
  color: var(--text-footer-muted);
  font-size: 0.9375rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}
.footer__brand-text strong { color: var(--text-footer); font-weight: 600; }

.footer__social { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.footer__social-link {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: grid; place-items: center;
  color: var(--text-footer-muted);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--bg-footer-accent);
  transition: transform var(--dur-fast), opacity var(--dur-fast), border-color var(--dur-fast);
}
.footer__social-link:hover {
  background: var(--grad-primary);
  color: #FFF;
  border-color: transparent;
  transform: translateY(-3px) rotate(-5deg);
}
.footer__social-link svg { width: 18px; height: 18px; }

.footer__col h4 {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--htg-sun);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 1.25rem;
}

.footer__list { list-style: none; display: flex; flex-direction: column; gap: 0.625rem; }
.footer__list a { color: var(--text-footer-muted); font-size: 0.9375rem; }
.footer__list a:hover { color: var(--htg-sun); }

.footer__address { color: var(--text-footer-muted); line-height: 1.6; font-size: 0.9375rem; }

.footer__hours {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--text-footer-muted);
  padding: 0.5rem 0.75rem;
  background: var(--bg-footer-accent);
  border-radius: 8px;
  display: inline-block;
  margin-top: 0.25rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.footer__bottom {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.8125rem;
  color: var(--text-footer-muted);
}
.footer__bottom-motto {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--htg-sun);
  font-weight: 500;
  font-size: 0.9375rem;
}

/* ============================================
   WHATSAPP FLOAT
   ============================================ */
.whatsapp-float {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  z-index: 50;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #25D366;
  color: #FFF;
  display: grid;
  place-items: center;
  box-shadow: 0 12px 32px rgba(37, 211, 102, 0.45);
  transition: transform var(--dur-fast);
  /* HTG_KILL: infinite animation removed */ animation: none;
}
@media (min-width: 768px) { .whatsapp-float { bottom: 1.5rem; left: 1.5rem; width: 56px; height: 56px; } }
.whatsapp-float:hover { transform: scale(1.1); color: #FFF; }
/* HTG_KILL: @keyframes pulse removed */

/* ============================================
   SCROLL REVEAL
   ============================================ */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.9s var(--ease-out-expo), transform 0.9s var(--ease-out-expo); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.reveal-left { opacity: 0; transform: translateX(-40px); transition: opacity 0.9s var(--ease-out-expo), transform 0.9s var(--ease-out-expo); }
.reveal-left.is-visible { opacity: 1; transform: translateX(0); }

.reveal-right { opacity: 0; transform: translateX(40px); transition: opacity 0.9s var(--ease-out-expo), transform 0.9s var(--ease-out-expo); }
.reveal-right.is-visible { opacity: 1; transform: translateX(0); }

.reveal-scale { opacity: 0; transform: scale(0.92); transition: opacity 0.9s var(--ease-out-expo), transform 0.9s var(--ease-spring); }
.reveal-scale.is-visible { opacity: 1; transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* D1 topbar kill-switch */
.htg-topbar, .htg-top-strip, .htg-top-bar, .top-contact-bar, #htg-topbar { display: none !important; }


/* HTG smart logo, swaps light / dark based on data-theme */
.htg-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 0;
}
.htg-logo__img {
  display: block;
  height: 36px;
  width: auto;
  max-width: 100%;
}
.htg-logo__img--dark { display: none; }
:root[data-theme="dark"] .htg-logo__img--light,
:root[data-theme="dark"] .htg-logo__img--light { display: none; }
:root[data-theme="dark"] .htg-logo__img--dark,
:root[data-theme="dark"] .htg-logo__img--dark { display: block; }

/* Sidebar / header context overrides */
.ap-sidebar .htg-logo__img,
.cms-sidebar .htg-logo__img,
.em-sidebar .htg-logo__img,
.pt-sidebar .htg-logo__img {
  height: 32px;
}
.nav .htg-logo__img,
.htg-header .htg-logo__img {
  height: 38px;
}

/* ============================================================
   HTG LOGO CONTROL CENTER  —  edit values here only
   ============================================================
   Homepage size:           HOME_HEIGHT, HOME_MAX_WIDTH
   Apps portal size:        APPS_HEIGHT, APPS_MAX_WIDTH (in applications-core.css)
   Gap between logo & text: GAP_BETWEEN
   Vertical alignment:      align-items value below
   Dark/light swap:         the bottom two rules toggle it
   ============================================================ */

/* HOMEPAGE — size + position */
.nav .nav__logo-img,
.nav__brand .nav__logo-img {
  display: block !important;
  height: 500px !important;          /* HOME_HEIGHT — bump up/down to resize */
  width: auto !important;
  max-width: 500px !important;      /* HOME_MAX_WIDTH — cap on width */
  object-fit: contain !important;
}

/* Position: gap between logo and brand text, vertical centering */
.nav__brand {
  display: flex !important;
  align-items: center !important;   /* center | flex-start | flex-end */
  gap: 1rem !important;             /* GAP_BETWEEN — space between logo & text */
}

/* DARK / LIGHT SWAP — show only one logo at a time */
/* Default (light mode): show the LIGHT image, hide the DARK */
.nav__logo-img--light { display: block !important; }
.nav__logo-img--dark  { display: none  !important; }

/* When dark mode is active: show the DARK image, hide the LIGHT */
:root[data-theme="dark"] .nav__logo-img--light,
:root[data-theme="dark"] .nav__logo-img--light { display: none  !important; }
:root[data-theme="dark"] .nav__logo-img--dark,
:root[data-theme="dark"] .nav__logo-img--dark  { display: block !important; }

/* Pause heavy background animation during scroll — reduces scroll jank on mobile */
html.is-scrolling body::before {
  animation-play-state: paused;
}
/* Reduce backdrop-filter blur on mobile for performance */
@media (max-width: 768px) {
  .nav__drawer,
  .nav__drawer-header {
    /* HTG_KILL: backdrop-filter removed */
    /* HTG_KILL: backdrop-filter removed */
  }
}
/* ============================================================
   HTG_HOME_DRAWER_FIX — solid background for mobile nav drawer
   ============================================================ */
#mobileMenu,
.nav__drawer {
  background: var(--bg-elevated, #ffffff) !important;
  background-color: var(--bg-elevated, #ffffff) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  z-index: 1000 !important;
}
:root[data-theme="dark"] #mobileMenu,
:root[data-theme="dark"] .nav__drawer {
  background: #0e1f17 !important;
  background-color: #0e1f17 !important;
}
.nav__drawer-overlay,
#drawerOverlay {
  background: rgba(0, 0, 0, 0.5) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
#mobileMenu.is-open,
.nav__drawer.is-open {
  box-shadow: 0 10px 40px rgba(0,0,0,0.25);
}

/* ============================================================
   HTG_THEME_SWITCHING_STYLES — applied via JS class .htg-theme-switching
   on <html> during theme swap to prevent half-toggle on iOS Safari.
   ============================================================ */
html.htg-theme-switching,
html.htg-theme-switching *,
html.htg-theme-switching *::before,
html.htg-theme-switching *::after {
  transition: none !important;
  -webkit-transition: none !important;
  animation-duration: 0.001s !important;
  -webkit-animation-duration: 0.001s !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   Date & time fields — site-wide branding
   ──────────────────────────────────────────────────────────────────────────
   The dropdown calendar is drawn by the browser and cannot be restyled with
   CSS. Two properties do reach inside it:

     accent-color  tints the selected day and the today marker
     color-scheme  decides whether the panel is drawn light or dark

   color-scheme is the important one: without it a dark page opens a glaring
   white calendar, which is the "ugly web calendar" effect. Set globally so
   every date field on the site inherits it, and scoped so any page defining
   its own accent still wins.                                              */
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="time"] {
  accent-color: #EF9623;
  color-scheme: light;
  cursor: pointer;
}

:root[data-theme="dark"] input[type="date"],
:root[data-theme="dark"] input[type="datetime-local"],
:root[data-theme="dark"] input[type="month"],
:root[data-theme="dark"] input[type="week"],
:root[data-theme="dark"] input[type="time"] {
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) input[type="date"],
  :root:not([data-theme="light"]) input[type="datetime-local"],
  :root:not([data-theme="light"]) input[type="month"],
  :root:not([data-theme="light"]) input[type="week"],
  :root:not([data-theme="light"]) input[type="time"] {
    color-scheme: dark;
  }
}

/* The default trigger is a small grey glyph with a cramped hit area. Give it
   a comfortable target; pages that supply their own icon override this. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  padding: 4px;
  border-radius: 5px;
  transition: background-color .15s;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover {
  background-color: rgba(239, 150, 35, .16);
}