@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

/* Tailwind v4 CSS is not yet fully supported via simple CDN in the same way as v3, 
   so I'll use standard CSS for the custom theme variables and classes 
   while relying on the Tailwind v3 Play CDN for utilities. */

:root {
  --agri-green-50: #f4faf2;
  --agri-green-100: #e5f5df;
  --agri-green-500: #56af43; /* Brand Primary Green */
  --agri-green-600: #489338;
  --agri-green-700: #3a762d;
  --agri-green-800: #2c5922;
  --agri-green-900: #1e3d17;
  --agri-dark: #121812; /* Deep Forest Black-Green */
  --agri-navy-light: #2d3b2d; /* Forest Slate */
  --agri-earth: #78350f;
  --agri-gold: #f59e0b;
  --agri-bronze: #92400e;
}

html, body {
  font-family: 'Inter', sans-serif;
  color: #1e293b; /* slate-800 */
  background-color: white;
  overflow-x: hidden;
  width: 100%;
}

:is(h1, h2, h3, h4, h5, h6):not(.font-display):not(.text-white):not([class*="text-white"]) {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  letter-spacing: -0.025em; /* tracking-tight */
  color: var(--agri-dark);
}

#contact h2[data-tr="contact_title"],
#contact h2[data-tr="contact_title"] span {
  color: white !important;
}

.glass-card {
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.text-gradient {
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  background-image: linear-gradient(to right, var(--agri-green-500), var(--agri-green-800));
}

.agri-pattern {
  background-image: radial-gradient(var(--agri-dark) 0.5px, transparent 0.5px);
  background-size: 24px 24px;
  opacity: 0.05;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9; /* slate-100 */
}

::-webkit-scrollbar-thumb {
  background: var(--agri-green-600);
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--agri-green-700);
}

/* Scroll reveal animations */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.reveal-left.active {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(50px);
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.reveal-right.active {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.reveal-scale.active {
  opacity: 1;
  transform: scale(1);
}

/* Modal styles */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(18, 24, 18, 0.8);
  backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.modal-overlay.active {
  display: flex;
}

.modal-content {
  background: white;
  width: 100%;
  max-width: 42rem; /* 2xl */
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  position: relative;
  transform: scale(0.9);
  opacity: 0;
  transition: all 0.3s ease;
}

.modal-overlay.active .modal-content {
  transform: scale(1);
  opacity: 1;
}

/* ---- Navbar: hidden on load, slides in on scroll ---- */
#main-nav {
  transition: transform 0.55s cubic-bezier(0.23, 1, 0.32, 1),
              opacity 0.55s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Initial hidden state */
#main-nav.nav-hidden {
  transform: translateY(-110%);
  opacity: 0;
  pointer-events: none;
}

/* Visible state (added by JS on scroll) */
#main-nav.nav-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* Navigation scroll styles */
.nav-scrolled {
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 20px 50px rgba(0,0,0,0.1);
  border-radius: 1.5rem;
  padding: 0.75rem 1.5rem !important;
}

.nav-scrolled .nav-text {
  color: #475569; /* slate-600 */
}

.nav-scrolled .logo-text {
  color: var(--agri-dark);
}

/* Mobile menu */
#mobile-menu {
  display: none;
  opacity: 0;
  transform: translateY(-10px) scale(0.95);
  transition: all 0.3s ease;
}

#mobile-menu.active {
  display: flex;
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Chatbot Styles */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

#chatbot-container.active {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}

/* Message animations */
@keyframes message-slide-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.chat-message {
  animation: message-slide-up 0.3s ease forwards;
}

/* Typing indicator */
.typing-dot {
  width: 6px;
  height: 6px;
  background-color: #94a3b8; /* slate-400 */
  border-radius: 50%;
  display: inline-block;
  animation: typing 1.4s infinite ease-in-out both;
}

.typing-dot:nth-child(1) { animation-delay: -0.32s; }
.typing-dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes typing {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

/* ===== VIDEO HERO SECTION ===== */

.video-hero {
  height: 70dvh;
  min-height: 480px;
}

@media (min-width: 1024px) {
  .video-hero {
    height: 100dvh;
    min-height: 600px;
  }
}

/* Dark strip at top so navbar text is readable when it appears */
.hero-vid-top-fade {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.65) 0%,
    rgba(0, 0, 0, 0.30) 18%,
    transparent 40%
  );
}

/* Strong gradient at bottom — pushes dark base behind text content */
.hero-vid-bottom-fade {
  background: linear-gradient(
    to top,
    rgba(4, 10, 4, 0.97) 0%,
    rgba(5, 14, 5, 0.90) 18%,
    rgba(8, 18, 8, 0.70) 35%,
    rgba(10, 22, 10, 0.40) 55%,
    transparent 75%
  );
}

/* Dot-grid texture overlay */
.hero-grid {
  background-image: radial-gradient(circle, rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 30px 30px;
}

/* Green gradient text for headline accent */
.hero-green-gradient {
  background: linear-gradient(90deg, #6ed655 0%, #a3e05a 55%, #56af43 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Pulsing badge dot */
.hero-pulse {
  animation: hero-dot-pulse 2s ease-in-out infinite;
}
@keyframes hero-dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.35; transform: scale(0.65); }
}

/* ---- Entrance Animations ---- */
.hero-badge {
  opacity: 0;
  transform: translateY(18px);
  animation: hero-fade-up 0.7s cubic-bezier(0.23, 1, 0.32, 1) 0.2s forwards;
}
.hero-line-1 {
  opacity: 0;
  transform: translateY(32px);
  animation: hero-fade-up 0.85s cubic-bezier(0.23, 1, 0.32, 1) 0.4s forwards;
}
.hero-line-2 {
  opacity: 0;
  transform: translateY(32px);
  animation: hero-fade-up 0.85s cubic-bezier(0.23, 1, 0.32, 1) 0.55s forwards;
}
.hero-line-3 {
  opacity: 0;
  transform: translateY(32px);
  animation: hero-fade-up 0.85s cubic-bezier(0.23, 1, 0.32, 1) 0.70s forwards;
}
.hero-rule {
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  animation: hero-rule-in 0.6s ease 0.80s forwards;
}
@keyframes hero-rule-in {
  to { opacity: 1; transform: scaleX(1); }
}
.hero-sub {
  opacity: 0;
  transform: translateY(20px);
  animation: hero-fade-up 0.7s cubic-bezier(0.23, 1, 0.32, 1) 0.90s forwards;
}
.hero-ctas {
  opacity: 0;
  transform: translateY(20px);
  animation: hero-fade-up 0.7s cubic-bezier(0.23, 1, 0.32, 1) 1.05s forwards;
}
.hero-stats {
  opacity: 0;
  transform: translateY(20px);
  animation: hero-fade-up 0.7s cubic-bezier(0.23, 1, 0.32, 1) 1.20s forwards;
}
.hero-scroll {
  opacity: 0;
  animation: hero-fade-up 0.6s ease 1.60s forwards;
}
@keyframes hero-fade-up {
  to { opacity: 1; transform: translateY(0); }
}

/* Stat hover lift */
.hero-stat {
  transition: transform 0.2s ease;
  cursor: default;
}
.hero-stat:hover { transform: translateY(-3px); }

/* ---- Scroll Mouse Indicator ---- */
.hero-scroll-dot {
  animation: scroll-bounce 2s ease-in-out infinite;
}
@keyframes scroll-bounce {
  0%        { transform: translateY(0);    opacity: 1; }
  60%       { transform: translateY(14px); opacity: 0; }
  61%       { transform: translateY(0);    opacity: 0; }
  80%, 100% { opacity: 1; }
}

/* ---- Mute button ---- */
#hero-mute-btn {
  transition: background 0.2s, transform 0.15s;
}
#hero-mute-btn:active { transform: scale(0.92); }

/* Warm golden top vignette (subtle sunrise feel like reference) */
.hero-top-vignette {
  background: linear-gradient(
    to bottom,
    rgba(180, 130, 30, 0.18) 0%,
    transparent 28%
  );
}

/* Small styling for C.M.B text and trademark */
.agri-k-title {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.05em;
}
.cmb {
  display: block;
  font-size: 0.55em;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transform: translateX(1.6em);
  line-height: 1;
}
.tm {
  font-size: 0.55em;
  vertical-align: super;
  margin-left: 0.12rem;
  opacity: 0.85;
}

/* Background zoom-in on load */
.hero-bg-zoom {
  animation: hero-bg-scale 12s ease-out forwards;
}
@keyframes hero-bg-scale {
  from { transform: scale(1.08); }
  to   { transform: scale(1.00); }
}

/* Dot-grid texture overlay */
.hero-grid {
  background-image: radial-gradient(circle, rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 30px 30px;
}

/* Glowing ambient orbs */
.hero-orb {
  border-radius: 50%;
  filter: blur(90px);
  animation: orb-float 8s ease-in-out infinite alternate;
}
.hero-orb-1 {
  background: radial-gradient(circle, rgba(86,175,67,0.16) 0%, transparent 70%);
}
.hero-orb-2 {
  background: radial-gradient(circle, rgba(245,158,11,0.11) 0%, transparent 70%);
  animation-delay: -4s;
  animation-duration: 10s;
}
@keyframes orb-float {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-25px, -35px) scale(1.08); }
}

/* Green gradient text for the headline accent line */
.hero-green-gradient {
  background: linear-gradient(90deg, #6ed655 0%, #a8e063 60%, #56af43 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Pulsing dot */
.hero-pulse {
  animation: hero-dot-pulse 2s ease-in-out infinite;
}
@keyframes hero-dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.35; transform: scale(0.65); }
}

/* ---- Entrance Animations ---- */
.hero-badge {
  opacity: 0;
  transform: translateY(18px);
  animation: hero-fade-up 0.7s cubic-bezier(0.23, 1, 0.32, 1) 0.15s forwards;
}
.hero-line-1 {
  opacity: 0;
  transform: translateY(32px);
  animation: hero-fade-up 0.85s cubic-bezier(0.23, 1, 0.32, 1) 0.35s forwards;
}
.hero-line-2 {
  opacity: 0;
  transform: translateY(32px);
  animation: hero-fade-up 0.85s cubic-bezier(0.23, 1, 0.32, 1) 0.50s forwards;
}
.hero-line-3 {
  opacity: 0;
  transform: translateY(32px);
  animation: hero-fade-up 0.85s cubic-bezier(0.23, 1, 0.32, 1) 0.65s forwards;
}
.hero-sub {
  opacity: 0;
  transform: translateY(20px);
  animation: hero-fade-up 0.7s cubic-bezier(0.23, 1, 0.32, 1) 0.80s forwards;
}
.hero-ctas {
  opacity: 0;
  transform: translateY(20px);
  animation: hero-fade-up 0.7s cubic-bezier(0.23, 1, 0.32, 1) 0.95s forwards;
}
.hero-stats {
  opacity: 0;
  transform: translateY(20px);
  animation: hero-fade-up 0.7s cubic-bezier(0.23, 1, 0.32, 1) 1.10s forwards;
}
.hero-scroll {
  opacity: 0;
  animation: hero-fade-up 0.6s ease 1.50s forwards;
}
@keyframes hero-fade-up {
  to { opacity: 1; transform: translateY(0); }
}

/* Stat hover lift */
.hero-stat {
  transition: transform 0.2s ease;
  cursor: default;
}
.hero-stat:hover { transform: translateY(-3px); }

/* ---- Crop Circle Stack (Reference Image Right-Side Layout) ---- */
.hero-crops-stack {
  opacity: 0;
  animation: hero-fade-up 0.9s cubic-bezier(0.23, 1, 0.32, 1) 0.6s forwards;
}

/* Decorative vertical connector line between circles */
.hero-crop-line {
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(255,255,255,0.3) 20%,
    rgba(86,175,67,0.5) 50%,
    rgba(255,255,255,0.3) 80%,
    transparent 100%
  );
}

/* Individual crop circle staggered pop-in */
.hero-crop-item {
  opacity: 0;
  transform: scale(0.8) translateX(40px);
}
.hero-crop-1 { animation: crop-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.7s forwards; }
.hero-crop-2 { animation: crop-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.9s forwards; }
.hero-crop-3 { animation: crop-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 1.1s forwards; }

@keyframes crop-pop {
  to { opacity: 1; transform: scale(1) translateX(0); }
}

/* Crop ring floating animation */
.hero-crop-ring {
  animation: crop-float 5s ease-in-out infinite alternate;
}
.hero-crop-2 .hero-crop-ring { animation-delay: -2s; animation-duration: 6s; }
.hero-crop-3 .hero-crop-ring { animation-delay: -1s; animation-duration: 4.5s; }

@keyframes crop-float {
  0%   { transform: translateY(0px); }
  100% { transform: translateY(-8px); }
}

/* "See All Crops" link */
.hero-crop-link {
  opacity: 0;
  animation: hero-fade-up 0.5s ease 1.3s forwards;
}

/* ---- Scroll Mouse Indicator ---- */
.hero-scroll-dot {
  animation: scroll-bounce 1.8s ease-in-out infinite;
}
@keyframes scroll-bounce {
  0%, 100% { transform: translateY(0); opacity: 1; }
  60%       { transform: translateY(14px); opacity: 0; }
  61%       { transform: translateY(0); opacity: 0; }
  80%       { opacity: 1; }
}

/* ===== CROPS MARQUEE ===== */
.marquee-container {
  display: flex;
  overflow: hidden;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  position: relative;
  padding: 1rem 0;
}
.marquee-track {
  display: flex;
  gap: 3rem;
  width: max-content;
  animation: marquee-scroll 45s linear infinite;
  padding-right: 3rem;
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100% / 2)); }
}

/* ===== MISSION / VISION / CORE VALUES INFOGRAPHIC ===== */
.infographic-wrap {
  position: relative;
  background: white;
}
.infographic {
  position: relative;
  width: 100%;
  min-height: 260px;
}
/* ===== VALUES SECTION (curved timeline) ===== */
.values-section { background: white; padding: 2rem; border-radius: 0.5rem; }
.values-inner { position: relative; max-width: 960px; margin: 0 auto; }
.values-header { text-align: center; margin-bottom: 1.25rem; }
.values-heading { font-family: 'Poppins', Inter, sans-serif; font-size: 1.6rem; margin: 0; color: var(--agri-dark); }
.values-sub { color: #556170; margin-top: 0.35rem; font-size: 0.95rem; }

.values-connectors { position: absolute; left: 0; top: 60px; width: 100%; height: 220px; pointer-events: none; overflow: visible; }
.val-connector { stroke-dasharray: 1000; stroke-dashoffset: 1000; transition: stroke-dashoffset 1s ease, stroke 0.25s ease; opacity: 0.95; stroke: rgba(17,24,17,0.06) !important; }

.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; align-items: stretch; grid-auto-rows: 1fr; list-style: none; padding: 0; margin: 0 0 1rem 0; position: relative; }
.values-card { background: transparent; border-radius: 0.5rem; padding: 0.75rem; text-align: center; position: relative; outline: none; min-height: 120px; }
.values-card:focus { box-shadow: 0 8px 20px rgba(0,0,0,0.06); transform: translateY(-4px); }
.val-icon { width: 64px; height: 64px; margin: 0 auto 0.5rem; display:flex; align-items:center; justify-content:center; color: #2d3b2d; transition: transform 0.22s ease, color 0.2s ease; }
.icon-svg { width:56px; height:56px; display:block; }
.val-title { font-weight: 800; font-size: 0.88rem; margin: 0.25rem 0; color: var(--agri-dark); }
.val-desc { font-size: 0.82rem; color: #475569; margin: 0 auto; max-width: 200px; line-height:1.2; height:48px; overflow:hidden; }

.values-card:hover, .values-card:focus { transform: translateY(-6px); }
.values-card:hover .val-icon, .values-card:focus .val-icon { transform: scale(1.08); }

.tooltip { position: absolute; left: 50%; transform: translateX(-50%) translateY(-8px); bottom: calc(100% + 8px); background: rgba(18,24,18,0.95); color: #fff; padding: 0.5rem 0.75rem; border-radius: 6px; font-size: 0.85rem; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; z-index: 40; }
.values-card:hover .tooltip { opacity: 1; transform: translateX(-50%) translateY(-4px); pointer-events: auto; }

.values-counters { display: flex; gap: 1.5rem; justify-content: center; align-items: center; margin-top: 1rem; flex-wrap: wrap; }
.values-counters .counter { text-align: center; padding: 0.5rem 1rem; }
.values-counters .count { font-weight: 800; font-size: 1.35rem; color: var(--agri-dark); }
.values-counters .label { font-size: 0.85rem; color: #556170; margin-top: 0.25rem; }

.values-cta { text-align: center; margin-top: 1.5rem; }
.cta-title { font-weight: 700; color: var(--agri-dark); margin-bottom: 0.5rem; }
.cta-buttons { display:flex; gap:1rem; justify-content:center; }
.btn { display:inline-block; padding:0.75rem 1.25rem; border-radius:999px; text-decoration:none; font-weight:700; }
.btn-primary { background: linear-gradient(90deg,#56af43,#2c5922); color:#fff; }
.btn-outline { background:transparent; color:var(--agri-dark); border:2px solid rgba(17,24,17,0.06); }

/* Responsive: tablet */
@media (max-width: 1024px) {
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .values-connectors { display: none; }
  .val-desc { max-width: 320px; }
}

/* Remove decorative background orbs/colors */
.hero-orb, .hero-orb-1, .hero-orb-2, .hero-orb-3, .hero-orb-4 { display: none !important; }

/* Mobile */
@media (max-width: 640px) {
  .values-grid { grid-template-columns: 1fr; }
  .values-inner { padding: 0 0.5rem; }
  .values-header { text-align: left; }
}


/* ===== RETRO CARD DESIGN ===== */

.retro-card {
  position: relative;
  background: linear-gradient(135deg, #fde8dc 0%, #fdf0e8 100%);
  border: 4px dashed #2c5922;
  border-radius: 12px;
  padding: 2rem;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  overflow: hidden;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 
    0 8px 32px rgba(86, 175, 67, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.retro-card::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border: 2px dashed #2c5922;
  border-radius: 16px;
  pointer-events: none;
  opacity: 0.3;
}

.retro-card-inner {
  position: relative;
  z-index: 2;
  width: 100%;
}

.retro-card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1.5rem;
}

.retro-card-title {
  font-size: 2rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #2c5922;
  text-shadow: 3px 3px 0px rgba(86, 175, 67, 0.2);
  margin: 0;
  transition: all 0.3s ease;
}

.retro-card:hover .retro-card-title {
  color: #56af43;
  text-shadow: 4px 4px 0px rgba(86, 175, 67, 0.3);
  transform: scale(1.05);
}

.retro-illustration {
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.retro-card:hover .retro-illustration {
  transform: scale(1.1) rotate(5deg);
}

.retro-card-desc {
  font-size: 1rem;
  line-height: 1.6;
  color: #4a5568;
  font-weight: 500;
  max-width: 100%;
  margin: 0;
  transition: all 0.3s ease;
}

.retro-card:hover .retro-card-desc {
  color: #2c5922;
}

.retro-shop-btn {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, #56af43 0%, #3a762d 100%);
  color: white;
  text-decoration: underline;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.85rem;
  border: 2px solid #2c5922;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 4px 4px 0px rgba(44, 89, 34, 0.2);
}

.retro-shop-btn:hover {
  background: linear-gradient(135deg, #3a762d 0%, #2c5922 100%);
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px rgba(44, 89, 34, 0.3);
}

.retro-shop-btn:active {
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0px rgba(44, 89, 34, 0.2);
}

/* Mission Card - Green */
.mission-card {
  border-color: #2c5922;
  background: linear-gradient(135deg, #fef3c7 0%, #fde8dc 100%);
}

.mission-card:hover {
  background: linear-gradient(135deg, #e5f5df 0%, #d4f0cc 100%);
  border-color: #56af43;
}

/* Vision Card - Deep Green */
.vision-card {
  border-color: #3a762d;
  background: linear-gradient(135deg, #fde8dc 0%, #faf4e0 100%);
}

.vision-card:hover {
  background: linear-gradient(135deg, #e5f5df 0%, #f0e9da 100%);
  border-color: #56af43;
}

/* Values Card - Gold */
.values-card {
  border-color: #92400e;
  background: linear-gradient(135deg, #fef4e4 0%, #fde8dc 100%);
}

.values-card .retro-card-title {
  color: #92400e;
}

.values-card:hover {
  background: linear-gradient(135deg, #fef9f0 0%, #fde8dc 100%);
  border-color: #f59e0b;
}

.values-card:hover .retro-card-title {
  color: #f59e0b;
  text-shadow: 4px 4px 0px rgba(245, 158, 11, 0.2);
}

.values-card .retro-shop-btn {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border-color: #92400e;
}

.values-card .retro-shop-btn:hover {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  box-shadow: 6px 6px 0px rgba(146, 64, 14, 0.3);
}

/* Shop All Button */
.retro-shop-all-btn {
  display: inline-block;
  padding: 1rem 2.5rem;
  background: linear-gradient(135deg, #2c5922 0%, #1e3d17 100%);
  color: white;
  text-decoration: underline;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 1.1rem;
  border: 3px solid #2c5922;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 6px 6px 0px rgba(44, 89, 34, 0.3);
  text-align: center;
}

.retro-shop-all-btn:hover {
  background: linear-gradient(135deg, #1e3d17 0%, #121812 100%);
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0px rgba(44, 89, 34, 0.4);
}

.retro-shop-all-btn:active {
  transform: translate(1px, 1px);
  box-shadow: 3px 3px 0px rgba(44, 89, 34, 0.2);
}

/* Responsive */
@media (max-width: 768px) {
  .retro-card {
    min-height: 380px;
    padding: 1.5rem;
    border-width: 3px;
  }

  .retro-card-title {
    font-size: 1.5rem;
  }

  .retro-card-desc {
    font-size: 0.9rem;
  }

  .retro-illustration {
    width: 120px;
    height: 120px;
  }

  .retro-shop-all-btn {
    padding: 0.85rem 2rem;
    font-size: 0.95rem;
  }
}