/* ===== CSS VARIABLES ===== */
:root {
/* GitHub Dark Theme Colors */
--primary: #0d1117;
--primary-dark: #010409;
--primary-header: #1a1a1a;
--primary-light: #161b22;
--primary-color: #2563eb;

/* --primary: #2563eb;
--primary-dark: #1e40af;
--primary-light: #3b82f6; */
--accent: #238636;
--accent-hover: #2ea043;
--text-primary: #f0f6fc;
--text-secondary: #c9d1d9;
--text-muted: #8b949e;
--border: #30363d;
--danger: #f85149;
--warning: #d29922;
--success: #3fb950;

/* Gray Scale */
--gray-50: #f0f6fc;
--gray-100: #c9d1d9;
--gray-200: #b1bac4;
--gray-300: #8b949e;
--gray-400: #6e7681;
--gray-500: #484f58;
--gray-600: #30363d;
--gray-700: #21262d;
--gray-800: #161b22;
--gray-900: #0d1117;

/* Layout */
--sidebar-width: 280px;
--container-max-width: 1200px;

/* Fonts */
--fira-font:'Fira Code', monospace;

}

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

body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
/* font-family: var(--fira-font); */
line-height: 1.6;
color: var(--text-primary);
background-color: var(--primary);
padding-top: 70px;
}

.container {
width: 100%;
max-width: var(--container-max-width);
margin: 0 auto;
padding: 0 20px;
}
.container h1,
p {
font-family: var(--fira-font);
}

/* Header Styles */
header {
background-color: var(--primary-dark);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
border-bottom: 1px solid var(--border);
}


.logo {
display: flex;
align-items: center;
gap: 12px;
font-weight: 700;
font-size: 1.5rem;
color: var(--text-primary);
text-decoration: none;
z-index: 1001;
}

.logo-icon {
background: var(--accent);
color: white;
width: 36px;
height: 36px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
}

/* Desktop Navigation - Hidden on mobile */
.desktop-nav {
display: flex;
align-items: center;
}

.desktop-nav ul {
display: flex;
list-style: none;
gap: 30px;
align-items: center;
}

.desktop-nav a {
text-decoration: none;
color: var(--text-secondary);
font-weight: 500;
transition: color 0.3s;
position: relative;
padding: 8px 0;
font-family: 'Fira Code', monospace;
display: flex;
align-items: center;
gap: 8px;
}

.desktop-nav a:hover {
color: var(--text-primary);
}

.desktop-nav a:hover::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 2px;
background: var(--accent);
border-radius: 2px;
}

.desktop-nav a.active {
color: var(--text-primary);
}


.home-btn {
background: #0a0a0a;
padding: 20px 40px;
text-align: center;
border-radius: 4px;
border: 2px solid var(--accent);
color: var(--accent);
font-family: 'Courier New', monospace;
font-size: 1.1rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 3px;
position: relative;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.3);
}

.home-btn::before {
content: '▶';
position: absolute;
left: 15px;
color: var(--accent);
}

.home-btn:hover {
background: rgba(var(--accent-rgb), 0.1);
box-shadow: 0 0 30px rgba(var(--accent-rgb), 0.6);
letter-spacing: 4px;
}
.cta-button {
background: var(--accent);
padding: 20px 40px;
text-align: center;
border-radius: 4px;
border: 2px solid var(--accent);
color: var(--accent);

font-size: 1.1rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 3px;
position: relative;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.3);
font-family: 'Fira Code', monospace;
}

.cta-button:hover {
background: var(--accent-hover);
border-bottom: none;
}

/* Mobile Menu Button - Hidden on desktop */
.mobile-menu-btn {
display: none;
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: var(--text-secondary);
padding: 5px;
border-radius: 4px;
transition: background 0.3s;
z-index: 1001;
}

.mobile-menu-btn:hover {
background: var(--gray-700);
}

/* Mobile Navigation - Hidden on desktop */
.mobile-nav {
display: none;
position: absolute;
top: 100%;
left: 0;
width: 100%;
background-color: var(--primary-header);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
flex-direction: column;
padding: 20px;
}

.mobile-nav.active {
display: flex;
}

.mobile-nav a {
padding: 15px 0;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: var(--text-secondary);
font-family: 'Fira Code', monospace;
}

.mobile-nav a:last-child {
border-bottom: none;
}

.mobile-nav .cta-button {
margin: 15px 0 0 0;
justify-content: center;
}

/* Responsive Styles */
@media (max-width: 768px) {
.desktop-nav {
display: none;
}

.mobile-menu-btn {
display: block;
}
}


/* ===== PAGE HEADER ===== */
.page-header {
background: linear-gradient(135deg, var(--primary-dark), var(--gray-900));
padding: 80px 0 60px;
text-align: center;
}

.page-header h1 {
font-family: var(--fira-font);
font-size: 2.8rem;
margin-bottom: 20px;
}

.page-header p {
font-size: 1.2rem;
color: var(--text-secondary);
max-width: 700px;
margin: 0 auto;
}


/* ===== CONTENT SECTIONS ===== */
.about-head {
  background: linear-gradient(
135deg, 
rgb(from var(--primary-dark) r g b / 0.9) 0%, 
rgb(from var(--primary) r g b / 0.85) 50%,
rgb(from var(--accent) r g b / 0.5) 100%
), url('../img/cta-section.png');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.content-section {
padding: 80px 0;
background: linear-gradient(
135deg, 
rgb(from var(--primary-dark) r g b / 0.9) 0%, 
rgb(from var(--primary) r g b / 0.85) 50%,
rgb(from var(--accent) r g b / 0.5) 100%
), url('../img/card-bg.png');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

.section-title {
text-align: center;
margin-bottom: 60px;

}

.section-title h2 {
font-size: 2.5rem;
margin-bottom: 16px;
}

.section-title p {
font-size: 1.125rem;
color: var(--text-secondary);
max-width: 700px;
margin: 0 auto;
}


/* ===== HERO SECTION =====*/
/* /* ============================================
   ENHANCED HERO CSS - COMPATIBLE WITH YOUR HTML
   ============================================ */

.hero {
  --glow-color: rgba(35, 134, 54, 0.4);
  --grid-color: rgba(35, 134, 54, 0.03);
  --scan-line: rgba(35, 134, 54, 0.02);
  
  min-height: 100vh;
  padding: 0 5%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  isolation: isolate;
    background: linear-gradient(
        135deg, 
        rgb(from var(--primary-dark) r g b / 0.9) 0%, 
        rgb(from var(--primary) r g b / 0.85) 50%,
        rgb(from var(--primary-light) r g b / 0.5) 100%
    ), url('../img/kriosa_hero.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  overflow: hidden;
}

/* Animated Cyber Grid Background */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
 
  animation: grid-pulse 8s ease-in-out infinite;
  z-index: 0;

  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23238636' fill-opacity='0.1' d='M0,224L48,213.3C96,203,192,181,288,160C384,139,480,117,576,122.7C672,128,768,160,864,170.7C960,181,1056,171,1152,165.3C1248,160,1344,160,1392,160L1440,160L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z'%3E%3C/path%3E%3C/svg%3E");
background-size: cover;
background-position: center;

top: 0;
left: 0;
width: 100%;
height: 100%;

}

/* Scanning Line Effect */
/* .hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--primary-color, #238636),
    transparent
  );
  box-shadow: 0 0 30px var(--primary-color, #238636);
  animation: scan-line 6s linear infinite;
  z-index: 2;
  pointer-events: none;
  opacity: 0.3;
} */

/* Floating Particles Layer */
.hero .particle-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
}

.hero .particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: var(--primary-color, #238636);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--primary-color, #238636);
  animation: float 20s infinite ease-in-out;
}

/* Glowing Orbs */
.hero .orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.12;
  z-index: 0;
  animation: orb-float 15s infinite alternate ease-in-out;
}

.hero .orb-1 {
  width: 600px;
  height: 600px;
  background: var(--primary-color, #238636);
  top: -200px;
  right: -100px;
  animation-delay: 0s;
}

.hero .orb-2 {
  width: 500px;
  height: 500px;
  background: #0066ff;
  bottom: -150px;
  left: -100px;
  animation-delay: -5s;
}

.hero .orb-3 {
  width: 400px;
  height: 400px;
  background: var(--primary-color, #238636);
  top: 50%;
  left: 30%;
  animation-delay: -10s;
  opacity: 0.06;
}

/* Container Enhancement */
.hero .container {
  position: relative;
  z-index: 3;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

/* Hero Content */
.hero-content {
  position: relative;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

/* Enhanced Heading */
.hero h1 {
  font-size: clamp(2.5rem, 8vw, 4.5rem);
  font-family: 'Fira Code', 'Courier New', monospace;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 24px;
  color: #ffffff;
  position: relative;
  text-shadow: 0 0 30px rgba(35, 134, 54, 0.3);
}

/* Gradient Text Effect for Keywords */
.hero h1 strong,
.hero h1 em {
  background: linear-gradient(135deg, var(--primary-color, #238636) 0%, #00cc88 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position: relative;
  display: inline-block;
}

/* Enhanced Paragraph */
.hero p {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  color: rgba(255, 255, 255, 0.8);
  font-family: 'Fira Sans', system-ui, sans-serif;
  margin-bottom: 40px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
  position: relative;
  padding: 0 20px;
}

/* Animated Border for Subtitle */
.hero p::before {
  content: '';
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--primary-color, #238636), transparent);
  animation: width-pulse 3s infinite;
}

/* Button Container */
.hero-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

/* Enhanced Primary Button */
.button-primary {
  position: relative;
  background: transparent;
  color: #ffffff;
  border: none;
  padding: 14px 32px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 1rem;
  font-family: 'Fira Code', monospace;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.button-primary i {
  font-size: 1.1rem;
  transition: transform 0.3s;
}

.button-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--primary-color, #238636) 0%, #1a6630 100%);
  z-index: -2;
  transition: transform 0.3s;
}

.button-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #00cc88 0%, var(--primary-color, #238636) 100%);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s;
}

.button-primary:hover {
  transform: translateY(-3px);
  box-shadow: 
    0 10px 30px -10px rgba(35, 134, 54, 0.5),
    0 0 0 1px rgba(35, 134, 54, 0.3);
  color: #ffffff;
}

.button-primary:hover i {
  transform: translateX(3px);
}

.button-primary:hover::after {
  opacity: 1;
}

.button-primary:hover::before {
  transform: scale(1.05);
}

.button-primary:active {
  transform: translateY(-1px);
}

/* Enhanced Secondary Button */
.button-secondary {
  position: relative;
  background: transparent;
  color: var(--primary-color, #238636);
  border: 2px solid var(--primary-color, #238636);
  padding: 14px 32px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 1rem;
  font-family: 'Fira Code', monospace;
  cursor: pointer;
  transition: all 0.3s;
  backdrop-filter: blur(10px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.button-secondary i {
  font-size: 1.1rem;
  transition: transform 0.3s;
}

.button-secondary:hover {
  background: rgba(35, 134, 54, 0.1);
  box-shadow: 
    0 0 30px rgba(35, 134, 54, 0.2),
    inset 0 0 20px rgba(35, 134, 54, 0.05);
  transform: translateY(-3px);
  border-color: rgba(35, 134, 54, 0.9);
  color: #ffffff;
}

.button-secondary:hover i {
  transform: scale(1.1);
}

/* Enhanced Stats Section */
.hero-stats {
  display: flex;
  gap: 60px;
  justify-content: center;
  margin-top: 60px !important;
  padding: 30px 40px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(35, 134, 54, 0.15);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

.hero-stats::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--primary-color, #238636), transparent);
  animation: shimmer 3s infinite;
}

.hero-stats > div {
  text-align: center;
  position: relative;
}

.hero-stats > div:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -30px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, transparent, rgba(35, 134, 54, 0.3), transparent);
}

.hero-stats div div:first-child {
  font-size: 2.5rem !important;
  font-weight: 700 !important;
  color: var(--primary-color, #238636) !important;
  font-family: 'Fira Code', monospace;
  text-shadow: 0 0 20px rgba(35, 134, 54, 0.5);
  line-height: 1.2;
  margin-bottom: 8px;
  position: relative;
  display: inline-block;
}

.hero-stats div div:last-child {
  font-size: 0.9rem !important;
  color: rgba(255, 255, 255, 0.6) !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 500;
}

.feature-badges span {
    transition: transform 0.3s ease, background 0.3s ease;
    cursor: default;
    display: inline-flex;
    align-items: center;
    backdrop-filter: blur(5px);
}

.feature-badges span:hover {
    transform: translateY(-2px);
    background: rgba(35, 134, 54, 0.25) !important;
}

.ml-intelligence span {
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.ml-intelligence span:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, rgba(35, 134, 54, 0.2), rgba(35, 134, 54, 0.1));
    border-color: rgba(35, 134, 54, 0.6);
    box-shadow: 0 4px 15px rgba(35, 134, 54, 0.2);
}

/* Optimized for small screens */
@media (max-width: 768px) {
    .feature-badges {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px !important;
        width: 100% !important;
    }
    
    .feature-badges span {
        font-size: 0.75rem !important;
        padding: 6px 12px !important;
        white-space: nowrap !important;
        flex: 0 1 auto !important;
    }
    
    .ml-intelligence {
        width: 100% !important;
        padding: 10px !important;
    }
    
    .ml-intelligence span {
        flex-direction: column !important;
        text-align: center !important;
        gap: 8px !important;
        padding: 12px 16px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .ml-intelligence span i {
        font-size: 1rem !important;
    }
    
    .ml-intelligence span .ml-text {
        font-size: 0.8rem !important;
        line-height: 1.4 !important;
        display: block !important;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .feature-badges {
        gap: 8px !important;
    }
    
    .feature-badges span {
        font-size: 0.65rem !important;
        padding: 4px 8px !important;
    }
    
    .ml-intelligence span {
        padding: 10px 12px !important;
        gap: 6px !important;
    }
    
    .ml-intelligence span .ml-text {
        font-size: 0.7rem !important;
    }
    
    .ml-intelligence span i {
        font-size: 0.85rem !important;
    }
}
/* Animation Classes (Keep your existing ones) */
.animate-fade-in {
  animation: fadeInUp 0.8s ease-out forwards;
  opacity: 0;
}

.delay-100 {
  animation-delay: 0.1s;
}

.delay-200 {
  animation-delay: 0.2s;
}

.delay-300 {
  animation-delay: 0.3s;
}

/* Keyframe Animations */
@keyframes grid-pulse {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.05);
  }
}

@keyframes scan-line {
  0% {
    top: -10px;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0) translateX(0);
  }
  25% {
    transform: translateY(-30px) translateX(15px);
  }
  50% {
    transform: translateY(-60px) translateX(-15px);
  }
  75% {
    transform: translateY(-30px) translateX(10px);
  }
}

@keyframes orb-float {
  0% {
    transform: translate(0, 0) scale(1);
  }
  100% {
    transform: translate(50px, 50px) scale(1.1);
  }
}

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

@keyframes shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

@keyframes width-pulse {
  0%, 100% {
    width: 60px;
    opacity: 0.5;
  }
  50% {
    width: 100px;
    opacity: 1;
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .hero {
    padding: 80px 20px;
    min-height: auto;
  }

  .hero h1 {
    font-size: 2.2rem;
  }

  .hero p {
    font-size: 1rem;
    padding: 0 15px;
  }

  .hero-stats {
    flex-direction: column;
    gap: 30px;
    padding: 25px;
  }

  .hero-stats > div:not(:last-child)::after {
    display: none;
  }

  .hero-stats > div:not(:last-child) {
    border-bottom: 1px solid rgba(35, 134, 54, 0.2);
    padding-bottom: 20px;
  }

  .hero-stats div div:first-child {
    font-size: 2rem !important;
  }

  .hero-buttons {
    flex-direction: column;
    align-items: stretch;
    padding: 0 20px;
  }

  .button-primary,
  .button-secondary {
    justify-content: center;
  }
}

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

.button-primary:focus-visible,
.button-secondary:focus-visible {
  outline: 3px solid var(--primary-color, #238636);
  outline-offset: 4px;
}

/* Touch Device Optimizations */
@media (hover: none) {
  .button-primary:hover,
  .button-secondary:hover {
    transform: none;
  }
}
/* Features Section */
.features {
padding: 100px 0;
   background: linear-gradient(
        135deg, 
        rgb(from var(--primary-dark) r g b / 0.9) 0%, 
        rgb(from var(--primary) r g b / 0.85) 50%,
        rgb(from var(--primary-light) r g b / 0.5) 100%
    ), url('../img/kriosa_feature.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.section-title {
font-family: var(--fira-font);
text-align: center;
margin-bottom: 60px;
}

.section-title h2 {
font-size: 2.5rem;
margin-bottom: 16px;

}

.section-title p {
font-size: 1.125rem;
color: var(--text-secondary);
max-width: 700px;
margin: 0 auto;
}

.features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
}


@media (max-width: 768px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 per row on tablets */
  }
}

@media (max-width: 480px) {
  .features-grid {
    grid-template-columns: 1fr; /* 1 per row on mobile */
  }
}

/* Security Enhanced Feature Cards */
.feature-card {
    min-width: 0;
    background: linear-gradient(135deg, rgba(35, 134, 54, 0.05), rgba(0, 0, 0, 0.3));
    border-radius: 16px;
    padding: 20px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(35, 134, 54, 0.2);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    word-wrap: break-word;    /* fix long text overflowing */
    overflow-wrap: break-word;
}

/* Make images/icons inside cards responsive */
.feature-card img,
.feature-card svg,
.feature-card i {
    max-width: 100%;
}
/* Security scan line animation */
.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #4caf50, #238636, #4caf50, transparent);
    animation: securityScan 3s infinite;
}

/* Grid pattern overlay for security feel */
.feature-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(rgba(35, 134, 54, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(35, 134, 54, 0.03) 1px, transparent 1px);
    background-size: 20px 20px;
    pointer-events: none;
    border-radius: 16px;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(35, 134, 54, 0.2), 0 0 20px rgba(35, 134, 54, 0.1);
    border-color: #4caf50;
    background: linear-gradient(135deg, rgba(35, 134, 54, 0.1), rgba(0, 0, 0, 0.4));
}

/* Corner accents for security look */
.feature-card .corner-accent {
    position: absolute;
    width: 40px;
    height: 40px;
    border-color: #4caf50;
    border-style: solid;
    border-width: 0;
    opacity: 0;
    transition: opacity 0.3s;
}

.feature-card:hover .corner-accent {
    opacity: 0.6;
}

.feature-card .corner-tl {
    top: 10px;
    left: 10px;
    border-top-width: 2px;
    border-left-width: 2px;
}

.feature-card .corner-br {
    bottom: 10px;
    right: 10px;
    border-bottom-width: 2px;
    border-right-width: 2px;
}

/* Security Icon Styles */
.feature-icon {
    background: linear-gradient(135deg, #238636, #1a6e2d);
    color: white;
    width: 70px;
    height: 70px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin-bottom: 20px;
    position: relative;
    box-shadow: 0 0 20px rgba(35, 134, 54, 0.3);
    transition: all 0.3s;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Lock badge on icon */
.feature-icon::after {
    content: '🔒';
    position: absolute;
    bottom: -8px;
    right: -8px;
    font-size: 14px;
    background: #1a1a2e;
    border-radius: 50%;
    width:25px;
    height:25px;
    justify-content: center;
    align-items: center;
    display: flex;
    padding: 2px;
    border: 1px solid #4caf50;
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
}

.feature-card:hover .feature-icon {
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(35, 134, 54, 0.5);
}

.feature-card h3 {
    font-size: 1.5rem;
    margin-bottom: 12px;
    color: #ffffff;
    font-family: 'Fira Code', monospace;
    position: relative;
    display: inline-block;
}

/* Underline accent for headings */
.feature-card h3::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, #4caf50, transparent);
    transition: width 0.3s;
}

.feature-card:hover h3::after {
    width: 100%;
}

.feature-card p {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Security badge/tag */
.feature-card .security-badge {
    display: inline-block;
    font-size: 0.7rem;
    padding: 4px 8px;
    background: rgba(35, 134, 54, 0.2);
    border: 1px solid rgba(35, 134, 54, 0.4);
    border-radius: 4px;
    color: #4caf50;
    font-family: 'Fira Code', monospace;
    letter-spacing: 1px;
    margin-top: 15px;
}

/* Pulse animation for active security */
@keyframes securityScan {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 0.8;
    }
}

/* Alternative design with different security elements */
.feature-card-alt {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 12px;
    padding: 30px;
    transition: all 0.3s;
    border: 1px solid rgba(35, 134, 54, 0.3);
    position: relative;
    backdrop-filter: blur(5px);
}

.feature-card-alt::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 12px;
    padding: 1px;
    background: linear-gradient(135deg, #4caf50, transparent, #238636);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s;
}

.feature-card-alt:hover::before {
    opacity: 1;
}

.feature-card-alt:hover {
    transform: translateY(-5px);
    background: rgba(0, 0, 0, 0.5);
    border-color: transparent;
}

.feature-card-alt .feature-icon {
    background: transparent;
    border: 2px solid #4caf50;
    color: #4caf50;
    box-shadow: none;
}

.feature-card-alt .feature-icon::after {
    display: none;
}

.feature-card-alt .feature-icon i {
    font-size: 2rem;
}

.feature-card-alt h3 {
    color: #4caf50;
}

.feature-card-alt h3::after {
    background: linear-gradient(90deg, #4caf50, #238636);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .feature-card, .feature-card-alt {
        padding: 20px;
    }
    
    .feature-icon {
        width: 50px;
        height: 50px;
        font-size: 1.3rem;
    }
    
    .feature-card h3 {
        font-size: 1.2rem;
    }
}
/* How It Works Section - Security Enhanced */
.how-it-works {
    padding: 100px 0;
    background: linear-gradient(135deg, rgba(35, 134, 54, 0.05), rgba(0, 0, 0, 0.2));
    position: relative;
    overflow: hidden;
}

/* Security grid overlay */
.how-it-works::before {
     content: '';
  position: absolute;
  inset: 0;
 
  animation: grid-pulse 8s ease-in-out infinite;
  z-index: 0;

  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23238636' fill-opacity='0.1' d='M0,224L48,213.3C96,203,192,181,288,160C384,139,480,117,576,122.7C672,128,768,160,864,170.7C960,181,1056,171,1152,165.3C1248,160,1344,160,1392,160L1440,160L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z'%3E%3C/path%3E%3C/svg%3E");
background-size: cover;
background-position: center;

top: 0;
left: 0;
width: 100%;
height: 100%;
}

.architecture {
    display: flex;
    justify-content: center;
    margin: 60px 0;
    position: relative;
}

.architecture-diagram {
    width: 100%;
    max-width: 1200px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(35, 134, 54, 0.2);
    border: 1px solid rgba(35, 134, 54, 0.3);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

/* Scanning line effect */
.architecture-diagram::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #4caf50, #238636, #4caf50, transparent);
    animation: securityScan 3s infinite;
}

/* Corner accents */
.architecture-diagram::after {
    content: '';
    position: absolute;
    top: 15px;
    left: 15px;
    width: 50px;
    height: 50px;
    border-top: 2px solid #4caf50;
    border-left: 2px solid #4caf50;
    opacity: 0.3;
}

.diagram-title {
    text-align: center;
    margin-bottom: 40px;
    color: #ffffff;
    font-size: 1.5rem;
    font-family: 'Fira Code', monospace;
    position: relative;
    display: inline-block;
    width: 100%;
}

.diagram-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #4caf50, #238636, #4caf50, transparent);
}

.diagram-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    flex-wrap: wrap;
    gap: 20px;
}

.flow-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    min-width: 120px;
    position: relative;
}

/* Security badge on each step */
.flow-step::before {
    content: '✓';
    position: absolute;
    top: -10px;
    right: 20px;
    width: 24px;
    height: 24px;
    background: #238636;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: white;
    opacity: 0;
    transition: opacity 0.3s;
    border: 1px solid #4caf50;
    z-index: 1;
}

.flow-step:hover::before {
    opacity: 1;
}

.flow-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #238636, #1a6e2d);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin-bottom: 16px;
    border: 2px solid #4caf50;
    box-shadow: 0 0 20px rgba(35, 134, 54, 0.3);
    transition: all 0.3s ease;
    position: relative;
}

/* Lock icon on flow icons */
.flow-icon::after {
    content: '🔒';
    position: absolute;
    bottom: -5px;
    right: -5px;
    font-size: 10px;
    background: #1a1a2e;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #4caf50;
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
    line-height: 1;
}

.flow-step:hover .flow-icon {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 0 30px rgba(35, 134, 54, 0.6);
    border-color: #6fbf73;
}

.flow-step p {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    margin: 0;
    font-size: 0.95rem;
    position: relative;
}

/* Step number indicator */
.flow-step p::before {
    content: attr(data-step);
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    color: #4caf50;
    font-family: 'Fira Code', monospace;
    opacity: 0;
    transition: opacity 0.3s;
}

.flow-step:hover p::before {
    opacity: 1;
}

.flow-arrow {
    font-size: 2rem;
    color: #4caf50;
    margin: 0 10px;
    opacity: 0.7;
    transition: all 0.3s;
    animation: pulse 2s infinite;
}

.flow-arrow:hover {
    opacity: 1;
    transform: translateX(5px);
}

/* Security status line between steps */
.diagram-flow::before {
    content: '';
    position: absolute;
    top: 40px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #4caf50, #238636, #4caf50, transparent);
    opacity: 0.3;
    z-index: 0;
}

/* Animations */
@keyframes securityScan {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.4;
    }
    50% {
        opacity: 1;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .how-it-works {
        padding: 60px 0;
    }
    
    .architecture-diagram {
        padding: 20px;
        margin: 0 15px;
    }
    
    .diagram-flow {
        flex-direction: column;
    }
    
    .diagram-flow::before {
        display: none;
    }
    
    .flow-step {
        width: 100%;
        max-width: 250px;
    }
    
    .flow-arrow {
        transform: rotate(90deg);
        margin: 5px 0;
    }
    
    .flow-arrow:hover {
        transform: rotate(90deg) translateX(5px);
    }
    
    .flow-icon {
        width: 70px;
        height: 70px;
        font-size: 1.5rem;
    }
    
    .diagram-title {
        font-size: 1.2rem;
    }
}

@media (max-width: 480px) {
    .architecture-diagram {
        padding: 15px;
    }
    
    .flow-icon {
        width: 60px;
        height: 60px;
        font-size: 1.3rem;
    }
    
    .flow-step p {
        font-size: 0.85rem;
    }
    
    .flow-arrow {
        font-size: 1.5rem;
    }
}
/* Documentation Section */
  /* ========== DOCUMENTATION CTA SECTION - REDESIGNED ========== */
          .docs-cta-section {

              position: relative;
           background: linear-gradient(
        135deg, 
        rgb(from var(--primary-dark) r g b / 0.9) 0%, 
        rgb(from var(--primary) r g b / 0.85) 50%,
        rgb(from var(--accent) r g b / 0.5) 100%
    ), url('../img/docs-section.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
              padding: 2rem 0;
              overflow: hidden;
          }

          /* Cyber grid overlay */
          .docs-cta-section::before {
              content: '';
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              background-image:
                  linear-gradient(rgba(59, 130, 246, 0.03) 1px, transparent 1px),
                  linear-gradient(90deg, rgba(59, 130, 246, 0.03) 1px, transparent 1px);
              background-size: 40px 40px;
              pointer-events: none;
              z-index: 0;
          }

          /* Animated scanning line */
          .docs-cta-section::after {
              content: '';
              position: absolute;
              top: 0;
              left: -100%;
              width: 100%;
              height: 2px;
              background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.6), rgba(139, 92, 246, 0.6), transparent);
              animation: scanLine 8s linear infinite;
              pointer-events: none;
              z-index: 1;
          }

          @keyframes scanLine {
              0% {
                  left: -100%;
              }

              100% {
                  left: 200%;
              }
          }

          /* Floating particles effect */
          .docs-cta-section .cyber-particles {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              pointer-events: none;
              z-index: 0;
              overflow: hidden;
          }

          .docs-cta-section .cyber-particles span {
              position: absolute;
              width: 2px;
              height: 2px;
              background: rgba(59, 130, 246, 0.4);
              border-radius: 50%;
              animation: floatParticle 15s linear infinite;
          }

          @keyframes floatParticle {
              0% {
                  transform: translateY(100vh) scale(0);
                  opacity: 0;
              }

              10% {
                  opacity: 1;
              }

              90% {
                  opacity: 1;
              }

              100% {
                  transform: translateY(-100vh) scale(1);
                  opacity: 0;
              }
          }

          /* Corner accents */
          .docs-cta-section .cyber-corner {
              position: absolute;
              width: 60px;
              height: 60px;
              pointer-events: none;
              z-index: 1;
          }

          .docs-cta-section .cyber-corner.top-left {
              top: 20px;
              left: 20px;
              border-top: 2px solid rgba(59, 130, 246, 0.4);
              border-left: 2px solid rgba(59, 130, 246, 0.4);
          }

          .docs-cta-section .cyber-corner.top-right {
              top: 20px;
              right: 20px;
              border-top: 2px solid rgba(59, 130, 246, 0.4);
              border-right: 2px solid rgba(59, 130, 246, 0.4);
          }

          .docs-cta-section .cyber-corner.bottom-left {
              bottom: 20px;
              left: 20px;
              border-bottom: 2px solid rgba(59, 130, 246, 0.4);
              border-left: 2px solid rgba(59, 130, 246, 0.4);
          }

          .docs-cta-section .cyber-corner.bottom-right {
              bottom: 20px;
              right: 20px;
              border-bottom: 2px solid rgba(59, 130, 246, 0.4);
              border-right: 2px solid rgba(59, 130, 246, 0.4);
          }

          /* Glow orb effect */
          .docs-cta-section .cyber-orb {
              position: absolute;
              width: 300px;
              height: 300px;
              border-radius: 50%;
              background: radial-gradient(circle, rgba(59, 130, 246, 0.08), transparent 70%);
              pointer-events: none;
              z-index: 0;
          }

          .docs-cta-section .cyber-orb.orb-1 {
              top: -150px;
              right: -100px;
              animation: pulseOrb 6s ease-in-out infinite;
          }

          .docs-cta-section .cyber-orb.orb-2 {
              bottom: -150px;
              left: -100px;
              width: 250px;
              height: 250px;
              background: radial-gradient(circle, rgba(139, 92, 246, 0.06), transparent 70%);
              animation: pulseOrb 8s ease-in-out infinite reverse;
          }

          @keyframes pulseOrb {

              0%,
              100% {
                  opacity: 0.3;
                  transform: scale(1);
              }

              50% {
                  opacity: 0.6;
                  transform: scale(1.1);
              }
          }

          /* Ensure content stays above background */
          .docs-cta-section .container {
              position: relative;
              z-index: 2;
          }

          .docs-cta-section .container {
              max-width: 1280px;
              margin: 0 auto;
              padding: 0 1.5rem;
          }

          /* Section Header */
          .docs-cta-section .section-header {
              text-align: center;
              margin-bottom: 3rem;
          }

          .docs-cta-section .section-icon {
              width: 64px;
              height: 64px;
              background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(139, 92, 246, 0.1));
              border-radius: 12px;
              display: flex;
              align-items: center;
              justify-content: center;
              margin: 0 auto 1rem;
              font-size: 2rem;
              color: #3b82f6;
              border: 1px solid #1f2a3e;
              transition: all 0.25s ease;
          }

          .docs-cta-section .section-icon:hover {
              transform: scale(1.05);
              border-color: #3b82f6;
          }

          .docs-cta-section .section-title {
              font-size: 2.2rem;
              font-weight: 800;
              background: linear-gradient(135deg, #f1f5f9, #a855f7);
              -webkit-background-clip: text;
              background-clip: text;
              color: transparent;
              margin-bottom: 0.5rem;
          }

          .docs-cta-section .section-subtitle {
              color: #94a3b8;
              font-size: 1.1rem;
              max-width: 600px;
              margin: 0 auto;
          }

          /* Documentation Banner Wrapper */
          .docs-cta-section .docs-banner-wrapper {
              margin: 1.5rem 0 3rem;
          }

          /* Documentation Banner Link */
          .docs-cta-section .docs-banner-link {
              text-decoration: none;
              display: block;
              cursor: pointer;
          }

          /* Documentation Banner - Main container with 2-column layout */
          .docs-cta-section .docs-banner {
              background: linear-gradient(135deg, #0f172a, #0a0f1f);
              border-radius: 32px;
              position: relative;
              overflow: hidden;
              transition: all 0.25s ease;
              border: 1px solid rgba(59, 130, 246, 0.3);
          }

          .docs-cta-section .docs-banner:hover {
              transform: translateY(-4px);
              border-color: #3b82f6;
              box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
          }

          /* Glow Effect */
          .docs-cta-section .docs-banner-glow {
              position: absolute;
              top: -30%;
              right: -20%;
              width: 60%;
              height: 80%;
              background: radial-gradient(circle, rgba(139, 92, 246, 0.15), transparent 70%);
              filter: blur(60px);
              pointer-events: none;
              transition: transform 0.25s ease;
          }

          /* 2-Column Grid Layout */
          .docs-cta-section .docs-banner-grid {
              display: grid;
              grid-template-columns: 1fr 0.8fr;
              gap: 2rem;
              position: relative;
              z-index: 2;
          }

          /* Left Side - Content */
          .docs-cta-section .docs-banner-content {
              padding: 2rem;
              text-align: left;
          }

          /* Banner Tag */
          .docs-cta-section .docs-banner-tag {
              display: inline-flex;
              align-items: center;
              gap: 8px;
              background: rgba(59, 130, 246, 0.15);
              backdrop-filter: blur(4px);
              padding: 6px 16px;
              border-radius: 9999px;
              font-size: 0.8rem;
              font-weight: 500;
              color: #3b82f6;
              border: 1px solid rgba(59, 130, 246, 0.3);
              margin-bottom: 1.5rem;
          }

          /* Banner Heading */
          .docs-cta-section .docs-banner-content h2 {
              font-size: 2rem;
              font-weight: 700;
              margin-bottom: 1rem;
              color: white;
              line-height: 1.2;
          }

          /* Banner Description */
          .docs-cta-section .docs-banner-content p {
              color: #94a3b8;
              margin-bottom: 1.5rem;
              font-size: 1rem;
              line-height: 1.6;
          }

          /* Feature List */
          .docs-cta-section .docs-feature-list {
              display: flex;
              flex-direction: column;
              gap: 1rem;
              margin-bottom: 1.5rem;
          }

          .docs-cta-section .docs-feature {
              display: flex;
              align-items: center;
              gap: 12px;
              color: #94a3b8;
              font-size: 0.9rem;
          }

          .docs-cta-section .docs-feature i {
              color: #10b981;
              font-size: 1rem;
              width: 20px;
          }


          /* CTA Button */
          .docs-cta-section .docs-cta-area {
              margin-top: 1.5rem;
          }

          .docs-cta-section .btn-docs-primary {
              background: linear-gradient(135deg, #3b82f6, #8b5cf6);
              padding: 12px 28px;
              border-radius: 9999px;
              font-weight: 600;
              color: white;
              display: inline-flex;
              align-items: center;
              gap: 10px;
              transition: all 0.25s ease;
              font-size: 0.95rem;
              cursor: pointer;
          }

          .docs-cta-section .docs-banner-link:hover .btn-docs-primary {
              transform: translateX(4px);
              gap: 14px;
          }

          /* Right Side - Visual/Stats */
          .docs-cta-section .docs-banner-visual {
              padding: 2rem;
              background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(139, 92, 246, 0.02));
              border-left: 1px solid #1f2a3e;
              display: flex;
              flex-direction: column;
              justify-content: center;
              gap: 1.5rem;
          }

          /* Stats Section */
          .docs-cta-section .docs-stats {
              display: flex;
              justify-content: space-around;
              gap: 1.5rem;
              text-align: center;
          }

          .docs-cta-section .docs-stat {
              text-align: center;
          }

          .docs-cta-section .docs-stat-number {
              font-size: 2rem;
              font-weight: 800;
              background: linear-gradient(135deg, #3b82f6, #8b5cf6);
              -webkit-background-clip: text;
              background-clip: text;
              color: transparent;
              line-height: 1.2;
          }

          .docs-cta-section .docs-stat-label {
              color: #64748b;
              font-size: 0.75rem;
              margin-top: 4px;
          }

          /* Icon Stack */
          .docs-cta-section .docs-icon-stack {
              display: flex;
              justify-content: center;
              flex-wrap: wrap;
              gap: 1.5rem;
              padding: 1.5rem 0;
          }

          .docs-cta-section .docs-icon-stack i {
              font-size: 2.5rem;
              color: #64748b;
              transition: all 0.15s ease;
              opacity: 0.6;
          }

          .docs-cta-section .docs-icon-stack i:hover {
              color: #3b82f6;
              opacity: 1;
              transform: translateY(-4px);
          }

          /* Responsive Styles */
          @media (max-width: 968px) {
              .docs-cta-section .docs-banner-grid {
                  grid-template-columns: 1fr;
                  gap: 0;
              }

              .docs-cta-section .docs-banner-visual {
                  border-left: none;
                  border-top: 1px solid #1f2a3e;
                  padding-top: 1.5rem;
                  text-align: center;
              }

              .docs-cta-section .docs-banner-content {
                  text-align: center;
              }

              .docs-cta-section .docs-feature-list {
                  align-items: flex-start;
                  text-align: left;
              }

              .docs-cta-section .docs-cta-area {
                  text-align: center;
              }
          }

          @media (max-width: 768px) {
              .docs-cta-section {
                  margin: 2rem 0;
              }

              .docs-cta-section .container {
                  padding: 0 1rem;
              }

              .docs-cta-section .section-title {
                  font-size: 1.6rem;
              }

              .docs-cta-section .section-subtitle {
                  font-size: 0.95rem;
              }

              .docs-cta-section .docs-banner-content {
                  padding: 1.5rem;
              }

              .docs-cta-section .docs-banner-content h2 {
                  font-size: 1.5rem;
              }

              .docs-cta-section .docs-banner-content p {
                  font-size: 0.9rem;
              }

              .docs-cta-section .docs-banner-visual {
                  padding: 1.5rem;
              }

              .docs-cta-section .docs-stat-number {
                  font-size: 1.5rem;
              }

              .docs-cta-section .docs-icon-stack i {
                  font-size: 1.8rem;
              }

              .docs-cta-section .docs-feature {
                  font-size: 0.85rem;
              }

              .docs-cta-section .btn-docs-primary {
                  padding: 10px 24px;
                  font-size: 0.85rem;
              }
          }

          /* Animation for banner on page load */
          @keyframes docsBannerFadeIn {
              from {
                  opacity: 0;
                  transform: translateY(20px);
              }

              to {
                  opacity: 1;
                  transform: translateY(0);
              }
          }

          .docs-cta-section .docs-banner-wrapper {
              animation: docsBannerFadeIn 0.6s ease-out;
          }

          /* Feature list item hover effect */
          .docs-cta-section .docs-feature {
              transition: transform 0.15s ease;
          }

          .docs-cta-section .docs-feature:hover {
              transform: translateX(4px);
          }
/* Testimonials Section */
.testimonials {
    padding: 100px 0;
    background: var(--primary-light);
    position: relative;
}

/* Grid - Updated for 3 cards */
.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Testimonial Card - Enhanced */
.testimonial-card {
    background: var(--gray-800);
    border-radius: 16px;
    padding: 32px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--border);
    position: relative;
    
}

/* Hover Effect */
.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 30px -12px rgba(0, 0, 0, 0.15);
    border-color: var(--primary);
    
}

/* Quote Icon (optional, adds personality) */
.testimonial-card::before {
    content: '"';
    font-size: 5rem;
    font-family: serif;
    position: absolute;
    top: -10px;
    left: 20px;
    color: var(--accent);
    border-radius: 50%;
    width: 45px;
    height: 45px;
    opacity: 0.15;
    pointer-events: none;
    animation: glow 1.5s infinite;
}

/* Testimonial Text */
.testimonial-text {
    font-size: 1.125rem;
    line-height: 1.6;
    font-style: italic;
    margin-bottom: 24px;
    color: var(--text-secondary);
    position: relative;
    z-index: 1;
}

/* Author */
.testimonial-author {
    font-weight: 600;
    color: var(--accent);
    margin-top: 12px;
    padding-top: 12px;
    border-top: 2px solid var(--border);
    display: inline-block;
}

/* Author Title/Company (add this to HTML optionally) */
.testimonial-title {
    font-size: 0.875rem;
    color: var(--text-muted);
    font-weight: normal;
    margin-top: 4px;
}

/* Rating Stars (optional, add trust) */
.testimonial-stars {
    color: #f5b042;
    margin-bottom: 16px;
    font-size: 0.875rem;
    letter-spacing: 2px;
}

/* Responsive Design */
@media (max-width: 992px) {
    .testimonial-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
    
    .testimonials {
        padding: 80px 0;
    }
}

@media (max-width: 768px) {
    .testimonial-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .testimonial-card {
        padding: 24px;
    }
    
    .testimonials {
        padding: 60px 0;
    }
    
    .testimonial-text {
        font-size: 1rem;
    }
}

/* Dark Mode Enhancement (if applicable) */
@media (prefers-color-scheme: dark) {
    .testimonial-card {
        background: rgba(255, 255, 255, 0.03);
    }
}

/* Optional: Add subtle gradient border on hover */
.testimonial-card:hover {
    background: linear-gradient(145deg, var(--gray-800), var(--gray-900));
}
.testimonial-stars {
    color: #f5b042;
    margin-bottom: 16px;
    font-size: 0.875rem;
    letter-spacing: 2px;
}

.testimonial-title {
    font-size: 0.875rem;
    color: var(--text-muted);
    font-weight: normal;
    margin-top: 4px;
}
/* CTA Section */
.cta-section {
padding: 100px 0;
background: linear-gradient(135deg, var(--primary-dark), var(--gray-900));
text-align: center;
border-top: 1px solid var(--border);
}

.cta-content {
max-width: 700px;
margin: 0 auto;
}

.cta-content h2 {
font-family: var(--fira-font);
font-size: 2.5rem;
margin-bottom: 20px;

}

.cta-content p {
font-size: 1.2rem;
color: var(--text-secondary);
margin-bottom: 40px;
font-family: var(--fira-font);
}



/* Animation Classes */
.animate-fade-in {
opacity: 0;
transform: translateY(20px);
animation: fadeIn 1s ease-out forwards;
}

.delay-100 {
animation-delay: 0.1s;
}

.delay-200 {
animation-delay: 0.2s;
}

.delay-300 {
animation-delay: 0.3s;
}

@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

/* Responsive Styles */
@media (max-width: 1024px) {
.features-grid {
grid-template-columns: repeat(2, 1fr);
}

.footer-grid {
grid-template-columns: repeat(2, 1fr);
}
}

@media (max-width: 768px) {
body {
padding-top: 60px;
}

.header-container {
padding: 12px 0;
}

nav ul {
display: none;
}

.cta-button {
display: none;
}

.mobile-menu-btn {
display: block;
}

.hero h1 {
font-size: 2.5rem;
}

.hero-buttons {
flex-direction: column;
align-items: center;
}

.features-grid {
grid-template-columns: 1fr;
}

.testimonial-grid {
grid-template-columns: 1fr;
}

.diagram-flow {
flex-direction: column;
}

.flow-arrow {
transform: rotate(90deg);
margin: 10px 0;
}

.tab-headers {
flex-direction: column;
}

.footer-grid {
grid-template-columns: 1fr;
}

.footer-bottom {
flex-direction: column;
gap: 20px;
text-align: center;
}
}
/* ===== AUTHENTICATION STYLES ===== */
.auth-container {
width: 100%;
margin: 50px auto;
max-width: 1200px;
display: flex;
min-height: 600px;
background: var(--primary-light);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);
}
/* ===== AUTH LEFT SECTION - COMPLETE STYLES ===== */

.auth-left {
    flex: 1;
  background: linear-gradient(135deg, var(--primary-dark), var(--gray-900));
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    color: white;
}

/* Animated background pattern */
.auth-left::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23238636' fill-opacity='0.1' d='M0,224L48,213.3C96,203,192,181,288,160C384,139,480,117,576,122.7C672,128,768,160,864,170.7C960,181,1056,171,1152,165.3C1248,160,1344,160,1392,160L1440,160L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z'%3E%3C/path%3E%3C/svg%3E");
    background-size: cover;
    background-position: center;
    opacity: 0.5;
    pointer-events: none;
    animation: slowDrift 30s infinite alternate ease-in-out;
}

/* Floating security elements */
.auth-left::after {
    content: '';
    position: absolute;
    bottom: -100px;
    right: -100px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(52, 152, 219, 0.15), transparent 70%);
    border-radius: 50%;
    z-index: 1;
    animation: float 15s infinite alternate ease-in-out;
}

@keyframes slowDrift {
    0% { transform: scale(1) rotate(0deg); }
    100% { transform: scale(1.1) rotate(2deg); }
}

@keyframes float {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-30px, -30px); }
}

.auth-left-content {
    position: relative;
    z-index: 5;
    max-width: 550px;
    margin: 0 auto;
    width: 100%;
    animation: slideInUp 0.8s ease-out;
}

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

/* ===== LOGO STYLES ===== */
.auth-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 60px;
    position: relative;
}

.auth-logo-icon {
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.auth-logo-icon:hover {
    transform: scale(1.05);
}

.logo {
    display: inline-block;
    line-height: 0;
    text-decoration: none;
}

.logo-img {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    transition: box-shadow 0.3s ease;
}

.logo-img:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.auth-logo .app-name {
    font-weight: 800;
    font-size: 1.75rem;
    letter-spacing: -0.02em;
    color: white;
    background: linear-gradient(135deg, #fff, #f0f0f0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.auth-logo .tagline {
    font-size: 0.85rem;
    font-weight: 500;
    opacity: 0.7;
    color: white;
    padding-left: 8px;
    border-left: 2px solid rgba(255, 255, 255, 0.3);
    letter-spacing: -0.01em;
}

/* Separator dot (optional modern touch) */
.auth-logo .app-name::after {
    content: "•";
    display: inline-block;
    margin: 0 8px;
    font-weight: 400;
    opacity: 0.5;
    -webkit-text-fill-color: white;
    color: white;
}

/* ===== TYPOGRAPHY ===== */
.auth-left h2 {
    font-size: 3rem;
    margin-bottom: 20px;
    color: white;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #fff, #e0e0e0, #f5f5f5);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% auto;
    animation: shimmer 3s ease infinite;
}

@keyframes shimmer {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.auth-left p {
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 40px;
    font-size: 1.125rem;
    line-height: 1.6;
    max-width: 480px;
    font-weight: 400;
    backdrop-filter: blur(2px);
}

/* Enhanced Responsive Design */
@media (max-width: 768px) {
    .auth-logo {
        gap: 10px;
        margin-bottom: 40px;
        flex-wrap: wrap;
    }
    
    .logo-img {
        width: 40px;
        height: 40px;
    }
    
    .auth-logo .app-name {
        font-size: 1.4rem;
    }
    
    .auth-logo .tagline {
        font-size: 0.75rem;
        padding-left: 6px;
        margin-left: 0;
        border-left-width: 1.5px;
    }
    
    .auth-logo .app-name::after {
        margin: 0 6px;
    }
    
    .auth-left h2 {
        font-size: 2.2rem;
        margin-bottom: 12px;
    }
    
    .auth-left p {
        font-size: 1rem;
        margin-bottom: 30px;
        max-width: 100%;
    }
}

/* Small phones */
@media (max-width: 480px) {
    .auth-logo {
        gap: 8px;
    }
    
    .logo-img {
        width: 36px;
        height: 36px;
        border-radius: 8px;
    }
    
    .auth-logo .app-name {
        font-size: 1.2rem;
    }
    
    .auth-logo .tagline {
        font-size: 0.7rem;
        opacity: 0.6;
        width: 100%;
        border-left: none;
        padding-left: 0;
        margin-top: 4px;
    }
    
    .auth-left h2 {
        font-size: 1.8rem;
    }
}
/* ===== BENEFITS LIST ===== */
.auth-benefits {
    list-style: none;
    margin: 40px 0;
    padding: 0;
}

.auth-benefits li {
    margin-bottom: 28px;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.5;
    animation: fadeInItem 0.5s ease forwards;
    opacity: 0;
}

.auth-benefits li:nth-child(1) { animation-delay: 0.1s; }
.auth-benefits li:nth-child(2) { animation-delay: 0.2s; }
.auth-benefits li:nth-child(3) { animation-delay: 0.3s; }
.auth-benefits li:nth-child(4) { animation-delay: 0.4s; }

@keyframes fadeInItem {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.auth-benefits li i {
    color: #3498db;
    font-size: 1.4rem;
    min-width: 28px;
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid var(--accent);
    border-radius: 50%;  /* Use 50% instead of 50px */
    padding: 10px;
    
    /* CRITICAL: Make it inline-block */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;  /* Fixed width */
    height: 45px; /* Fixed height (same as width for perfect circle) */
    line-height: 1;  box-shadow: 0 0 15px rgba(0, 255, 157, 0.3);
            animation: glow 1.5s infinite;
}


        @keyframes glow {

            0%,
            100% {
                box-shadow: 0 0 5px #00f3ff;
            }

            50% {
                box-shadow: 0 0 20px #00f3ff;
            }
        }


.auth-benefits li:hover i {
    transform: scale(1.2);
    color: #5faee3;
}

.auth-benefits li div {
    flex: 1;
}

.auth-benefits li strong {
    display: block;
    color: white;
    font-size: 1.2rem;
    margin-bottom: 5px;
    font-weight: 600;
}

.auth-benefits li span {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.95rem;
    line-height: 1.6;
    display: block;
}

/* ===== STATS SECTION ===== */
.auth-stats {
    display: flex;
    justify-content: space-between;
    margin: 45px 0;
    padding: 25px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    animation: fadeIn 0.8s ease forwards;
    animation-delay: 0.5s;
    opacity: 0;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.stat-item {
    text-align: center;
    flex: 1;
    position: relative;
}

.stat-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
}

.stat-number {
    color: white;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 5px;
    background: linear-gradient(135deg, #fff, #3498db);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.02em;
}

.stat-label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}
.stat-item i {
    font-size: 28px;
    color: #4F46E5;
    margin-bottom: 10px;
    display: block;
}

/* ===== TESTIMONIAL SECTION ===== */
.auth-testimonial {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 28px;
    margin-top: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    animation: fadeIn 0.8s ease forwards;
    animation-delay: 0.6s;
    opacity: 0;
}

.auth-testimonial:hover {
    transform: translateY(-5px);
    box-shadow: 0 30px 50px rgba(0, 0, 0, 0.3);
    border-color: rgba(52, 152, 219, 0.3);
}

.auth-testimonial p {
    color: rgba(255, 255, 255, 0.95);
    font-style: italic;
    margin-bottom: 20px;
    font-size: 1rem;
    line-height: 1.7;
    quotes: "“" "”" "‘" "’";
}

.auth-testimonial p::before {
    content: "“";
    font-size: 1.5rem;
    color: #3498db;
    margin-right: 5px;
}

.auth-testimonial p::after {
    content: "”";
    font-size: 1.5rem;
    color: #3498db;
    margin-left: 5px;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 15px;
}

.testimonial-author img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #3498db;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.auth-testimonial:hover .testimonial-author img {
    border-color: #5faee3;
    transform: scale(1.05);
}

.testimonial-author div {
    display: flex;
    flex-direction: column;
}

.testimonial-author strong {
    color: white;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 3px;
}

.testimonial-author span {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 1200px) {
    .auth-left {
        padding: 50px;
    }
    
    .auth-left h2 {
        font-size: 2.2rem;
    }
}

@media (max-width: 992px) {
    .auth-left {
        padding: 40px;
        min-height: auto;
    }
    
    .auth-left-content {
        max-width: 100%;
    }
    
    .auth-left h2 {
        font-size: 2rem;
    }
    
    .stat-number {
        font-size: 1.8rem;
    }
}

@media (max-width: 768px) {
    .auth-left {
        padding: 35px 25px;
    }
    
    .auth-logo {
        font-size: 1.6rem;
        margin-bottom: 35px;
    }
    
    .auth-logo-icon {
        width: 46px;
        height: 46px;
        font-size: 24px;
    }
    
    .auth-left h2 {
        font-size: 1.8rem;
    }
    
    .auth-left p {
        font-size: 1rem;
        margin-bottom: 25px;
    }
    
    .auth-benefits li {
        margin-bottom: 22px;
        gap: 15px;
    }
    
    .auth-benefits li i {
        font-size: 1.2rem;
        min-width: 24px;
    }
    
    .auth-benefits li strong {
        font-size: 1.1rem;
    }
    
    .auth-benefits li span {
        font-size: 0.9rem;
    }
    
    .auth-stats {
        flex-direction: column;
        gap: 20px;
        padding: 20px 0;
    }
    
    .stat-item:not(:last-child)::after {
        display: none;
    }
    
    .stat-item {
        padding: 10px 0;
    }
    
    .stat-number {
        font-size: 1.6rem;
    }
    
    .auth-testimonial {
        padding: 20px;
    }
    
    .testimonial-author img {
        width: 44px;
        height: 44px;
    }
}

@media (max-width: 480px) {
    .auth-left {
        padding: 25px 20px;
    }
    
    .auth-logo {
        font-size: 1.4rem;
        gap: 12px;
    }
    
    .auth-logo-icon {
        width: 42px;
        height: 42px;
        font-size: 22px;
    }
    
    .auth-left h2 {
        font-size: 1.6rem;
    }
    
    .auth-benefits li {
        flex-direction: column;
        gap: 8px;
        margin-bottom: 25px;
    }
    
    .auth-benefits li i {
        margin-bottom: 5px;
    }
    
    .testimonial-author {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

/* ===== UTILITY CLASSES ===== */
.text-accent {
    color: #3498db;
}

.bg-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.03;
    pointer-events: none;
}

/* Smooth scrolling for the whole page */
html {
    scroll-behavior: smooth;
}

/* Better font rendering */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.auth-right {
flex: 1;
padding: 60px;
display: flex;
flex-direction: column;
justify-content: center;
}

.auth-tabs {
display: flex;
border-bottom: 1px solid var(--border);
margin-bottom: 30px;
}

.auth-tab {
padding: 15px 25px;
cursor: pointer;
font-weight: 500;
color: var(--text-secondary);
border-bottom: 3px solid transparent;
transition: all 0.3s;
}

.auth-tab.active {
color: var(--accent);
border-bottom-color: var(--accent);
}

.auth-form {
display: none;
}

.auth-form.active {
display: block;
}

.form-title {
font-size: 1.8rem;
margin-bottom: 10px;
}

.form-subtitle {
color: var(--text-secondary);
margin-bottom: 30px;
}

.form-group {
margin-bottom: 20px;
}

.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 500;
}

.form-group input {
width: 100%;
padding: 12px 15px;
border-radius: 6px;
border: 1px solid var(--border);
background: var(--primary);
color: var(--text-primary);
font-family: 'Inter', sans-serif;
transition: border-color 0.3s;
}

.form-group input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(35, 134, 54, 0.2);
}

.password-input {
position: relative;
}

.toggle-password {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
color: var(--text-muted);
cursor: pointer;
}

.form-options {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
}

.remember-me {
display: flex;
align-items: center;
gap: 8px;
}

.remember-me input {
width: auto;
}

.forgot-password {
color: var(--accent);
text-decoration: none;
font-size: 0.9rem;
}

.forgot-password:hover {
text-decoration: underline;
}

.auth-button {
width: 100%;
padding: 12px;
background: var(--accent);
color: white;
border: none;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
transition: background 0.3s;
margin-bottom: 20px;
font-family: 'Inter', sans-serif;
font-size: 1rem;
}

.auth-button:hover {
background: var(--accent-hover);
}

.auth-divider {
display: flex;
align-items: center;
margin: 25px 0;
}

.auth-divider::before,
.auth-divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--border);
}

.auth-divider span {
padding: 0 15px;
color: var(--text-muted);
font-size: 0.9rem;
}

.social-auth {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin-bottom: 25px;
}

.social-button {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 10px;
background: var(--primary);
border: 1px solid var(--border);
border-radius: 6px;
color: var(--text-primary);
cursor: pointer;
transition: background 0.3s;
font-family: 'Inter', sans-serif;
font-size: 0.9rem;
}

.social-button:hover {
background: var(--primary-light);
}

.auth-footer {
text-align: center;
margin-top: 30px;
color: var(--text-secondary);
}

.auth-footer a {
color: var(--accent);
text-decoration: none;
}

/* Forgot Password Form Styles */
#forgot-password-form {
display: none;
}

#forgot-password-form.active {
display: block;
}

.back-to-login {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 20px;
color: var(--accent);
text-decoration: none;
font-size: 0.9rem;
cursor: pointer;
}

.back-to-login:hover {
text-decoration: underline;
}

.message {
padding: 12px;
border-radius: 6px;
margin-bottom: 20px;
display: none;
}

.message.success {
background-color: rgba(35, 134, 54, 0.1);
color: var(--success);
border: 1px solid rgba(35, 134, 54, 0.2);
}

.message.error {
background-color: rgba(215, 58, 73, 0.1);
color: var(--error);
border: 1px solid rgba(215, 58, 73, 0.2);
}

/* Responsive Styles */
@media (max-width: 992px) {
.auth-container {
flex-direction: column;
margin: 20px auto;
max-width: 600px;
}

.auth-left {
padding: 40px;
}

.auth-right {
padding: 40px;
}
}

@media (max-width: 576px) {
.auth-container {
margin: 10px;
border-radius: 8px;
}

.auth-left, .auth-right {
padding: 30px 20px;
}

.auth-tabs {
flex-direction: column;
}

.auth-tab {
text-align: center;
}

.social-auth {
grid-template-columns: 1fr;
}

.form-options {
flex-direction: column;
align-items: flex-start;
gap: 15px;
}

.auth-logo {
font-size: 1.5rem;
}

.auth-left h2 {
font-size: 1.8rem;
}
}

.auth-footer a:hover {
text-decoration: underline;
}

/* ===== MISSION SECTION ===== */
.mission-section {
background: linear-gradient(
135deg, 
rgb(from var(--primary-dark) r g b / 0.9) 0%, 
rgb(from var(--primary) r g b / 0.85) 50%,
rgb(from var(--accent) r g b / 0.5) 100%
);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border-radius: 12px;
padding: 60px;
margin-bottom: 80px;
border: 1px solid var(--border);
}

.mission-content {
display: flex;
align-items: center;
gap: 60px;
}

.mission-text {
flex: 1;
}

.mission-text h2 {
font-size: 2.2rem;
margin-bottom: 20px;
}

.mission-text p {
font-size: 1.1rem;
color: var(--text-secondary);
margin-bottom: 30px;
}

.mission-image {
flex: 1;
background: var(--primary-dark);
height: 300px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--border);
}

/* ===== TEAM SECTION ===== */
.team-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}

.team-member {
background: var(--gray-800);
border-radius: 12px;
padding: 30px;
text-align: center;
transition: transform 0.3s, box-shadow 0.3s;
border: 1px solid var(--border);
}

.team-member:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
border-color: var(--accent);
}

.member-image {
width: 120px;
height: 120px;
border-radius: 50%;
background: var(--primary-dark);
margin: 0 auto 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
color: var(--accent);
border: 3px solid var(--accent);
}

.team-member h3 {
font-size: 1.5rem;
margin-bottom: 8px;
}

.team-member .role {
color: var(--accent);
font-weight: 500;
margin-bottom: 15px;
}

.team-member p {
color: var(--text-secondary);
margin-bottom: 20px;
}

.social-links {
display: flex;
justify-content: center;
gap: 15px;
}

.social-links a {
color: var(--text-secondary);
font-size: 1.2rem;
transition: color 0.3s;
}

.social-links a:hover {
color: var(--accent);
}

/* ===== VALUES SECTION ===== */
.values-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}

.value-card {
background: var(--gray-800);
border-radius: 12px;
padding: 30px;
border: 1px solid var(--border);
}

.value-icon {
background: var(--accent);
color: white;
width: 60px;
height: 60px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
margin-bottom: 20px;
}

.value-card h3 {
font-size: 1.5rem;
margin-bottom: 16px;
}

.value-card p {
color: var(--text-secondary);
}

/* ===== TIMELINE SECTION ===== */
.timeline {
position: relative;
max-width: 800px;
margin: 0 auto;
}

.timeline::after {
content: '';
position: absolute;
width: 4px;
background-color: var(--accent);
top: 0;
bottom: 0;
left: 50%;
margin-left: -2px;
}

.timeline-item {
padding: 10px 40px;
position: relative;
width: 50%;
box-sizing: border-box;
}

.timeline-item:nth-child(odd) {
left: 0;
}

.timeline-item:nth-child(even) {
left: 50%;
}

.timeline-content {
padding: 20px;
background-color: var(--gray-800);
border-radius: 12px;
border: 1px solid var(--border);
}

.timeline-date {
font-weight: 600;
color: var(--accent);
margin-bottom: 10px;
}

.timeline-content h3 {
margin-bottom: 10px;
}

.timeline-content p {
color: var(--text-secondary);
}

/* ===== CONTACT STYLES ===== */
.contact-header {
       background: linear-gradient(
        135deg, 
        rgb(from var(--primary-dark) r g b / 0.9) 0%, 
        rgb(from var(--primary) r g b / 0.85) 50%,
        rgb(from var(--accent) r g b / 0.5) 100%
    ), url('../img/contac-section.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.contact-options {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin-bottom: 80px;
}

.contact-card {
background: var(--gray-800);
border-radius: 12px;
padding: 30px;
text-align: center;
transition: transform 0.3s, box-shadow 0.3s;
border: 1px solid var(--border);
     background: linear-gradient(
        135deg, 
        rgb(from var(--primary-dark) r g b / 0.9) 0%, 
        rgb(from var(--primary) r g b / 0.85) 50%,
        rgb(from var(--accent) r g b / 0.5) 100%
    ), url('../img/card-bg.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.contact-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
border-color: var(--accent);
}

.contact-icon {
background: var(--accent);
color: white;
width: 70px;
height: 70px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
margin: 0 auto 20px;
}

.contact-card h3 {
font-size: 1.5rem;
margin-bottom: 15px;
}

.contact-card p {
color: var(--text-secondary);
margin-bottom: 20px;
}

.contact-link {
color: var(--accent);
text-decoration: none;
font-weight: 500;
display: inline-block;
margin-top: 10px;
}

.contact-link:hover {
text-decoration: underline;
}

.form-section {
     background: linear-gradient(
        -135deg, 
        rgb(from var(--primary-dark) r g b / 0.9) 0%, 
        rgb(from var(--primary) r g b / 0.85) 50%,
        rgb(from var(--accent) r g b / 0.5) 100%
    ), url('../img/contac-section.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
border-radius: 12px;
padding: 60px;
border: 1px solid var(--border);
}

.form-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
}

.form-info h2 {
font-size: 2.2rem;
margin-bottom: 20px;
}

.form-info p {
color: var(--text-secondary);
margin-bottom: 30px;
}

.info-item {
display: flex;
align-items: center;
margin-bottom: 20px;
}

.info-icon {
background: var(--accent);
color: white;
width: 40px;
height: 40px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
flex-shrink: 0;
}

.info-content h4 {
margin-bottom: 5px;
}

.info-content p {
color: var(--text-secondary);
margin: 0;
}

.contact-form {
background: var(--gray-800);
padding: 30px;
border-radius: 12px;
border: 1px solid var(--accent);
}

.form-group textarea,
.form-group select {
width: 100%;
padding: 12px 15px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--primary-dark);
color: var(--text-primary);
font-family: 'Inter', sans-serif;
}

.form-group textarea {
min-height: 120px;
resize: vertical;
}

.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}

.submit-btn {
background: var(--accent);
color: white;
border: none;
padding: 12px 25px;
border-radius: 6px;
font-weight: 500;
cursor: pointer;
transition: background 0.3s;
width: 100%;
font-size: 1rem;
}

.submit-btn:hover {
background: var(--accent-hover);
}

/* ===== FAQ SECTION ===== */
.faq-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;

}

.faq-item {
background: var(--gray-800);
border-radius: 12px;
padding: 25px;
border: 1px solid var(--accent);

  
}

.faq-item h3 {
font-size: 1.2rem;
margin-bottom: 15px;
display: flex;
align-items: center;
}

.faq-item h3 i {
color: var(--accent);
margin-right: 10px;
}

.faq-item p {
color: var(--text-secondary);
}
/* Map Section */
.map-section {
margin-top: 80px;
}

.map-container {
height: 400px;
background: var(--gray-800);
border-radius: 12px;
overflow: hidden;
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
}

.map-placeholder {
text-align: center;
color: var(--text-secondary);
}

.map-placeholder i {
font-size: 3rem;
margin-bottom: 20px;
color: var(--accent);
}

/* ===== DOCUMENTATION STYLES ===== */
.docs-container {
display: flex;
flex: 1;

}

.docs-sidebar {
width: var(--sidebar-width);
background: var(--primary-dark);
border-right: 1px solid var(--border);
padding: 30px 0;
height: calc(100vh - 70px);
position: sticky;
top: 70px;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color: var(--accent) transparent;
}
/* Custom scrollbar for sidebar */
.docs-sidebar::-webkit-scrollbar {
width: 4px;
}

.docs-sidebar::-webkit-scrollbar-track {
background: var(--primary-dark);
}

.docs-sidebar::-webkit-scrollbar-thumb {
background: var(--accent);
border-radius: 2px;
}

.docs-sidebar::-webkit-scrollbar-thumb:hover {
background: var(--accent-hover);
}

.sidebar-search {
padding: 0 25px 20px;
border-bottom: 1px solid var(--accent);
margin-bottom: 20px;
}

.search-box {
position: relative;
}

.search-box input {
width: 100%;
padding: 10px 15px 10px 40px;
border-radius: 6px;
border: 1px solid var(--accent);
background: var(--primary);
color: var(--text-primary);
font-family:var(--fira-font);
}

.search-box i {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: var(--text-muted);
}

.sidebar-section {
margin-bottom: 25px;
}

.sidebar-section h3 {
font-family: var(--fira-font);
padding: 0 25px;
margin-bottom: 15px;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-muted);
}

.sidebar-links {
list-style: none;
}

.sidebar-links li {
margin-bottom: 5px;
}

.sidebar-links a {
display: block;
padding: 8px 25px;
color: var(--text-secondary);
text-decoration: none;
transition: all 0.3s;
border-left: 3px solid transparent;
}

.sidebar-links a:hover {
background: var(--primary-light);
color: var(--text-primary);
}

.sidebar-links a.active {
background: var(--primary-light);
color: var(--accent);
border-left-color: var(--accent);
}

.docs-content {
flex: 1;
padding: 40px;
max-width: calc(100% - var(--sidebar-width));

}

.docs-header {
margin-bottom: 40px;
}

.docs-header h1 {
font-family: var(--fira-font);
font-size: 2.5rem;
margin-bottom: 15px;
}

.docs-header p {
font-family: var(--fira-font);
font-size: 1.2rem;
color: var(--text-secondary);
max-width: 800px;
}

.docs-section {
margin-bottom: 60px;
}

.docs-section h2 {
font-family: var(--fira-font);
font-size: 1.8rem;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 1px solid var(--border);
}

.docs-article {
background: var(--primary-light);
border-radius: 8px;
padding: 25px;
margin-bottom: 30px;
border: 1px solid var(--border);
}

.docs-article h3 {
font-family: var(--fira-font);
font-size: 1.4rem;
margin-bottom: 15px;
color: var(--accent);
}

.docs-article p {
font-family: var(--fira-font);
color: var(--text-secondary);
margin-bottom: 15px;
}

.code-block {
background: var(--primary-dark);
border-radius: 6px;
padding: 16px;
margin: 20px 0;
overflow-x: auto;
border: 1px solid var(--border);
}

.code-block pre {
margin: 0;
font-family: 'Fira Code', monospace;
font-size: 0.9rem;
line-height: 1.5;
}

.code-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}

.code-header span {
font-size: 0.9rem;
color: var(--text-muted);
}

.copy-btn {
background: var(--primary-light);
color: var(--text-secondary);
border: 1px solid var(--border);
padding: 5px 10px;
border-radius: 4px;
font-size: 0.8rem;
cursor: pointer;
transition: all 0.3s;
}

.copy-btn:hover {
background: var(--accent);
color: white;
}

.note {
background: rgba(158, 202, 237, 0.1);
border-left: 4px solid #58a6ff;
padding: 15px;
margin: 20px 0;
border-radius: 4px;
}

.warning {
background: rgba(237, 196, 158, 0.1);
border-left: 4px solid var(--warning);
padding: 15px;
margin: 20px 0;
border-radius: 4px;
}

/* Code Syntax Highlighting */
.code-keyword {
color: #ff7b72;
}

.code-function {
color: #d2a8ff;
}

.code-string {
color: #a5d6ff;
}

.code-comment {
color: #8b949e;
}

.code-number {
color: #79c0ff;
}

.code-operator {
color: #ff7b72;
}

/* ===== PRICING STYLES ===== */
.pricing-toggle {
display: flex;
justify-content: center;
align-items: center;
margin: 40px 0;
gap: 15px;
}

.toggle-label {
color: var(--text-secondary);
font-weight: 500;
}

.toggle-switch {
position: relative;
display: inline-block;
width: 60px;
height: 30px;
}

.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}

.toggle-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--gray-700);
transition: .4s;
border-radius: 34px;
}

.toggle-slider:before {
position: absolute;
content: "";
height: 22px;
width: 22px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
border-radius: 50%;
}

input:checked + .toggle-slider {
background-color: var(--accent);
}

input:checked + .toggle-slider:before {
transform: translateX(30px);
}

.discount-badge {
background: var(--accent);
color: white;
padding: 3px 8px;
border-radius: 12px;
font-size: 0.8rem;
font-weight: 600;
margin-left: 10px;
}

.pricing-plans {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin: 60px 0;
}

.pricing-card {
background: var(--gray-800);
border-radius: 12px;
padding: 40px 30px;
text-align: center;
transition: transform 0.3s, box-shadow 0.3s;
border: 1px solid var(--border);
position: relative;
display: flex;
flex-direction: column;
}

.pricing-card.popular {
border-color: var(--accent);
transform: scale(1.03);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.popular-badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: var(--accent);
color: white;
padding: 5px 15px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
}

.plan-name {
font-size: 1.5rem;
margin-bottom: 15px;
color: var(--text-primary);
}

.plan-description {
color: var(--text-secondary);
margin-bottom: 25px;
min-height: 40px;
}

.plan-price {
margin-bottom: 25px;
}

.price-amount {
font-size: 3rem;
font-weight: 700;
color: var(--text-primary);
font-family: var(--fira-font);
}

.price-period {
color: var(--text-secondary);
font-size: 1rem;
}

.price-note {
color: var(--text-muted);
font-size: 0.9rem;
margin-top: 5px;
}

.plan-features {
margin: 25px 0;
text-align: left;
flex-grow: 1;
}

.feature-item {
display: flex;
align-items: center;
margin-bottom: 12px;
}

.feature-item i {
color: var(--accent);
margin-right: 10px;
}

.feature-item.disabled {
color: var(--text-muted);
}

.feature-item.disabled i {
color: var(--text-muted);
}

.plan-button {
margin-top: auto;
padding: 12px 20px;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
border: none;
font-size: 1rem;
}
.contact-button{
margin-top: auto;
padding: 12px 20px;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
border: none;
font-size: 1rem;
}
.btn-primary {
background: var(--accent);
color: white;
}

.btn-primary:hover {
background: var(--accent-hover);
}

.btn-secondary {
background: transparent;
color: var(--text-primary);
border: 1px solid var(--border);
}

.btn-secondary:hover {
background: var(--gray-700);
}

.comparison-table {
width: 100%;
border-collapse: collapse;
background: var(--gray-800);
border-radius: 12px;
overflow: hidden;
border: 1px solid var(--border);
}

.comparison-table th,
.comparison-table td {
padding: 15px 20px;
text-align: left;
border-bottom: 1px solid var(--border);
}

.comparison-table th {
background: var(--gray-900);
font-weight: 600;
}

.comparison-table tr:last-child td {
border-bottom: none;
}

.feature-category {
background: var(--primary-light);
font-weight: 600;
}

.feature-name {
font-weight: 500;
}

.checkmark {
color: var(--accent);
font-weight: 600;
}

.cross {
color: var(--text-muted);
}

/* ===== CTA SECTION ===== */
.cta-sections {
padding: 80px 0;
text-align: center;
   background: linear-gradient(
        135deg, 
        rgb(from var(--primary-dark) r g b / 0.9) 0%, 
        rgb(from var(--primary) r g b / 0.85) 50%,
        rgb(from var(--accent) r g b / 0.5) 100%
    ), url('../img/cta-section.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.cta-content {
max-width: 700px;
margin: 0 auto;
}

.cta-content h2 {
font-size: 2.5rem;
margin-bottom: 20px;
}

.cta-content p {
font-size: 1.2rem;
color: var(--text-secondary);
margin-bottom: 40px;
}

.cta-buttons {
display: flex;
gap: 20px;
justify-content: center;
}
.cta-button {
background: var(--accent);
color: white;
border: none;
padding: 10px 20px;
border-radius: 6px;
font-weight: 500;
cursor: pointer;
transition: background 0.3s;
margin-left: 30px;
}

.cta-button:hover {
background: var(--accent-hover);
}

/* ===== FOOTER ===== */
footer {
background: var(--primary-dark);
border-top: 1px solid var(--border);
padding: 60px 0 30px;
/* margin-top: 80px; */
}

.footer-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px;
margin-bottom: 40px;
}

.footer-column h3 {
font-size: 1.125rem;
margin-bottom: 20px;
color: white;
}

.footer-links {
list-style: none;
}

.footer-links li {
margin-bottom: 12px;
}

.footer-links a {
color: var(--gray-400);
text-decoration: none;
transition: color 0.3s;
}

.footer-links a:hover {
color: white;
}

.footer-bottom {
border-top: 1px solid var(--gray-700);
padding-top: 30px;
display: flex;
justify-content: space-between;
align-items: center;
}

.social-links {
display: flex;
gap: 20px;
}

.social-links a {
color: var(--gray-400);
font-size: 1.25rem;
transition: color 0.3s;
}

.social-links a:hover {
color: white;
}

/* ===== RESPONSIVE STYLES ===== */
@media (max-width: 1024px) {
.team-grid,
.values-grid,
.contact-options,
.pricing-plans {
grid-template-columns: repeat(2, 1fr);
}

.form-container {
grid-template-columns: 1fr;
gap: 40px;
}

.faq-grid {
grid-template-columns: 1fr;
}

.footer-grid {
grid-template-columns: repeat(2, 1fr);
}

.docs-sidebar {
width: 240px;
}

.docs-content {
max-width: calc(100% - 240px);
}
}

@media (max-width: 768px) {
body {
padding-top: 60px;
}

.header-container {
padding: 12px 0;
}

nav ul {
display: none;
}

.cta-button {
display: none;
}

.mobile-menu-btn {
display: block;
}

.page-header h1 {
font-size: 2.2rem;
}

.team-grid,
.values-grid,
.contact-options,
.pricing-plans {
grid-template-columns: 1fr;
}

.pricing-card.popular {
transform: scale(1);
}

.form-row {
grid-template-columns: 1fr;
}

.form-section {
padding: 30px;
}

.mission-content {
flex-direction: column;
}

.timeline::after {
left: 31px;
}

.timeline-item {
width: 100%;
padding-left: 70px;
padding-right: 25px;
}

.timeline-item:nth-child(even) {
left: 0;
}

.docs-container {
flex-direction: column;
}

.docs-sidebar {
width: 100%;
height: auto;
position: static;
border-right: none;
border-bottom: 1px solid var(--border);
}

.docs-content {
max-width: 100%;
padding: 30px 20px;
}

.comparison-table {
display: block;
overflow-x: auto;
}

.cta-buttons {
flex-direction: column;
align-items: center;
}
}

@media (max-width: 480px) {
.auth-left {
padding: 30px 20px;
}

.auth-right {
padding: 30px 20px;
}

.footer-grid {
grid-template-columns: 1fr;
}

.footer-bottom {
flex-direction: column;
gap: 20px;
text-align: center;
}
}

/* Page Loader Styles */
.page-loader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--primary-dark);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
transition: opacity 0.5s ease-out;
}

.page-loader.hidden {
opacity: 0;
pointer-events: none;
}

.loader-content {
text-align: center;
color: var(--text-primary);
}

.gateman-loader {
width: 80px;
height: 80px;
margin: 0 auto 20px;
position: relative;
}

.gateman-loader::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 3px solid transparent;
border-top: 3px solid var(--accent);
border-radius: 50%;
animation: spin 1s linear infinite;
}

.gateman-loader::after {
content: '';
position: absolute;
top: 10px;
left: 10px;
width: 60px;
height: 60px;
border: 3px solid transparent;
border-bottom: 3px solid var(--accent-hover);
border-radius: 50%;
animation: spin 0.8s linear infinite reverse;
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

.loader-content h3 {
font-size: 1.5rem;
margin-bottom: 10px;
color: var(--text-primary);
}

.loader-content p {
color: var(--text-secondary);
font-size: 1rem;
}

.loading-dots::after {
content: '';
animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {
0%, 20% { content: '.'; }
40% { content: '..'; }
60% { content: '...'; }
80%, 100% { content: ''; }
}

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

.logo {
font-family: 'Fira Code', monospace;
font-weight: 600;
letter-spacing: 0.5px;
}

.security-heading, .section-title h2 {
font-family: 'Fira Code', monospace;
font-weight: 500;
}

.code-block, .terminal, .command {
font-family: 'Fira Code', monospace;
font-weight: 400;
}


/* ===== INTERGRATION PAGE ===== */
/* Integration Categories */
.integration-categories {
padding: 80px 0;
}

.category-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}

.category-card {
background: var(--primary-light);
border-radius: 12px;
padding: 30px;
border: 1px solid var(--border);
transition: transform 0.3s;
}

.category-card:hover {
transform: translateY(-5px);
}

.category-icon {
background: var(--accent);
color: white;
width: 60px;
height: 60px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
margin-bottom: 20px;
}

.category-card h3 {
font-size: 1.5rem;
margin-bottom: 15px;
}

.integration-list {
list-style: none;
margin-top: 20px;
}

.integration-list li {
margin-bottom: 8px;
display: flex;
align-items: center;
}

.integration-list i {
color: var(--accent);
margin-right: 10px;
}

/* HElp  */

.search-section {
background: var(--primary-light);
border-radius: 12px;
padding: 30px;
border: 1px solid var(--border);
margin-bottom: 40px;
}

.search-box {
position: relative;
max-width: 600px;
margin: 0 auto;
}

.search-box input {
width: 100%;
padding: 15px 50px 15px 20px;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--primary-dark);
color: var(--text-primary);
font-size: 1rem;
}

.search-box i {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
color: var(--text-muted);
}

.categories-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 25px;
margin-bottom: 50px;
}

.category-card {
background: var(--primary-light);
border-radius: 12px;
padding: 25px;
border: 1px solid var(--border);
transition: transform 0.3s;
}

.category-card:hover {
transform: translateY(-3px);
}

.category-icon {
background: var(--accent);
color: white;
width: 50px;
height: 50px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
margin-bottom: 15px;
}

.category-card h3 {
font-size: 1.3rem;
margin-bottom: 10px;
}

.articles-list {
list-style: none;
}

.articles-list li {
margin-bottom: 8px;
}

.articles-list a {
color: var(--text-secondary);
text-decoration: none;
display: flex;
align-items: center;
gap: 8px;
}

.articles-list a:hover {
color: var(--accent);
}

.faq-section {
margin-bottom: 50px;
}

.faq-section h2 {
font-size: 2rem;
margin-bottom: 25px;
text-align: center;
}

.faq-item {
background: var(--primary-light);
border-radius: 8px;
margin-bottom: 15px;
border: 1px solid var(--border);
overflow: hidden;
}

.faq-question {
padding: 20px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 500;
}

.faq-answer {
padding: 0 20px;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-item.active .faq-answer {
padding: 0 20px 20px;
max-height: 200px;
}

.contact-section {
background: var(--primary-light);
border-radius: 12px;
padding: 30px;
border: 1px solid var(--border);
text-align: center;
}

.contact-section h2 {
margin-bottom: 20px;
}

.contact-buttons {
display: flex;
gap: 15px;
justify-content: center;
flex-wrap: wrap;
}

.contact-btn {
padding: 12px 25px;
border: 1px solid var(--accent);
border-radius: 6px;
color: var(--accent);
text-decoration: none;
transition: all 0.3s;
}

.contact-btn:hover {
background: var(--accent);
color: white;
}

@media (max-width: 768px) {
.categories-grid {
grid-template-columns: 1fr;
}

.contact-buttons {
flex-direction: column;
align-items: center;
}

.contact-btn {
width: 200px;
}
}

/* ==== Community ==== */
.community-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
margin-bottom: 60px;
}

.community-card {
background: var(--primary-light);
border-radius: 12px;
padding: 30px;
border: 1px solid var(--border);
transition: transform 0.3s, box-shadow 0.3s;
}

.community-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.card-icon {
background: var(--accent);
color: white;
width: 60px;
height: 60px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
margin-bottom: 20px;
}

.community-card h3 {
font-size: 1.5rem;
margin-bottom: 15px;
}

.community-card p {
color: var(--text-secondary);
margin-bottom: 20px;
}

.card-link {
color: var(--accent);
text-decoration: none;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 8px;
}

.card-link:hover {
text-decoration: underline;
}

.events-section {
background: var(--primary-light);
border-radius: 12px;
padding: 40px;
border: 1px solid var(--border);
margin-bottom: 60px;
}

.events-section h2 {
font-size: 2rem;
margin-bottom: 30px;
text-align: center;
}

.events-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
}

.event-card {
background: var(--primary-dark);
border-radius: 8px;
padding: 20px;
border: 1px solid var(--border);
}

.event-date {
color: var(--accent);
font-weight: 600;
margin-bottom: 10px;
}

.event-card h4 {
margin-bottom: 10px;
}

.contributors-section {
text-align: center;
}

.contributors-section h2 {
font-size: 2rem;
margin-bottom: 30px;
}

.contributors-grid {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 40px;
}

.contributor {
background: var(--primary-light);
border-radius: 50%;
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
border: 3px solid var(--accent);
font-weight: 600;
}

@media (max-width: 768px) {
.community-grid {
grid-template-columns: 1fr;
}


}
/* ===== PRIVACY ===== */
.last-updated {
color: var(--text-muted);
font-size: 0.9rem;
}

.policy-section {
margin-bottom: 40px;
}

.policy-section h2 {
font-size: 1.5rem;
margin-bottom: 20px;
color: var(--accent);
}

.policy-section p {
margin-bottom: 15px;
color: var(--text-secondary);
}

.policy-section ul {
margin: 15px 0;
padding-left: 20px;
color: var(--text-secondary);
}

.policy-section li {
margin-bottom: 8px;
}

.contact-info {
background: var(--primary-light);
border-radius: 8px;
padding: 25px;
border: 1px solid var(--border);
margin-top: 40px;
}

.contact-info h3 {
margin-bottom: 15px;
color: var(--accent);
}

@media (max-width: 768px) {


.policy-section h2 {
font-size: 1.3rem;
}
}

/* ===== TERMS ===== */
.last-updated {
color: var(--text-muted);
font-size: 0.9rem;
}

.terms-section {
margin-bottom: 40px;
}

.terms-section h2 {
font-size: 1.5rem;
margin-bottom: 20px;
color: var(--accent);
}

.terms-section p {
margin-bottom: 15px;
color: var(--text-secondary);
}

.terms-section ul {
margin: 15px 0;
padding-left: 20px;
color: var(--text-secondary);
}

.terms-section li {
margin-bottom: 8px;
}

.important-note {
background: var(--primary-light);
border-left: 4px solid var(--accent);
padding: 20px;
margin: 25px 0;
border-radius: 4px;
}

@media (max-width: 768px) {


.terms-section h2 {
font-size: 1.3rem;
}
}

/* ===== SECURITY ===== */
.security-features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-bottom: 60px;
}

.feature-card {
background: var(--primary-light);
border-radius: 12px;
padding: 30px;
border: 1px solid var(--border);
transition: transform 0.3s, box-shadow 0.3s;
}

.feature-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.feature-icon {
background: var(--accent);
color: white;
width: 60px;
height: 60px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
margin-bottom: 20px;
}

.feature-card h3 {
font-size: 1.5rem;
margin-bottom: 15px;
}

.feature-card p {
color: var(--text-secondary);
margin-bottom: 20px;
}

.feature-list {
list-style: none;
}

.feature-list li {
margin-bottom: 8px;
display: flex;
align-items: center;
}

.feature-list i {
color: var(--accent);
margin-right: 10px;
}

.compliance-section {
background: var(--primary-light);
border-radius: 12px;
padding: 40px;
border: 1px solid var(--border);
margin-bottom: 60px;
}

.compliance-section h2 {
font-size: 2rem;
margin-bottom: 30px;
text-align: center;
}

.compliance-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}

.compliance-item {
text-align: center;
padding: 20px;
}

.compliance-icon {
background: var(--accent);
color: white;
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
margin: 0 auto 15px;
}

.security-standards {
margin-bottom: 60px;
}

.standards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 25px;
}

.standard-card {
background: var(--primary-light);
border-radius: 8px;
padding: 25px;
border: 1px solid var(--border);
}

.standard-card h3 {
color: var(--accent);
margin-bottom: 15px;
}

.standard-card ul {
list-style: none;
color: var(--text-secondary);
}

.standard-card li {
margin-bottom: 8px;
padding-left: 20px;
position: relative;
}

.standard-card li:before {
content: "•";
color: var(--accent);
position: absolute;
left: 0;
}

.contact-security {
background: var(--primary-light);
border-radius: 12px;
padding: 40px;
border: 1px solid var(--border);
text-align: center;
}

.contact-security h2 {
margin-bottom: 20px;
}

.security-contact {
color: var(--accent);
font-size: 1.2rem;
font-weight: 600;
}

@media (max-width: 768px) {
.security-features {
grid-template-columns: 1fr;
}

.compliance-grid {
grid-template-columns: 1fr 1fr;
}

.standards-grid {
grid-template-columns: 1fr;
}


}
/* ===== API SECTION ===== */
.api-section {
padding: 60px 0;
}

.endpoint {
background: var(--primary-light);
border-radius: 8px;
padding: 20px;
margin-bottom: 30px;
border: 1px solid var(--border);
}

.endpoint-header {
display: flex;
align-items: center;
margin-bottom: 15px;
}

.method {
padding: 5px 10px;
border-radius: 4px;
font-weight: 600;
margin-right: 15px;
}

.get {
background: #238636;
color: white;
}

.post {
background: #d29922;
color: white;
}

.put {
background: #db61a2;
color: white;
}

.delete {
background: #f85149;
color: white;
}

.code-block {
background: var(--primary-dark);
border-radius: 6px;
padding: 15px;
margin: 15px 0;
font-family: 'Courier New', monospace;
border: 1px solid var(--border);
}