:root {
  --vip-primary: #047857; /* Emerald 700 */
  --vip-secondary: #059669; /* Emerald 600 */
  --vip-dark: #064e3b; /* Emerald 900 */
  --vip-light: #ecfdf5; /* Emerald 50 */
  --vip-accent: #10b981; /* Emerald 500 */
  
  --glass-border: rgba(255, 255, 255, 0.8);
  --glass-bg: rgba(255, 255, 255, 0.95);
  --soft-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.08);
  --brand-glow: 0 0 20px rgba(4, 120, 87, 0.15);
}

html {
  scroll-behavior: smooth;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

body {
  background-color: #f8fafc;
  color: #1e293b;
}

::selection {
  background: var(--vip-primary);
  color: white;
}

/* SCROLLBAR - CLEAN & PROFESSIONAL */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: var(--vip-secondary);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--vip-dark);
}

/* HERO VIDEO OVERLAY */
.hero-video-wrapper {
  position: relative;
  overflow: hidden;
}
.hero-video-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.4) 100%);
  z-index: 1;
}

/* GLASSMORPHISM - CLEAN CORPORATE */
.glass-nav {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.logistics-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.logistics-card:hover {
  border-color: var(--vip-accent);
  box-shadow: 0 20px 25px -5px rgba(4, 120, 87, 0.1);
  transform: translateY(-4px);
}

/* BUTTONS - HIGH CONTRAST CTA */
.btn-cta {
  background: var(--vip-primary);
  color: white;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 14px 0 rgba(4, 120, 87, 0.39);
}
.btn-cta:hover {
  background: var(--vip-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(4, 120, 87, 0.23);
}

/* STRUCTURED GRID ELEMENTS */
.grid-pattern {
  background-image: 
    linear-gradient(to right, #f1f5f9 1px, transparent 1px),
    linear-gradient(to bottom, #f1f5f9 1px, transparent 1px);
  background-size: 40px 40px;
}

/* TIMELINE SECTION */
.timeline-step {
  position: relative;
}
.timeline-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 2rem;
  left: 50%;
  width: 100%;
  height: 2px;
  background: dashed 2px #cbd5e1;
  z-index: -1;
  transform: translateX(1rem);
}
@media (max-width: 768px) {
  .timeline-step:not(:last-child)::after {
    display: none;
  }
}

/* ACCORDION (SSS) */
details > summary {
  list-style: none;
}
details > summary::-webkit-details-marker {
  display: none;
}
details[open] summary ~ * {
  animation: slideDown 0.3s ease-in-out;
}

@keyframes slideDown {
  0% { opacity: 0; transform: translateY(-10px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* UTILITIES */
.text-brand { color: var(--vip-primary); }
.bg-brand { background-color: var(--vip-primary); }
.border-brand { border-color: var(--vip-primary); }

.animate-pulse-slow {
  animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* SIDEBAR LIST STYLES */
.sidebar-link {
  transition: all 0.2s ease;
  border-left: 3px solid transparent;
}
.sidebar-link:hover, .sidebar-link.active {
  border-left-color: var(--vip-primary);
  background-color: var(--vip-light);
  color: var(--vip-dark);
}