/* ====================================
   FONTS
   ==================================== */

@font-face {
  font-family: "Kontora";
  src: url("../assets/fonts/Kontora-Regular.otf") format("woff2");
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: "Kontora", sans-serif;
}

/* ====================================
   GLOBAL STYLES
   ==================================== */

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* ====================================
   TEAM BADGES - ROLE-BASED STYLING
   ==================================== */

/* Badge role-based modifiers using BEM methodology */
.badge--ceo {
  background: linear-gradient(135deg, #0F3C3B, #1D615A);
  color: white;
  box-shadow: 0 4px 15px rgba(15, 60, 59, 0.3);
}

.badge--wealth {
  background: linear-gradient(135deg, #1e3a8a, #3b82f6);
  color: white;
  box-shadow: 0 4px 15px rgba(30, 58, 138, 0.3);
}

.badge--local {
  background: linear-gradient(135deg, #dc2626, #f59e0b);
  color: white;
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.3);
}

.badge--asset {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color: white;
  box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);
}

/* Badge hover effects */
.badge--ceo:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(15, 60, 59, 0.4);
}

.badge--wealth:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(30, 58, 138, 0.4);
}

.badge--local:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(220, 38, 38, 0.4);
}

.badge--asset:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.4);
}

/* ====================================
   ANIMATIONS & KEYFRAMES
   ==================================== */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@keyframes networkPulse {
  0%, 100% { opacity: 0.1; }
  50% { opacity: 0.2; }
}

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

/* Hero section floating animation */
#hero h1 {
  animation: float 6s ease-in-out infinite;
}

/* Currency widget entrance animation */
#currency-widget {
  animation: fadeInUp 0.8s ease-out 0.5s both;
}

/* ====================================
   SERVICES SECTION
   ==================================== */

/* Service cards enhanced hover effects */
.group:hover {
  transform: scale(1.02) translateY(-5px);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ====================================
   ABOUT SECTION
   ==================================== */

/* About Us Node Network Interactions */
.network-background {
  transition: opacity 0.3s ease;
}

#about:hover .network-background {
  opacity: 0.15;
}

/* Node icon interactions */
.node-icon {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mission-block:hover .node-icon,
.vision-block:hover .node-icon,
.values-container:hover .node-icon {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 8px 25px rgba(29, 97, 90, 0.3);
}

/* Content card enhanced hover effects */
.mission-block:hover,
.vision-block:hover,
.values-container:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(29, 97, 90, 0.2);
}

/* Value items hover interactions */
.value-item:hover .w-3.h-3 {
  transform: scale(1.5);
  transition: transform 0.3s ease;
}

/* Network background responsive animations */
.network-background:hover {
  animation: networkPulse 2s ease-in-out infinite;
}

/* SVG animation enhancements */
.connections path {
  transition: stroke-width 0.3s ease, opacity 0.3s ease;
}

.mission-block:hover ~ .network-background .connections #connection-1,
.mission-block:hover ~ .network-background .connections #connection-2 {
  stroke-width: 3;
  opacity: 0.8;
}

.vision-block:hover ~ .network-background .connections #connection-3,
.vision-block:hover ~ .network-background .connections #connection-4 {
  stroke-width: 3;
  opacity: 0.8;
}

.values-container:hover ~ .network-background .connections #connection-5 {
  stroke-width: 3;
  opacity: 0.8;
}

/* ====================================
   TEAM SECTION - ENHANCED INTERACTIONS
   ==================================== */

/* Team cards enhanced interactions */
.card-link {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-link:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* ====================================
   FAQ SECTION
   ==================================== */

/* FAQ accordion enhanced animations */
details[open] summary {
  color: #1D615A;
}

details summary:hover {
  background-color: rgba(29, 97, 90, 0.05);
  transition: background-color 0.3s ease;
}

/* ====================================
   BANNER SECTION
   ==================================== */

/* Newsletter message feedback */
.newsletter-message {
  display: none;
  padding: 0.5rem;
  border-radius: 0.375rem;
  font-weight: 500;
  animation: fadeInUp 0.3s ease-out;
}

.newsletter-message.success {
  background-color: rgba(194, 214, 200, 0.2);
  color: #C2D6C8;
  border: 1px solid #C2D6C8;
}

.newsletter-message.error {
  background-color: rgba(239, 68, 68, 0.1);
  color: #fca5a5;
  border: 1px solid #ef4444;
}

/* ====================================
   CONTACT SECTION
   ==================================== */

/* Contact form enhanced focus states */
input:focus, textarea:focus {
  transform: scale(1.02);
  transition: all 0.3s ease;
}

/* ====================================
   GLOBAL INTERACTIVE ELEMENTS
   ==================================== */

/* Enhanced button hover effects */
button, .btn {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

button:hover, .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* WhatsApp button pulse animation */
.fixed.right-4.bottom-4 {
  animation: pulse 2s infinite;
}

/* ====================================
   RESPONSIVE DESIGN - MOBILE
   ==================================== */

@media screen and (max-width: 768px) {

  /* Reduce animations on mobile for performance */
  .group:hover {
    transform: scale(1.01);
  }

  #hero h1 {
    animation: none;
  }
}