/* Global resets and typography */
:root {
  --logo-blue1: #009ed8;
  --logo-blue2: #0d316d;
  --logo-dark: #023074;
  --footer-dark1: #060e40;
  --footer-dark2: #03215d;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', Arial, sans-serif;
  height: 100%;
}

/* Ensuring site takes full height */
.site-main {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Header, Main, Footer width */
header,
main,
footer {
  width: 100%;
}

/* Center container for main content */
.uk-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* Custom Header - Black background */
.custom-header {
  background: linear-gradient(135deg, var(--logo-blue1), var(--logo-blue2) 40%, var(--logo-dark) 100%);
}

/* Navigation styling overrides */
nav.uk-navbar {
  background: transparent;
  box-shadow: none;
  padding: 20px 0;
  border-radius: 0 0 20px 20px;
}

nav.uk-navbar a {
  color: #fff;
  text-decoration: none;
}

.logo {
  font-size: 1.8em;
  font-weight: bold;
}

/* Mobile offcanvas links white */
.uk-offcanvas-bar a {
  color: #fff;
  text-decoration: none;
}

/* Hero Section Background full width */
.hero-section {
  position: relative;
  margin-left: calc(50% - 50vw);
  background: url('../images/hero-bg.webp') no-repeat center center;
  background-size: cover;
  padding: 60px 0;
}

.hero-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1;
}

.hero-section h3 {
  color: #000;
}

.hero-content {
  position: relative;
  z-index: 2;
  color: #fff;
  padding: 20px;
  text-align: center;
}

/* Hero form styling */
.hero-form {
  background: rgba(255, 255, 255, 0.9);
  padding: 20px;
  border-radius: 8px;
  margin-top: 30px;
  text-align: center;
}

/* Unified Button Style (applied everywhere) */
button,
.button,
.uk-button-primary {
  background: linear-gradient(135deg, var(--logo-blue1), var(--logo-blue2) 60%, var(--logo-dark) 100%);
  border: none;
  color: #fff;
  padding: 6px 12px;
  font-size: 16px;
  border-radius: 10px;
  cursor: pointer;
}

button:hover,
.button:hover,
.uk-button-primary:hover {
  background: linear-gradient(135deg, var(--logo-blue2), var(--logo-blue1) 80%, var(--logo-dark) 100%);
  filter: brightness(1.08) saturate(1.2);
  box-shadow: 0 4px 18px 0 rgba(33, 150, 243, 0.18);
  transition: all 0.2s;
}

/* Financial Technology Section Styles */
.fintech-section {
  padding-top:25px;
  padding-bottom:25px;
  background-color: rgba(255, 255, 255, 0.8);
}

.fintech-container {
  text-align: center;
  padding: 0 20px;
}

.fintech-container h2 {
  font-size: 2em;
  margin-bottom: 20px;
}

.fintech-container p {
  max-width: 1200px;
  margin: 0 auto 10px;
}

.fintech-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.fintech-card {
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  width: 250px;
}

.fintech-card.special {
  background: linear-gradient(135deg, var(--logo-blue1), var(--logo-blue2));
  color: white;
}

.fintech-card.special h3 {
  color: white;
}

.fintech-card h3 {
  margin-top: 0;
}

/* Investment image styling */
.investment-image {
  max-width: 100%;
  margin: 20px auto;
  display: block;
  border-radius: 8px;
}

/* Registration Section Styles */
.registration-section {
  padding: 50px 0;
  background-color: #f9f9f9;
}

.registration-container {
  max-width: 800px;
  margin: 0 auto;
  background-color: #fff;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.registration-container h2,
.registration-container h3 {
  text-align: center;
}

.registration-steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 30px;
}

.registration-steps .step {
  background-color: #f0f0f0;
  padding: 15px;
  margin: 10px;
  border-radius: 8px;
  flex: 1;
  min-width: 180px;
  border: 1.5px solid var(--logo-blue2);
}

.registration-steps .step .step-number {
  background: linear-gradient(135deg, var(--logo-blue1), var(--logo-blue2));
  color: #fff;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
}

.registration-container p {
  margin: 20px 0;
  line-height: 1.5;
}

.registration-image {
  margin-top: 20px;
  text-align: center;
}

.registration-image img {
  max-width: 100%;
  border-radius: 8px;
}

/* Text Block Section Styles */
.text-block-section {
  padding-top:40px;
  background-color: #fff;
}

.text-block-section h2 {
  font-size: 2em;
  margin-bottom: 20px;
}

.text-block-section p {
  font-size: 1.1em;
  max-width: 700px;
  margin: 0 auto;
}

/* Modern Split Section Styles - Narrower Block */
.modern-section {
  display: flex;
  flex-wrap: wrap;
  max-width: 900px;
  margin: 0 auto;
  padding: 10px 0;
  background-color: #fff;
}

.modern-left {
  flex: 1 1 40%;
  background: linear-gradient(135deg, var(--logo-blue1), var(--logo-blue2));
  color: white;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 8px 0 0 8px;
  min-width: 300px;
}

.modern-left h2 {
  font-size: 1.8em;
  margin-bottom: 20px;
  color: white;
}

.modern-left .button {
  margin-top: 20px;
}

.modern-right {
  flex: 1 1 60%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 10px;
  min-width: 300px;
}

.modern-right .feature {
  background: #f0f0f0;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #ddd;
}

.modern-right .feature h3 {
  margin-top: 0;
  font-weight: bold;
  display: flex;
  align-items: center;
}

.modern-right .feature h3 .check {
  color: #8e44ad;
  margin-right: 8px;
  font-weight: bold;
}

.feature-title {
  font-size: 1.2em;
  font-weight: bold;
}

/* FAQ Section Styles */
.faq-section {
  padding: 40px 0;
  background-color: #fff;
}

.faq-section h2 {
  font-size: 2em;
  margin-bottom: 20px;
}

.faq-item {
  text-align: left;
  max-width: 800px;
  margin: 20px auto;
  background: #f0f0f0;
  border-radius: 8px;
  padding: 10px 20px;
  border: 1px solid #ddd;
}

.faq-item summary {
  font-size: 1.1em;
  font-weight: bold;
  cursor: pointer;
}

.faq-item p {
  font-size: 1em;
  line-height: 1.5;
  margin-top: 10px;
}

/* Custom Footer Styles */
.custom-footer {
  background: linear-gradient(135deg, var(--footer-dark1), var(--footer-dark2) 80%);
  color: #fff;
  padding: 30px 0;
}

.custom-footer .footer-menu {
  text-align: center;
  margin-bottom: 20px;
}

.custom-footer .footer-menu a {
  color: #fff;
  margin: 0 15px;
  text-decoration: none;
  font-size: 14px;
}

.custom-footer .trust-text {
  text-align: center;
  font-size: 16px;
  margin-bottom: 20px;
}

.custom-footer .logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.custom-footer .logos img {
  height: 50px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .uk-container {
    padding: 0 15px;
  }

  nav.uk-navbar {
    padding: 15px 15px;
  }

  .hero-content h1 {
    font-size: 2em;
  }

  .hero-content p {
    font-size: 1em;
  }

  .modern-section {
    flex-direction: column;
    max-width: 100%;
    padding: 20px 10px;
  }

  .modern-left,
  .modern-right {
    border-radius: 8px;
    padding: 20px;
  }

  .modern-right {
    grid-template-columns: 1fr;
  }

  /* Mobile menu links */
  nav.uk-navbar a {
    color: #fff;
  }
}

/* Стили для иконок валидации */
.form-group {
  position: relative;
  width: 100%;
}

.warning-icon,
.success-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: none;
  z-index: 1;
  line-height: 1;
}

.warning-icon.active,
.success-icon.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

.warning-icon::before {
  content: "⚠️";
  font-size: 18px;
  line-height: 1;
}

.success-icon::before {
  content: "✓";
  color: #28a745;
  font-size: 18px;
  font-weight: bold;
  line-height: 1;
}

.input-error {
  border-color: #dc3545 !important;
  padding-right: 35px !important;
}

.input-success {
  border-color: #28a745 !important;
  padding-right: 35px !important;
}

/* Убедимся, что поля ввода занимают всю ширину контейнера */
.form-group .uk-input {
  width: 100%;
  box-sizing: border-box;
  height: 40px;
  /* Фиксированная высота для всех полей */
  line-height: 40px;
  /* Выравнивание текста по центру */
}

/* Стили для кнопки генерации пароля */
.generate-password-btn {
  position: absolute;
  right: 35px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 5px;
  cursor: pointer;
  color: #666;
  transition: color 0.3s ease;
  z-index: 1;
}

.generate-password-btn:hover {
  color: #000;
}

.generate-password-btn svg {
  width: 16px;
  height: 16px;
}

/* Обновляем стили для поля пароля */
.form-group input[type="password"] {
  padding-right: 65px !important;
  /* Увеличиваем отступ справа для кнопки */
}

/* Стили для intl-tel-input */
.iti {
  width: 100%;
  display: flex;
  align-items: center;
}

.iti__flag-container {
  display: flex;
  align-items: center;
  background: #f8f9fa;
  border: 1px solid #ced4da;
  border-right: none;
  border-radius: 4px 0 0 4px;
  height: 40px;
}

.iti__selected-flag {
  padding: 8px;
  display: flex;
  align-items: center;
}

.iti--separate-dial-code .iti__selected-flag {
  background-color: rgb(193 193 193);
}

.iti__flag {
  transform: scale(1.2);
  margin-right: 5px;
}

/* Обновляем стили для поля телефона */
.form-group input[type="tel"] {
  padding-left: 90px !important;
  border-radius: 0 4px 4px 0 !important;
  height: 40px;
  border: 1px solid #ced4da;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-group input[type="tel"]:focus {
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.uk-input {
  border: 1px solid #dadde2;
}

.content-section {
  text-align: left;
  margin-top: 30px;
  margin-bottom: 30px;
  min-height: 70vh;
}

.content-section h1 {
  text-align: center;
}

.uk-container>.content-section {
  margin-bottom: 30px;
}


/* Styles pour la page Blog */
.blog-categories {
  margin: 40px 0;
}

.blog-categories h2 {
  margin-bottom: 30px;
  color: #333;
  font-size: 28px;
}

.blog-categories .uk-grid>div {
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.blog-categories .uk-grid>div:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.blog-categories h3 {
  color: #2d7091;
  margin-bottom: 15px;
  font-size: 22px;
}

.recent-posts {
  margin: 50px 0;
}

.blog-post {
  background: #fff;
  padding: 25px;
  margin-bottom: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
}

.blog-post:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.blog-post h3 {
  color: #2d7091;
  margin-bottom: 15px;
  font-size: 24px;
}

.post-meta {
  color: #666;
  font-size: 14px;
  margin-bottom: 15px;
}

.blog-post p {
  color: #444;
  line-height: 1.6;
  margin-bottom: 20px;
}

.blog-post .uk-button {
  background: #2d7091;
  color: #fff;
  padding: 8px 20px;
  border-radius: 4px;
  transition: background 0.3s ease;
}

.blog-post .uk-button:hover {
  background: #1e5877;
}

.newsletter {
  background: #f8f9fa;
  padding: 40px;
  border-radius: 8px;
  margin-top: 50px;
}

.newsletter h2 {
  color: #333;
  margin-bottom: 20px;
}

/* Styles pour la page Team */
.team-member {
  margin: 50px 0;
}

.team-member h2 {
  color: #333;
  margin-bottom: 30px;
  font-size: 28px;
}

.team-member .uk-grid>div {
  padding: 25px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
}

.team-member .uk-grid>div:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.team-member h3 {
  color: #2d7091;
  margin-bottom: 10px;
  font-size: 22px;
}

.team-member strong {
  color: #666;
  font-size: 16px;
  display: block;
  margin-bottom: 15px;
}

.team-member p {
  color: #444;
  line-height: 1.6;
}

/* Responsive styles */
@media (max-width: 960px) {

  .blog-categories .uk-grid>div,
  .team-member .uk-grid>div {
    margin-bottom: 20px;
  }

  .blog-post,
  .team-member .uk-button {
    padding: 20px;
  }
}

@media (max-width: 640px) {
  .content-section {
    padding: 20px 0;
  }

  .blog-categories h2,
  .team-member h2 {
    font-size: 24px;
  }

  .blog-post h3,
  .team-member h3 {
    font-size: 20px;
  }

  .newsletter {
    padding: 20px;
  }
}

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

/* --- Tooltip para política de registro --- */
.form-terms {
  position: relative;
  font-size: 14px;
  color: #222;
  margin-top: 10px;
  margin-bottom: 0;
  text-align: center;
  line-height: 1.6;
}

.form-terms a {
  color: #2d7091;
  text-decoration: underline;
  transition: color 0.2s;
  font-weight: 500;
}

.form-terms a:hover {
  color: #8e44ad;
  text-decoration: underline;
}

.form-terms .more-info {
  font-weight: bold;
  position: relative;
  cursor: pointer;
  outline: none;
}

.form-terms .members-form-policy-tooltip {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  width: 350px;
  max-width: 95vw;
  padding: 14px 16px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.18);
  background: #fff;
  color: #222;
  z-index: 11000;
  text-align: left;
  white-space: pre-wrap;
}

.form-terms .members-form-policy-tooltip:after {
  display: block;
  width: 100%;
  height: auto;
  content: "En vous inscrivant et en créant un compte, vous confirmez et reconnaissez que nous ne sommes ni des courtiers ni des conseillers financiers. Nous n'exploitons aucune technologie et ne sommes pas autorisés à envoyer des signaux. Les informations présentées ici sont fournies à titre informatif uniquement et ne constituent ni un conseil financier ni une responsabilité de notre part. Vous devez toujours effectuer vos propres recherches sur le marché et consulter un conseiller professionnel avant de prendre toute décision d'investissement. Nous pouvons transférer ou divulguer vos données personnelles à des tiers à des fins commerciales ou marketing, et pouvons recevoir une compensation à cet égard ; ces tiers peuvent utiliser ces données pour vous contacter ou mener leurs propres activités directement avec vous. Vous confirmez également avoir lu et accepté nos Conditions générales, notre Politique de confidentialité et notre Politique relative aux cookies.";
  white-space: pre-wrap;
}

.form-terms .more-info:hover+.members-form-policy-tooltip,
.form-terms .more-info:focus+.members-form-policy-tooltip {
  display: block;
}

@media (max-width: 500px) {
  .form-terms {
    font-size: 12px;
  }

  .form-terms .members-form-policy-tooltip {
    width: 95vw;
    font-size: 11px;
    padding: 10px 6px;
  }
}

.hero-form-footer {
  margin: 0 auto;
  display: block;
  background: rgb(240 240 246);
  max-width: 444px;
}

.hero-form-footer h3 {
  font-size: 30px;
}

.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.logo {
  height: 75px;
}

@media (max-width: 500px) {
  .hero-form-footer {
    max-width: 100%;
    margin: 20px;
  }
}

/* --- Partners Swiper Section --- */

.partners {
  padding: 50px 0 40px 0;
  background: #fff;
  color: #222;
  text-align: center;
  width: 1200px;
  max-width: 100%;
  margin: 0 auto;
}

.partners__title {
  font-size: 2em;
  font-weight: 700;
  margin-bottom: 30px;
  letter-spacing: 1px;
  color: #111;
}

.partners__swiper {
  overflow: hidden;
  width: 100%;
  margin: 0 auto;
}

.partner__swiper-wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.partners__swiper-track {
  display: flex;
  gap: 32px;
  align-items: center;
  padding: 10px 0;
  animation: partners-scroll 7s linear infinite;
}

@keyframes partners-scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.partners__swiper-slide {
  flex: 0 0 auto;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  padding: 18px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  min-height: 70px;
  transition: box-shadow 0.3s, transform 0.3s;
}

.partners__swiper-slide img {
  max-height: 40px;
  max-width: 120px;
  filter: grayscale(0.2) brightness(0.95);
  transition: filter 0.3s, transform 0.3s;
}

.partners__swiper-slide:hover {
  box-shadow: 0 6px 24px rgba(33, 150, 243, 0.10);
  transform: translateY(-4px) scale(1.04);
}

.partners__swiper-slide:hover img {
  filter: none;
  transform: scale(1.08);
}

@media (max-width: 900px) {
  .partners__swiper-track {
    gap: 18px;
  }

  .partners__swiper-slide {
    padding: 12px 18px;
    min-width: 90px;
  }

  .partners__title {
    font-size: 1.4em;
  }
}

@media (max-width: 600px) {
  .partners {
    padding: 30px 0 20px 0;
  }

  .partners__swiper-track {
    gap: 10px;
  }

  .partners__swiper-slide {
    padding: 8px 8px;
    min-width: 70px;
    min-height: 40px;
  }

  .partners__swiper-slide img {
    max-height: 28px;
    max-width: 70px;
  }

  .partners__swiper-slide img {
    max-height: 70px;
    max-width: 135px;
    filter: grayscale(0.2) brightness(0.95);
    transition: filter 0.3s, transform 0.3s;
  }
}

/* Educational Content Section */
.educational-content {
  padding: 50px 0;
  background-color: #fff;
}

.content-block {
  margin-bottom: 40px;
  padding: 30px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
}

.content-block h2 {
  color: #2c3e50;
  margin-bottom: 20px;
  text-align: center;
}

.content-block h3 {
  color: #2c3e50;
  margin: 30px 0 20px;
}

.content-block h4 {
  font-size: 18px;
  color: #2c3e50;
  margin-bottom: 15px;
}

.content-block p {
  color: #555;
  line-height: 1.6;
  margin-bottom: 20px;
}

/* Benefits Grid */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin: 30px 0;
}

.benefit-item {
  padding: 20px;
  background: #f0f0f0;
  border-radius: 8px;
  border: 1px solid #ddd;
  transition: transform 0.3s ease;
}

.benefit-item:hover {
  transform: translateY(-5px);
}

/* Risks Grid */
.risks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin: 30px 0;
}

.risk-item {
  padding: 20px;
  background: #f0f0f0;
  border-radius: 8px;
  border: 1px solid #ddd;
  border-left: 4px solid var(--logo-blue2);
}

/* Comparison Grid */
.comparison-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin: 30px 0;
}

.comparison-item {
  padding: 20px;
  background: #f0f0f0;
  border-radius: 8px;
  border: 1px solid #ddd;
  border-top: 4px solid var(--logo-blue2);
}

.conclusion {
  font-style: italic;
  color: #666;
  text-align: center;
  margin-top: 30px;
  padding: 15px;
  background: #f0f0f0;
  border-radius: 4px;
  border: 1px solid #ddd;
}

/* Responsive Design */
@media (max-width: 768px) {
  .content-block {
    padding: 20px;
  }

  .benefits-grid,
  .risks-grid,
  .comparison-grid {
    grid-template-columns: 1fr;
  }
}

.benefit-title,
.risk-title, .fintech-card-title {
  font-size: 18px;
  color: #2c3e50;
  font-weight: 500;
  margin-bottom: 15px;
}

.table-wrapper {
  overflow-x: auto;
}

h2 {
  font-size:2em;
}
h3 {
  font-size:1.5em;
}

@media (max-width: 560px) {
  .fintech-card {
    width:100%;
  }
}

  .fintech-container img {
    max-width:900px;
    width: 100%;
  }