


html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}
*, *::before, *::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background-color: #0a0f24;
  color: #e5e5e5;
  line-height: 1.6;
}


.navbar {
  background-color: #0d1b2a;
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 1000;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  padding: 0.5em 0;
}
.navbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  width: 90%;
  max-width: 1100px;
  margin: 0 auto;
}


.logo-title {
  display: flex;
  align-items: center;
  gap: 0.6em;
}
.logo-title img {
  width: 32px;
  height: 32px;
  filter: invert(29%) sepia(91%) saturate(5287%) hue-rotate(342deg) brightness(95%) contrast(98%);
}
.logo-title .site-name {
  font-size: 1.2em;
  font-weight: bold;
  color: #ffffff;
  text-transform: lowercase;
}


.nav-links {
  list-style: none;
  display: flex;
  gap: 1em;
  margin: 0;
  padding: 0;
}
.nav-links li a {
  color: #e5e5e5;
  padding: 0.6em 0.8em;
  font-size: 0.9em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: color 0.3s ease;
}
.nav-links li a:hover {
  color: #e53935;
}


.language-switcher {
  font-size: 0.8em;
  color: #ccc;
}
.language-switcher a {
  color: #ccc;
  margin-left: 0.4em;
  font-weight: 600;
  text-transform: uppercase;
  transition: color 0.3s ease;
}
.language-switcher a:first-child {
  margin-left: 0;
}
.language-switcher a:hover {
  color: #e53935;
}
.language-switcher a.active {
  color: #e53935;
  text-decoration: underline;
}


.language-switcher img.language-logo {
  width: 20px;
  height: 20px;
  margin-right: 0.4em;
  
  filter: invert(29%) sepia(91%) saturate(5287%) hue-rotate(342deg) brightness(95%) contrast(98%);
  vertical-align: middle;
}


.newsletter-note {
  font-style: italic;
  margin: 1.5em 0;
}

.newsletter-note a {
  
  color: #ffd700;
  font-weight: bold;
  text-decoration: underline;
}

.newsletter-note a:hover {
  color: #ffeb3b;
}


.logo-title {
  transition: transform 0.2s ease, text-shadow 0.2s ease;
}
.logo-title:hover {
  transform: translateY(-2px);
  text-shadow: 0 0 8px #e53935;
}


header {
  position: relative;
  text-align: center;
  color: #ffffff;
  padding: 4em 0 6em;
  overflow: hidden;
}

header .hero {
  max-width: 900px;
  margin: 0 auto;
}


header .hero .hero-logo {
  width: 100px;
  height: auto;
  display: block;
  margin: 0 auto 1em;
  filter: invert(29%) sepia(91%) saturate(5287%) hue-rotate(342deg) brightness(95%) contrast(98%);
}

header .hero h1 {
  font-size: 2.6em;
  margin-bottom: 0.5em;
  line-height: 1.2;
}

header .hero p.tagline {
  font-size: 1.2em;
  margin: 0 auto 1.5em;
  max-width: 800px;
  color: #ccd3e3;
}

header .hero .hero-cta {
  display: inline-block;
  background-color: #e53935;
  color: #ffffff;
  padding: 0.8em 1.6em;
  border-radius: 4px;
  font-weight: bold;
  text-transform: uppercase;
  transition: background-color 0.3s ease;
}
header .hero .hero-cta:hover {
  background-color: #c62828;
}


header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  background: radial-gradient(circle at center, rgba(229, 57, 53, 0.25) 0%, rgba(10, 15, 36, 1) 70%);
  z-index: -1;
}


section {
  padding: 4em 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
section:last-of-type {
  border-bottom: none;
}
section .section-container {
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
}
section h2 {
  font-size: 2em;
  margin-bottom: 0.5em;
  color: #e53935;
}
section p {
  margin: 0 0 1.2em;
  max-width: 850px;
}


#strategies {
  background-color: #0d2639;
}
#strategies h2 {
  color: #ff7043;
}
#strategies h3 {
  color: #e53935;
  margin-top: 1.5em;
}
#strategies h4 {
  color: #e5e5e5;
  margin-top: 1em;
  font-size: 1.1em;
}
#strategies ul {
  margin-left: 1.2em;
  margin-bottom: 1.2em;
  list-style: disc;
}


.section-cta {
  margin-top: 1.5em;
}
.section-cta a {
  background-color: #e53935;
  color: #ffffff;
  padding: 0.7em 1.4em;
  border-radius: 4px;
  font-weight: bold;
  display: inline-block;
  text-transform: uppercase;
  transition: background-color 0.3s ease;
}
.section-cta a:hover {
  background-color: #c62828;
}


.back-to-top {
  display: block;
  text-align: right;
  margin-top: 1em;
  color: #e53935;
  font-size: 0.9em;
}
.back-to-top:hover {
  text-decoration: underline;
}


.highlight-nav {
  
  background-color: rgba(229, 57, 53, 0.8);
  color: #ffffff !important;
  border-radius: 4px;
  position: relative;
  padding: 0.6em 0.8em;
  display: inline-block;
  
  animation: pulse 2s infinite;
}


.highlight-nav::after {
  
  content: "★";
  margin-left: 0.4em;
  font-size: 1em;
  
  color: #ffd700;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(229, 57, 53, 0.5);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(229, 57, 53, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(229, 57, 53, 0);
  }
}

footer {
  background-color: #0d1b2a;
  color: #7a8aad;
  text-align: center;
  padding: 1.5em 0;
  font-size: 0.8em;
}


@media (max-width: 768px) {
  .nav-links {
    flex-wrap: wrap;
    gap: 0.5em;
    justify-content: center;
    margin-top: 0.5em;
  }
  .nav-links li a {
    padding: 0.5em 0.6em;
    font-size: 0.85em;
  }
  header .hero h1 {
    font-size: 2em;
  }
  header .hero p.tagline {
    font-size: 1em;
  }
  header .hero .hero-cta {
    padding: 0.6em 1.2em;
    font-size: 0.9em;
  }
  section h2 {
    font-size: 1.6em;
  }
}

img, video, iframe {max-width:100%;height:auto;display:block}
.lang-nav{display:flex;gap:.5rem;list-style:none;margin:0;padding:.5rem 0}
.lang-nav a{text-decoration:none}
.skip-link{position:absolute;left:-9999px;top:auto}
.skip-link:focus{left:0;top:0;background:#000;color:#fff;padding:.5rem;z-index:1000}
/* Mobile-first layout */
.container, .section-container {max-width: 1120px; margin: 0 auto; padding: 0 16px}
@media (max-width: 768px){
  header, footer, main, section{padding-left:0;padding-right:0}
  .hero h1{font-size:clamp(1.6rem, 4vw, 2.2rem)}
  .cta, .btn{width:100%;text-align:center}
}
