@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;500;600;700&family=Orbitron:wght@400;500;600;700;800;900&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

body{
  background:rgba(8,14,10,1);
  color:rgba(220,228,222,1);
  font-family:'Exo 2',sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}

h1,h2,h3,h4,h5,h6{font-family:'Orbitron',sans-serif}

::selection{background:rgba(0,160,70,0.3);color:rgba(255,255,255,1)}

::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:rgba(8,14,10,1)}
::-webkit-scrollbar-thumb{background:rgba(30,80,45,1);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:rgba(0,180,80,1)}

a{text-decoration:none;color:inherit}

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

.container{max-width:1400px;margin:0 auto;padding:0 1rem}

.main-nav{
  position:sticky;top:0;z-index:50;
  background:rgba(8,14,10,0.95);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(20,55,32,1);
}

.nav-inner{
  display:flex;align-items:center;justify-content:space-between;height:56px;
}

.logo{
  font-family:'Orbitron',sans-serif;font-size:1.25rem;font-weight:700;
  color:rgba(0,180,80,1);letter-spacing:0.1em;white-space:nowrap;
  text-shadow:0 0 7px rgba(0,180,80,0.8),0 0 20px rgba(0,180,80,0.4),0 0 40px rgba(0,180,80,0.2);
}

.nav-desktop{display:none;align-items:center;gap:2px}
@media(min-width:1024px){.nav-desktop{display:flex}.mobile-toggle{display:none!important}}

.nav-link{
  display:flex;align-items:center;gap:4px;padding:8px 12px;font-size:0.875rem;
  color:rgba(220,228,222,0.8);background:none;border:none;cursor:pointer;
  font-family:'Exo 2',sans-serif;font-weight:500;white-space:nowrap;
  transition:color 0.2s;
}
.nav-link:hover{color:rgba(0,180,80,1)}

.dropdown{position:relative}
.dropdown-menu{
  display:none;position:absolute;top:100%;left:0;min-width:200px;
  background:rgba(12,22,16,1);border:1px solid rgba(20,55,32,1);
  border-radius:8px;padding:8px 0;z-index:50;
  box-shadow:0 0 8px rgba(0,180,80,0.3),0 0 20px rgba(0,180,80,0.1),0 8px 32px rgba(0,0,0,0.5);
}
.dropdown:hover .dropdown-menu{display:block}
.dropdown-menu a{
  display:block;padding:8px 16px;font-size:0.875rem;
  color:rgba(220,228,222,0.7);transition:all 0.2s;white-space:nowrap;
}
.dropdown-menu a:hover{color:rgba(0,180,80,1);background:rgba(0,180,80,0.05)}

.mobile-toggle{
  display:flex;background:none;border:none;color:rgba(220,228,222,1);
  padding:8px;cursor:pointer;
}
@media(min-width:1024px){.mobile-toggle{display:none}}

.mobile-menu{
  display:none;background:rgba(12,22,16,1);border-top:1px solid rgba(20,55,32,1);
  max-height:80vh;overflow-y:auto;
}
.mobile-menu.open{display:block}
@media(min-width:1024px){.mobile-menu{display:none!important}}

.mobile-menu-item{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;font-size:0.875rem;color:rgba(220,228,222,0.8);
  border-bottom:1px solid rgba(20,55,32,0.5);cursor:pointer;
  background:none;border-left:none;border-right:none;border-top:none;
  width:100%;font-family:'Exo 2',sans-serif;text-align:left;
}
.mobile-menu-item:hover{color:rgba(0,180,80,1)}

.mobile-submenu{display:none;background:rgba(15,28,18,0.5)}
.mobile-submenu.open{display:block}
.mobile-submenu a{
  display:block;padding:10px 32px;font-size:0.875rem;
  color:rgba(220,228,222,0.6);border-bottom:1px solid rgba(20,55,32,0.3);
  transition:color 0.2s;
}
.mobile-submenu a:hover{color:rgba(0,180,80,1)}

.breadcrumbs{
  display:flex;align-items:center;gap:4px;font-size:0.875rem;
  color:rgba(130,150,135,1);margin-bottom:24px;flex-wrap:wrap;
}
.breadcrumbs a{transition:color 0.2s}
.breadcrumbs a:hover{color:rgba(0,180,80,1)}
.breadcrumbs .sep{display:flex;align-items:center}
.breadcrumbs .current{color:rgba(220,228,222,0.7)}

.page-container{padding:24px 0}
.page-layout{display:flex;flex-direction:column;gap:32px}
@media(min-width:1024px){.page-layout{flex-direction:row}}
.page-main{flex:1;min-width:0}
.page-sidebar{width:100%}
@media(min-width:1024px){.page-sidebar{width:288px;flex-shrink:0}}

.page-title{
  font-family:'Orbitron',sans-serif;font-weight:900;margin-bottom:24px;
  font-size:1.875rem;
}
@media(min-width:768px){.page-title{font-size:2.25rem}}

.title-pink{
  color:rgba(0,180,80,1);
  text-shadow:0 0 7px rgba(0,180,80,0.8),0 0 20px rgba(0,180,80,0.4),0 0 40px rgba(0,180,80,0.2);
}
.title-cyan{
  color:rgba(140,200,60,1);
  text-shadow:0 0 7px rgba(140,200,60,0.8),0 0 20px rgba(140,200,60,0.4),0 0 40px rgba(140,200,60,0.2);
}
.title-purple{
  color:rgba(0,150,100,1);
  text-shadow:0 0 7px rgba(0,150,100,0.8),0 0 20px rgba(0,150,100,0.4);
}

.content-text{color:rgba(220,228,222,0.9);line-height:1.75;font-size:1rem}
.content-text p{margin-bottom:16px}
.content-text h2{
  font-family:'Orbitron',sans-serif;font-size:1.25rem;font-weight:700;
  color:rgba(0,180,80,1);margin-top:32px;margin-bottom:16px;
}
@media(min-width:768px){.content-text h2{font-size:1.5rem}}
.content-text h3{
  font-family:'Orbitron',sans-serif;font-size:1.125rem;font-weight:600;
  color:rgba(140,200,60,1);margin-top:24px;margin-bottom:12px;
}
@media(min-width:768px){.content-text h3{font-size:1.25rem}}
.content-text b,.content-text strong{color:rgba(0,180,80,1);font-weight:600}
.content-text a{
  color:rgba(140,200,60,1);text-decoration:underline;
  text-underline-offset:2px;text-decoration-color:rgba(140,200,60,0.3);
  transition:color 0.2s,text-decoration-color 0.2s;
}
.content-text a:hover{color:rgba(0,180,80,1);text-decoration-color:rgba(0,180,80,0.5)}
.content-text ul{list-style:disc;list-style-position:inside;margin-bottom:16px}
.content-text ul li{margin-bottom:4px}
.content-text ol{list-style:decimal;list-style-position:inside;margin-bottom:16px}
.content-text ol li{margin-bottom:4px}
.content-text img{width:100%;border-radius:8px;margin:24px 0;border:1px solid rgba(20,55,32,1)}

.sidebar{display:flex;flex-direction:column;gap:24px}
.sidebar-box{
  background:rgba(12,22,16,1);border-radius:8px;border:1px solid rgba(20,55,32,1);padding:16px;
}
.sidebar-box-pink{
  box-shadow:0 0 8px rgba(0,180,80,0.3),0 0 20px rgba(0,180,80,0.1),inset 0 0 8px rgba(0,180,80,0.05);
}
.sidebar-title{
  font-family:'Orbitron',sans-serif;font-size:0.75rem;font-weight:700;
  text-transform:uppercase;letter-spacing:0.1em;margin-bottom:12px;
}
.sidebar-title-pink{color:rgba(0,180,80,1)}
.sidebar-title-cyan{color:rgba(140,200,60,1)}
.sidebar-links{display:flex;flex-direction:column;gap:8px}
.sidebar-links a{
  display:block;font-size:0.875rem;color:rgba(220,228,222,0.7);
  padding:4px 0;border-bottom:1px solid rgba(20,55,32,0.3);transition:color 0.2s;
}
.sidebar-links a:last-child{border-bottom:none}
.sidebar-links a:hover{color:rgba(0,180,80,1)}
.sidebar-sections a:hover{color:rgba(140,200,60,1)}

.main-footer{
  background:rgba(12,22,16,1);border-top:1px solid rgba(20,55,32,1);margin-top:64px;
}
.footer-inner{padding:40px 0}
.footer-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px}
@media(min-width:768px){.footer-grid{grid-template-columns:repeat(4,1fr)}}
.footer-title{
  font-family:'Orbitron',sans-serif;font-size:0.875rem;font-weight:700;margin-bottom:12px;
}
.footer-title-pink{color:rgba(0,180,80,1)}
.footer-title-cyan{color:rgba(140,200,60,1)}
.footer-links{display:flex;flex-direction:column;gap:4px}
.footer-links a{font-size:0.875rem;color:rgba(130,150,135,1);transition:color 0.2s}
.footer-links a:hover{color:rgba(0,180,80,1)}
.footer-cyan a:hover{color:rgba(140,200,60,1)}
.footer-bottom{
  margin-top:32px;padding-top:24px;border-top:1px solid rgba(20,55,32,1);
  text-align:center;font-size:0.875rem;color:rgba(130,150,135,1);
}

.hero{
  position:relative;min-height:400px;height:70vh;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
@media(min-width:768px){.hero{min-height:500px}}
.hero-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0.4;
}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(8,14,10,1),rgba(8,14,10,0.6),transparent);
}
.hero-content{
  position:relative;z-index:10;text-align:center;padding:0 16px;max-width:56rem;
}
.hero-title{
  font-family:'Orbitron',sans-serif;font-weight:900;
  color:rgba(0,180,80,1);margin-bottom:16px;font-size:1.875rem;
  text-shadow:0 0 7px rgba(0,180,80,0.8),0 0 20px rgba(0,180,80,0.4),0 0 40px rgba(0,180,80,0.2);
  animation:fadeIn 0.4s ease-out;
}
@media(min-width:640px){.hero-title{font-size:2.25rem}}
@media(min-width:768px){.hero-title{font-size:3.75rem}}
@media(min-width:1024px){.hero-title{font-size:4.5rem}}

.hero-sub{font-size:1.125rem;color:rgba(220,228,222,0.8);margin-bottom:8px}
@media(min-width:640px){.hero-sub{font-size:1.25rem}}
@media(min-width:768px){.hero-sub{font-size:1.5rem}}

.hero-desc{color:rgba(130,150,135,1);font-size:1rem;max-width:42rem;margin:0 auto}
@media(min-width:768px){.hero-desc{font-size:1.125rem}}

.text-accent{color:rgba(140,200,60,1);text-shadow:0 0 7px rgba(140,200,60,0.8),0 0 20px rgba(140,200,60,0.4)}
.text-primary{color:rgba(0,180,80,1)}
.text-purple{color:rgba(0,150,100,1);text-shadow:0 0 7px rgba(0,150,100,0.8),0 0 20px rgba(0,150,100,0.4)}

.cards-grid{
  display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:48px;
}
@media(min-width:640px){.cards-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.cards-grid{grid-template-columns:repeat(3,1fr);gap:24px}}
@media(min-width:768px){.cards-grid{margin-bottom:64px}}

.card{
  display:block;background:rgba(12,22,16,1);border:1px solid rgba(20,55,32,1);
  border-radius:8px;padding:20px;transition:all 0.3s;
}
@media(min-width:768px){.card{padding:24px}}
.card:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 30px rgba(0,180,80,0.15),0 0 15px rgba(0,180,80,0.1);
}
.card-pink{box-shadow:0 0 8px rgba(0,180,80,0.3),0 0 20px rgba(0,180,80,0.1),inset 0 0 8px rgba(0,180,80,0.05)}
.card-cyan{box-shadow:0 0 8px rgba(140,200,60,0.3),0 0 20px rgba(140,200,60,0.1),inset 0 0 8px rgba(140,200,60,0.05)}
.card-title{
  font-family:'Orbitron',sans-serif;font-size:1rem;font-weight:700;
  color:rgba(0,180,80,1);margin-bottom:8px;
}
@media(min-width:768px){.card-title{font-size:1.125rem}}
.card-desc{color:rgba(130,150,135,1);font-size:0.875rem}

.reveal{opacity:0;transform:translateY(30px);transition:opacity 0.6s ease-out,transform 0.6s ease-out}
.reveal.visible{opacity:1;transform:translateY(0)}

.ext-btn{
  display:inline-block;padding:12px 28px;margin:18px 8px 18px 0;
  background:rgba(0,180,80,0.15);border:1px solid rgba(0,180,80,0.5);
  color:rgba(0,180,80,1);font-family:'Orbitron',sans-serif;font-size:0.875rem;
  font-weight:600;border-radius:6px;cursor:pointer;transition:all 0.25s;
  text-decoration:none;
}
.ext-btn:hover{
  background:rgba(0,180,80,0.3);border-color:rgba(0,180,80,0.8);
  box-shadow:0 0 12px rgba(0,180,80,0.3);
  color:rgba(255,255,255,1);
}

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