/* 
   The Golden Blade - Stylesheet
   Theme: Modern Heritage Elite
   Fully polished — all utility classes supported
*/

:root {
  /* Colors */
  --surface: #131313;
  --surface-dim: #131313;
  --surface-bright: #393939;
  --surface-lowest: #0e0e0e;
  --surface-low: #1b1c1c;
  --surface-container: #1f2020;
  
  --on-surface: #e4e2e1;
  --on-surface-variant: #d0c5af;
  --on-background: #e4e2e1;
  
  --primary: #f2ca50;
  --on-primary: #3c2f00;
  --primary-container: #d4af37;
  
  --outline: #99907c;
  --outline-variant: #4d4635;
  --background: #131313;
  
  /* Typography */
  --font-display: 'Noto Serif', serif;
  --font-body: 'Inter', sans-serif;
  
  /* Spacing */
  --spacing-unit: 8px;
  --container-max: 1200px;
  --gutter: 24px;
  --section-padding: 120px;
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--background);
  color: var(--on-background);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

::selection {
  background-color: var(--primary-container);
  color: var(--on-primary);
}

a {
  text-decoration: none;
  color: inherit;
  transition: color 0.3s ease;
}

img {
  max-width: 100%;
  display: block;
}

button {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
}

/* ==========================================================================
   UTILITY CLASSES — Typography
   ========================================================================== */
.font-display { font-family: var(--font-display); }
.font-body { font-family: var(--font-body); }
.font-label { font-family: var(--font-body); font-weight: 600; font-size: 12px; }

.text-display { font-size: clamp(40px, 6vw, 64px); line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; }
.text-headline { font-size: clamp(28px, 4vw, 40px); line-height: 1.2; font-weight: 600; }
.text-primary { color: var(--primary); }
.text-on-surface { color: var(--on-surface); }
.text-on-surface-variant { color: var(--on-surface-variant); }
.text-on-background { color: var(--on-background); }
.text-outline { color: var(--outline); }

.uppercase { text-transform: uppercase; }
.tracking-widest { letter-spacing: 0.1em; }
.tracking-tight { letter-spacing: -0.02em; }
.italic { font-style: italic; }
.text-center { text-align: center; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }

.text-xs { font-size: 12px; }
.text-sm { font-size: 14px; }
.text-lg { font-size: 18px; }
.text-xl { font-size: 20px; }
.text-2xl { font-size: 24px; }
.text-3xl { font-size: 30px; }
.text-4xl { font-size: 36px; }
.text-5xl { font-size: 48px; }
.text-\[10px\] { font-size: 10px; }

/* ==========================================================================
   UTILITY CLASSES — Backgrounds
   ========================================================================== */
.bg-background { background-color: var(--background); }
.bg-surface { background-color: var(--surface); }
.bg-surface-lowest { background-color: var(--surface-lowest); }
.bg-surface-low { background-color: var(--surface-low); }
.bg-primary { background-color: var(--primary); }
.bg-\[\#25D366\] { background-color: #25D366; }

.bg-background\/20 { background-color: rgba(19, 19, 19, 0.2); }
.bg-background\/40 { background-color: rgba(19, 19, 19, 0.4); }
.bg-background\/60 { background-color: rgba(19, 19, 19, 0.6); }
.bg-background\/80 { background-color: rgba(19, 19, 19, 0.8); }
.bg-primary\/20 { background-color: rgba(242, 202, 80, 0.2); }
.bg-primary\/40 { background-color: rgba(242, 202, 80, 0.4); }

/* ==========================================================================
   UTILITY CLASSES — Borders
   ========================================================================== */
.border { border-width: 1px; border-style: solid; }
.border-t { border-top-width: 1px; border-top-style: solid; }
.border-b { border-bottom-width: 1px; border-bottom-style: solid; }
.border-l { border-left-width: 1px; border-left-style: solid; }
.border-r { border-right-width: 1px; border-right-style: solid; }
.border-y { border-top-width: 1px; border-top-style: solid; border-bottom-width: 1px; border-bottom-style: solid; }
.border-t-2 { border-top-width: 2px; }
.border-r-2 { border-right-width: 2px; }
.border-b-2 { border-bottom-width: 2px; }
.border-l-2 { border-left-width: 2px; }

.border-outline-variant { border-color: var(--outline-variant); }
.border-primary { border-color: var(--primary); }
.border-outline-variant\/30 { border-color: rgba(77, 70, 53, 0.3); }
.border-white-10 { border-color: rgba(255, 255, 255, 0.1); }

/* ==========================================================================
   UTILITY CLASSES — Display & Flex
   ========================================================================== */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }

.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }

.gap-2 { gap: 8px; }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px; }
.gap-8 { gap: 32px; }
.gap-10 { gap: 40px; }
.gap-12 { gap: 48px; }

.space-y-2 > * + * { margin-top: 8px; }
.space-y-6 > * + * { margin-top: 24px; }

/* ==========================================================================
   UTILITY CLASSES — Position & Z-index
   ========================================================================== */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.top-0 { top: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }
.top-1\/2 { top: 50%; }
.left-1\/2 { left: 50%; }
.bottom-12 { bottom: 48px; }
.bottom-20 { bottom: 80px; }
.top-4 { top: 16px; }
.right-4 { right: 16px; }
.right-6 { right: 24px; }
.bottom-4 { bottom: 16px; }
.left-4 { left: 16px; }

.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-50 { z-index: 50; }
.z-\[60\] { z-index: 60; }
.z-\[100\] { z-index: 100; }

/* ==========================================================================
   UTILITY CLASSES — Width, Height, Min/Max
   ========================================================================== */
.w-full { width: 100%; }
.w-14 { width: 56px; }
.w-16 { width: 64px; }
.w-20 { width: 80px; }
.w-12 { width: 48px; }
.h-full { height: 100%; }
.h-screen { height: 100vh; }
.h-14 { height: 56px; }
.h-16 { height: 64px; }
.h-20 { height: 80px; }
.h-12 { height: 48px; }
.h-0 { height: 0; }

.min-h-\[700px\] { min-height: 700px; }
.min-h-\[500px\] { min-height: 500px; }

.max-w-2xl { max-width: 672px; }
.max-w-md { max-width: 448px; }
.max-w-xs { max-width: 320px; }
.max-w-3xl { max-width: 768px; }

/* ==========================================================================
   UTILITY CLASSES — Margin
   ========================================================================== */
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-4 { margin-top: 16px; }
.mt-8 { margin-top: 32px; }
.mt-10 { margin-top: 40px; }
.mt-16 { margin-top: 64px; }
.mt-auto { margin-top: auto; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.mb-8 { margin-bottom: 32px; }
.mb-12 { margin-bottom: 48px; }
.mb-16 { margin-bottom: 64px; }
.ml-auto { margin-left: auto; }

/* ==========================================================================
   UTILITY CLASSES — Padding
   ========================================================================== */
.p-2 { padding: 8px; }
.p-4 { padding: 16px; }
.p-6 { padding: 24px; }
.p-8 { padding: 32px; }
.p-10 { padding: 40px; }
.px-gutter { padding-left: var(--gutter); padding-right: var(--gutter); }
.py-3 { padding-top: 12px; padding-bottom: 12px; }
.py-4 { padding-top: 16px; padding-bottom: 16px; }
.py-6 { padding-top: 24px; padding-bottom: 24px; }
.py-12 { padding-top: 48px; padding-bottom: 48px; }
.py-section { padding-top: var(--section-padding); padding-bottom: var(--section-padding); }
.pt-section { padding-top: var(--section-padding); }
.pt-4 { padding-top: 16px; }
.pt-8 { padding-top: 32px; }
.pb-2 { padding-bottom: 8px; }
.pb-6 { padding-bottom: 24px; }
.pl-4 { padding-left: 16px; }
.pb-safe { padding-bottom: env(safe-area-inset-bottom, 16px); }

/* ==========================================================================
   UTILITY CLASSES — Overflow & Object
   ========================================================================== */
.overflow-hidden { overflow: hidden; }
.object-cover { object-fit: cover; }

/* ==========================================================================
   UTILITY CLASSES — Transforms
   ========================================================================== */
.transform { transform: translateZ(0); } /* force GPU rendering */
.-translate-x-1\/2 { transform: translateX(-50%); }
.-translate-y-1\/2 { transform: translateY(-50%); }
.scale-95 { transform: scale(0.95); }
.hover\:scale-110:hover { transform: scale(1.1); }

/* ==========================================================================
   UTILITY CLASSES — Opacity & Filters
   ========================================================================== */
.opacity-0 { opacity: 0; }
.opacity-30 { opacity: 0.3; }
.opacity-40 { opacity: 0.4; }
.opacity-50 { opacity: 0.5; }
.opacity-100 { opacity: 1; }
.grayscale { filter: grayscale(100%); }
.brightness-50 { filter: brightness(0.5); }
.contrast-125 { filter: contrast(1.25); }
.mix-blend-screen { mix-blend-mode: screen; }
.backdrop-blur-sm { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* ==========================================================================
   UTILITY CLASSES — Border Radius & Shadows
   ========================================================================== */
.rounded-full { border-radius: 9999px; }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); }
.shadow-\[0_0_20px_rgba\(37\2c 211\2c 102\2c 0\.3\)\] { box-shadow: 0 0 20px rgba(37, 211, 102, 0.3); }

/* ==========================================================================
   UTILITY CLASSES — Transitions & Animations
   ========================================================================== */
.transition-all { transition: all 0.3s ease; }
.transition-colors { transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; }
.transition-opacity { transition: opacity 0.3s ease; }
.transition-transform { transition: transform 0.3s ease; }
.duration-300 { transition-duration: 300ms; }
.duration-500 { transition-duration: 500ms; }
.duration-700 { transition-duration: 700ms; }

.animate-bounce { animation: bounce-subtle 2s infinite; }
.animate-pulse { animation: pulse-subtle 3s infinite; }

@keyframes bounce-subtle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}
@keyframes pulse-subtle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.06); }
}

/* ==========================================================================
   UTILITY CLASSES — Container
   ========================================================================== */
.container {
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   COMPONENTS — Glass
   ========================================================================== */
.glass {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.glass-header {
  background: rgba(19, 19, 19, 0.82);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

/* ==========================================================================
   COMPONENTS — Material Symbols
   ========================================================================== */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  font-size: inherit;
  line-height: 1;
  vertical-align: middle;
}
.icon-fill {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ==========================================================================
   COMPONENTS — Buttons
   ========================================================================== */
.btn-primary,
.btn-primary-large {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--surface);
  border: 1px solid var(--primary);
  color: var(--primary);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1.2);
  border-radius: 0;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.btn-primary { padding: 10px 24px; }
.btn-primary-large { padding: 16px 32px; }

.btn-primary::after,
.btn-primary-large::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  z-index: 0;
}
.btn-primary:hover::after,
.btn-primary-large:hover::after {
  transform: scaleX(1);
}
.btn-primary:hover,
.btn-primary-large:hover {
  color: var(--on-primary);
  border-color: var(--primary);
}
.btn-primary > *,
.btn-primary-large > * {
  position: relative;
  z-index: 1;
}
/* For text content directly inside button */
.btn-primary,
.btn-primary-large {
  position: relative;
  z-index: 1;
}
.btn-primary:hover,
.btn-primary-large:hover {
  color: var(--on-primary);
}

.btn-outline-large {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: 1px solid var(--outline);
  color: var(--on-surface);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 16px 32px;
  transition: all 0.35s ease;
  border-radius: 0;
  cursor: pointer;
}
.btn-outline-large:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(242, 202, 80, 0.05);
}

/* ==========================================================================
   COMPONENTS — Navigation
   ========================================================================== */
.nav-link {
  color: var(--on-surface-variant);
  font-weight: 500;
  font-size: 15px;
  transition: color 0.3s ease;
  padding-bottom: 6px;
  border-bottom: 2px solid transparent;
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--primary);
  transition: width 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.nav-link:hover { color: var(--primary); }
.nav-link:hover::after { width: 100%; }
.nav-link.active {
  color: var(--primary);
  font-weight: 600;
  border-bottom-color: var(--primary);
}
.nav-link.active::after { width: 100%; }

/* ==========================================================================
   COMPONENTS — Mobile Bottom Nav
   ========================================================================== */
.mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--on-surface-variant);
  font-size: 10px;
  font-weight: 500;
  transition: color 0.3s ease;
  padding: 4px 12px;
}
.mobile-nav-item.active { color: var(--primary); }

/* ==========================================================================
   COMPONENTS — Header
   ========================================================================== */
.header {
  transition: background 0.4s ease, box-shadow 0.4s ease;
}
.header.scrolled {
  background: rgba(19, 19, 19, 0.96);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.6);
}
.brand-logo {
  transition: color 0.3s ease, text-shadow 0.3s ease;
}
.brand-logo:hover {
  text-shadow: 0 0 30px rgba(242, 202, 80, 0.3);
}

/* ==========================================================================
   COMPONENTS — Hero
   ========================================================================== */
.hero {
  min-height: 700px;
}
.hero-bg img {
  transition: transform 8s ease-out;
}
.hero:hover .hero-bg img {
  transform: scale(1.05);
}
.overlay-gradient {
  background: 
    linear-gradient(to top, var(--background) 0%, transparent 55%),
    linear-gradient(to right, var(--background) 5%, transparent 40%),
    linear-gradient(to bottom, var(--background) 0%, transparent 30%);
}
.scroll-indicator {
  transition: opacity 0.5s ease;
}
.scroll-indicator:hover { opacity: 0.8; }

/* ==========================================================================
   COMPONENTS — Divider
   ========================================================================== */
.divider {
  width: 48px;
  height: 2px;
}

/* ==========================================================================
   COMPONENTS — Cards (Glass)
   ========================================================================== */
.card-glass {
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 0;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: flex;
  flex-direction: column;
}
.card-glass:hover {
  background: rgba(255, 255, 255, 0.04);
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  border-color: var(--primary);
}

/* ==========================================================================
   COMPONENTS — Service Cards
   ========================================================================== */
.service-card {
  border-radius: 0;
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: default;
}
.service-card:hover {
  border-color: rgba(242, 202, 80, 0.5);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
}
.service-desc {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
              opacity 0.5s ease,
              margin-bottom 0.5s ease;
  margin-bottom: 0;
}
.service-card:hover .service-desc {
  max-height: 200px;
  opacity: 1;
  margin-bottom: 24px;
}
.service-content {
  transform: translateY(20px);
  transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.service-card:hover .service-content {
  transform: translateY(0);
}
.service-card img {
  transition: transform 1.2s ease, opacity 0.7s ease;
}
.service-card:hover img {
  transform: scale(1.08);
}

/* ==========================================================================
   COMPONENTS — Gallery
   ========================================================================== */
.grid-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 250px;
  gap: 16px;
}
.gallery-item {
  position: relative;
  overflow: hidden;
}
.gallery-item.large {
  grid-column: span 2;
  grid-row: span 2;
}
.gallery-item.tall {
  grid-row: span 2;
}
.gallery-item img {
  transition: transform 1s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.gallery-item:hover img {
  transform: scale(1.08);
}
.gallery-overlay {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ==========================================================================
   COMPONENTS — Forms
   ========================================================================== */
.input-form {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--outline-variant);
  color: var(--on-surface);
  font-family: var(--font-display);
  font-size: 16px;
  padding: 12px 0;
  outline: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  border-radius: 0;
}
.input-form::placeholder {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--on-surface-variant);
  opacity: 0.5;
}
.input-form:focus {
  border-bottom-color: var(--primary);
  box-shadow: 0 1px 0 0 var(--primary);
}

/* Select specific */
select.input-form {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23d0c5af' viewBox='0 0 16 16'%3E%3Cpath d='M8 10L4 6h8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 16px;
  padding-right: 32px;
  cursor: pointer;
}
select.input-form option {
  background: var(--surface);
  color: var(--on-surface);
}

/* Checkbox */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1px solid var(--outline-variant);
  background: var(--surface);
  display: inline-block;
  position: relative;
  cursor: pointer;
  border-radius: 0;
  flex-shrink: 0;
  transition: all 0.3s ease;
}
input[type="checkbox"]:checked {
  background: var(--primary);
  border-color: var(--primary);
}
input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid var(--on-primary);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
input[type="checkbox"]:hover {
  border-color: var(--primary);
}

/* ==========================================================================
   COMPONENTS — Accordion
   ========================================================================== */
.accordion-item {
  transition: background 0.3s ease;
}
.accordion-item:hover {
  background: rgba(255, 255, 255, 0.01);
}
.accordion-header {
  outline: none;
  cursor: pointer;
  transition: color 0.3s ease, padding-left 0.3s ease;
  padding-left: 0;
}
.accordion-header:hover {
  padding-left: 8px;
}
.accordion-item.active .accordion-header {
  color: var(--primary);
  padding-left: 8px;
}
.accordion-content {
  transition: height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.icon-toggle {
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  flex-shrink: 0;
}
.accordion-item.active .icon-toggle {
  transform: rotate(45deg);
}

/* ==========================================================================
   COMPONENTS — Popup
   ========================================================================== */
.popup-overlay {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.popup-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
.popup-content {
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
              opacity 0.4s ease;
}
.popup-overlay.active .popup-content {
  transform: scale(1);
  opacity: 1;
}

/* ==========================================================================
   COMPONENTS — WhatsApp Float
   ========================================================================== */
.whatsapp-float {
  transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1.3);
}
.whatsapp-float:hover {
  transform: scale(1.12);
  box-shadow: 0 0 30px rgba(37, 211, 102, 0.45);
}

/* ==========================================================================
   COMPONENTS — Diagonal Sections
   ========================================================================== */
.section-diagonal {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.5vw), 0 100%);
  padding-bottom: calc(var(--section-padding) + 2.5vw);
}
.section-diagonal-reverse {
  clip-path: polygon(0 2.5vw, 100% 0, 100% 100%, 0 100%);
  margin-top: -2.5vw;
  padding-top: calc(var(--section-padding) + 2.5vw);
}

/* ==========================================================================
   COMPONENTS — Trust Bar
   ========================================================================== */
.trust-bar {
  position: relative;
}
.trust-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 1px;
  background: var(--primary);
  opacity: 0.5;
}

/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */
.reveal-hidden {
  opacity: 0;
  transform: translateY(30px);
}
.reveal-visible {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   RESPONSIVE — Tablet (768px+)
   ========================================================================== */
@media (min-width: 768px) {
  .md\:flex { display: flex; }
  .md\:hidden { display: none; }
  .md\:inline-flex { display: inline-flex; }
  .md\:flex-row { flex-direction: row; }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:-translate-y-4 { transform: translateY(-16px); }
  .md\:-translate-y-8 { transform: translateY(-32px); }
  .md\:bottom-8 { bottom: 32px; }
  .md\:w-1\/3 { width: 33.333333%; }
  .md\:text-left { text-align: left; }
  .md\:text-right { text-align: right; }
  .md\:text-xl { font-size: 20px; }
  .md\:p-12 { padding: 3rem; }
  
  .grid-gallery {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ==========================================================================
   RESPONSIVE — Desktop (1024px+)
   ========================================================================== */
@media (min-width: 1024px) {
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:min-h-full { min-height: 100%; }
}

/* ==========================================================================
   RESPONSIVE — Small screens
   ========================================================================== */
@media (max-width: 767px) {
  :root {
    --section-padding: 80px;
  }
  .section-diagonal {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2vw), 0 100%);
    padding-bottom: calc(var(--section-padding) + 2vw);
  }
  .section-diagonal-reverse {
    clip-path: polygon(0 2vw, 100% 0, 100% 100%, 0 100%);
    margin-top: -2vw;
    padding-top: calc(var(--section-padding) + 2vw);
  }
  .gallery-item.large {
    grid-column: span 2;
    grid-row: span 1;
  }
  .gallery-item.tall {
    grid-row: span 1;
  }
}

/* ==========================================================================
   HOVER UTILITIES (for group hover effects)
   ========================================================================== */
.group:hover .group-hover\:opacity-30 { opacity: 0.3; }
.group:hover .group-hover\:opacity-100 { opacity: 1; }
.group:hover .group-hover\:scale-105 { transform: scale(1.05); }
.group:hover .group-hover\:bg-transparent { background-color: transparent; }
.group:hover .group-hover\:bg-background\/10 { background-color: rgba(19, 19, 19, 0.1); }

.hover\:bg-\[\#1ebe5d\]:hover { background-color: #1ebe5d; }
.hover\:border-primary:hover { border-color: var(--primary); }
.hover\:text-primary:hover { color: var(--primary); }