/*--------------------------------------------------------------
# ForexMentor: global styles, header, front page, footer
# Built on the original black and gold template.
--------------------------------------------------------------*/

:root {
  --default-font: "Roboto", "Vazirmatn", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --heading-font: "Raleway", "Vazirmatn", sans-serif;
  --nav-font: "Poppins", "Vazirmatn", sans-serif;

  --background-color: #ffffff;
  --default-color: #444444;
  --heading-color: #151515;
  --accent-color: #ffc451;
  --contrast-color: #1a1a1a;
  --link-color: #8a5800;          /* gold dark enough to read on white */
  --line-color: rgba(0, 0, 0, 0.1);
  --soft-bg: #f6f4ef;
  --footer-background-color: #000000;
  --radius: 4px;

  --nav-color: rgba(255, 255, 255, 0.92);
  --nav-hover-color: #ffc451;
  --nav-dropdown-background-color: #ffffff;
  --nav-dropdown-color: #212529;
  --nav-dropdown-hover-color: #ffc451;

  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--link-color);
  text-decoration: none;
  transition: color 0.2s;
}

a:hover { color: #000; }

h1, h2, h3, h4, h5, h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
}

:focus-visible {
  outline: 3px solid var(--accent-color);
  outline-offset: 3px;
}

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus,
.skip-link:focus {
  background: var(--accent-color);
  clip: auto !important;
  clip-path: none;
  color: var(--contrast-color);
  display: block;
  font-weight: 600;
  height: auto;
  left: 8px;
  padding: 12px 18px;
  top: 8px;
  width: auto;
  z-index: 100000;
}

.section {
  padding: 80px 0;
  scroll-margin-top: 80px;
  overflow: clip;
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 32px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-color);
  position: relative;
}

.section-head::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: -1px;
  width: 72px;
  height: 3px;
  background: var(--accent-color);
}

.section-head h2 {
  margin: 0;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight: 700;
}

.section-head__link {
  font: 500 15px var(--nav-font);
  white-space: nowrap;
}

.section-head__link i { margin-inline-start: 4px; }

.section-title-lg {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 700;
  margin-bottom: 18px;
}

.lead-muted {
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 62ch;
}

/*--------------------------------------------------------------
# Buttons
--------------------------------------------------------------*/
.btn-gold,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  font: 600 16px var(--nav-font);
  line-height: 1.2;
  border-radius: var(--radius);
  border: 2px solid var(--accent-color);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.btn-gold {
  background: var(--accent-color);
  color: var(--contrast-color);
}

.btn-gold:hover {
  background: color-mix(in srgb, var(--accent-color), white 25%);
  border-color: color-mix(in srgb, var(--accent-color), white 25%);
  color: var(--contrast-color);
}

.btn-gold--dark:hover { background: #000; border-color: #000; color: var(--accent-color); }

.btn-gold--small { padding: 10px 20px; font-size: 14px; }

.btn-ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
}

.btn-ghost:hover {
  border-color: var(--accent-color);
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.header {
  padding: 14px 0;
  background: transparent;
  transition: background-color 0.3s, box-shadow 0.3s, padding 0.3s;
  z-index: 997;
}

.admin-bar .header { top: 32px; }

@media (max-width: 782px) {
  .admin-bar .header { top: 46px; }
}

.scrolled .header,
.mobile-nav-active .header {
  background: rgba(0, 0, 0, 0.88);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.25);
  padding: 9px 0;
}

.header .logo { line-height: 1; }
.header .logo img { max-height: 40px; width: auto; }

.header .sitename {
  font: 700 28px var(--heading-font);
  color: #fff;
}

.header .sitename-dot {
  font: 700 28px var(--heading-font);
  color: var(--accent-color);
}

.header .btn-getstarted {
  color: #fff;
  font: 500 14px var(--nav-font);
  padding: 8px 28px;
  margin-inline-start: 30px;
  border-radius: var(--radius);
  border: 2px solid var(--accent-color);
  transition: background-color 0.2s, color 0.2s;
}

.header .btn-getstarted:hover {
  color: var(--contrast-color);
  background: var(--accent-color);
}

@media (max-width: 1199px) {
  .header .logo { order: 1; }
  .header .btn-getstarted { order: 2; margin: 0 15px; padding: 6px 15px; }
  .header .navmenu { order: 3; }
}

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
.navmenu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mobile-nav-toggle {
  background: none;
  border: 0;
  padding: 0;
  color: var(--nav-color);
  font-size: 30px;
  line-height: 0;
  cursor: pointer;
}

@media (min-width: 1200px) {
  .navmenu ul { display: flex; align-items: center; }
  .navmenu li { position: relative; }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-color);
    padding: 18px 15px;
    font: 400 16px var(--nav-font);
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
  }

  .navmenu a i { font-size: 12px; line-height: 0; margin-inline-start: 5px; }

  .navmenu li:hover > a,
  .navmenu .current-menu-item > a,
  .navmenu .current-menu-ancestor > a,
  .navmenu a.active {
    color: var(--nav-hover-color);
  }

  .navmenu .sub-menu {
    margin: 0;
    padding: 10px 0;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    inset-inline-start: 14px;
    top: 130%;
    opacity: 0;
    transition: 0.25s;
    z-index: 99;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
  }

  .navmenu .sub-menu li { min-width: 200px; }
  .navmenu .sub-menu a { padding: 10px 20px; font-size: 15px; color: var(--nav-dropdown-color); }
  .navmenu .sub-menu a:hover,
  .navmenu .sub-menu li:hover > a { background: var(--nav-dropdown-hover-color); color: var(--contrast-color); }

  .navmenu .menu-item-has-children:hover > .sub-menu,
  .navmenu .menu-item-has-children:focus-within > .sub-menu {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }
}

@media (max-width: 1199px) {
  .navmenu { padding: 0; z-index: 9997; }

  .navmenu > ul {
    display: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    border-radius: 6px;
    background: var(--nav-dropdown-background-color);
    overflow-y: auto;
    z-index: 9998;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-dropdown-color);
    padding: 12px 20px;
    font: 500 17px var(--nav-font);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .navmenu a:hover,
  .navmenu .current-menu-item > a,
  .navmenu a.active {
    background: var(--nav-dropdown-hover-color);
    color: var(--contrast-color);
  }

  .navmenu a i {
    font-size: 12px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent-color), white 85%);
  }

  .navmenu .sub-menu {
    display: none;
    margin: 6px 20px;
    padding: 6px 0;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #fff;
  }

  .navmenu .sub-menu.dropdown-active { display: block; }

  .mobile-nav-active { overflow: hidden; }

  .mobile-nav-active .mobile-nav-toggle {
    color: #fff;
    position: absolute;
    font-size: 32px;
    top: 15px;
    inset-inline-end: 15px;
    z-index: 9999;
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    overflow: hidden;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
  }

  .mobile-nav-active .navmenu > ul { display: block; }
}

/*--------------------------------------------------------------
# Hero: the software comes first
--------------------------------------------------------------*/
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(100vh, 860px);
  padding: 130px 0 90px;
  background: #000;
  color: #fff;
  overflow: clip;
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.93) 0%, rgba(0, 0, 0, 0.78) 50%, rgba(0, 0, 0, 0.6) 100%);
}

html[dir="rtl"] .hero::before {
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.93) 0%, rgba(0, 0, 0, 0.78) 50%, rgba(0, 0, 0, 0.6) 100%);
}

.hero__inner { position: relative; z-index: 2; }

.hero__title {
  color: #fff;
  font-weight: 800;
  font-size: clamp(2.1rem, 4.4vw, 3.5rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
  max-width: 15em;
}

.hero__lead {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  max-width: 33em;
  margin: 0 0 34px;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

.hero__facts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 34px 0 0;
  padding: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.72);
}

.hero__facts li { display: flex; align-items: center; gap: 8px; }
.hero__facts i { color: var(--accent-color); font-size: 16px; }

/* The app window */
.app-showcase { max-width: 640px; margin-inline: auto; }

.app-frame {
  position: relative;
  aspect-ratio: 1024 / 576;
  border: 1px solid rgba(255, 196, 81, 0.5);
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 0 7px rgba(255, 196, 81, 0.07), 0 40px 90px -25px rgba(255, 196, 81, 0.3);
}

.app-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s;
}

.app-frame img.is-active { opacity: 1; }

.app-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}

.app-tabs button {
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius);
  padding: 8px 18px;
  font: 500 14px var(--nav-font);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.app-tabs button:hover { border-color: var(--accent-color); color: var(--accent-color); }

.app-tabs button[aria-selected="true"] {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--contrast-color);
}

/*--------------------------------------------------------------
# Software section
--------------------------------------------------------------*/
.software { background: var(--soft-bg); }

.check-list { list-style: none; padding: 0; margin: 24px 0 0; }

.check-list li { display: flex; gap: 10px; padding: 8px 0; line-height: 1.6; }

.check-list i { color: var(--link-color); font-size: 1.25rem; line-height: 1.3; }

.features-list { display: grid; gap: 30px; }

.features-item { display: flex; gap: 20px; }

.features-item > i {
  font-size: 44px;
  line-height: 1;
  color: var(--accent-color);
  flex-shrink: 0;
}

.features-item h3 { font-size: 20px; font-weight: 700; margin: 0 0 4px; }
.features-item p { margin: 0; color: #555; line-height: 1.6; }

/*--------------------------------------------------------------
# Call to action
--------------------------------------------------------------*/
.call-to-action {
  position: relative;
  padding: 90px 0;
  background: #000;
  color: #fff;
  clip-path: inset(0);
}

.call-to-action > img {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.call-to-action::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(0, 0, 0, 0.55);
}

.call-to-action .container { position: relative; z-index: 3; }

.cta-inner { max-width: 760px; margin-inline: auto; }

.call-to-action h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; }
.call-to-action p { color: rgba(255, 255, 255, 0.85); font-size: 1.05rem; line-height: 1.7; margin-bottom: 28px; }

/*--------------------------------------------------------------
# Tools
--------------------------------------------------------------*/
.tool-card {
  position: relative;
  height: 100%;
  padding: 34px 26px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--line-color);
  border-radius: var(--radius);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.tool-card:hover,
.tool-card:focus-within {
  border-color: var(--accent-color);
  box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.3);
}

.tool-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 18px;
  border-radius: var(--radius);
  background: var(--accent-color);
  color: var(--contrast-color);
  font-size: 28px;
}

.tool-card__title { font-size: 20px; font-weight: 700; margin: 0 0 8px; }
.tool-card__title a { color: var(--heading-color); }
.tool-card__title a::after { content: ""; position: absolute; inset: 0; }
.tool-card__text { margin: 0; font-size: 15px; line-height: 1.6; color: #555; }

.tools--alt { background: var(--soft-bg); }

/*--------------------------------------------------------------
# Platform
--------------------------------------------------------------*/
.platform { background: var(--soft-bg); }

.platform__img { border-radius: var(--radius); width: 100%; height: auto; }

.platform__groups { display: grid; gap: 22px; margin-top: 28px; }

.platform__groups h3 { font-size: 18px; font-weight: 700; margin: 0 0 6px; }

.platform__groups ul { margin: 0; padding-inline-start: 1.2rem; }
.platform__groups li { padding: 2px 0; }
.platform__groups li::marker { color: var(--link-color); }

/*--------------------------------------------------------------
# Team
--------------------------------------------------------------*/
.team-section {
  position: relative;
  padding: 90px 0;
  background: #000;
  color: #fff;
  overflow: clip;
}

.team-section__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.72);
}

.team-section .container { position: relative; z-index: 2; }

.team-item { text-align: center; padding: 0 10px; }

.team-item__img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 50%;
  border: 6px solid rgba(255, 255, 255, 0.18);
  margin: 0 auto;
}

.team-item h3 { color: #fff; font-size: 20px; font-weight: 700; margin: 12px 0 4px; }
.team-item__role { color: var(--accent-color); font-size: 14px; margin: 0 0 14px; }

.team-item__text {
  max-width: 44rem;
  margin: 0 auto 10px;
  font-style: italic;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
}

.team-section .swiper-pagination { position: relative; margin-top: 22px; }

.team-section .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: #fff;
  opacity: 0.4;
}

.team-section .swiper-pagination-bullet-active { background: var(--accent-color); opacity: 1; }

/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/
.info-item + .info-item { margin-top: 32px; }

.info-item > i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-inline-end: 15px;
  border-radius: var(--radius);
  background: var(--accent-color);
  color: var(--contrast-color);
  font-size: 20px;
}

.info-item h3 { font-size: 18px; font-weight: 700; margin: 0 0 4px; }
.info-item p { margin: 0; font-size: 15px; }

.contact-form .form-control {
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 15px;
  border-color: rgba(0, 0, 0, 0.2);
}

.contact-form .form-control:focus {
  border-color: #000;
  box-shadow: 0 0 0 3px rgba(255, 196, 81, 0.45);
}

.fm-hp {
  position: absolute !important;
  inset-inline-start: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-alert {
  padding: 14px 18px;
  margin-bottom: 22px;
  border-radius: var(--radius);
  font-weight: 500;
}

.form-alert--ok { background: #e6f4ea; color: #14532d; border: 1px solid #9ad3ad; }
.form-alert--bad { background: #fdeaea; color: #7a1010; border: 1px solid #f0a8a8; }

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer {
  background: var(--footer-background-color);
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
}

.footer a { color: rgba(255, 255, 255, 0.8); }
.footer a:hover { color: var(--accent-color); }
.footer .btn-gold { color: var(--contrast-color); }
.footer .btn-gold:hover { color: var(--contrast-color); }

.footer-top {
  padding: 60px 0;
  background: color-mix(in srgb, #000 92%, white 8%);
}

.footer .sitename { font: 700 26px var(--heading-font); color: #fff; letter-spacing: 0.5px; }
.footer-about p { line-height: 1.7; max-width: 30rem; }

.footer-title {
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 16px;
}

.footer-links ul { list-style: none; margin: 0; padding: 0; }
.footer-links li { padding: 7px 0; }

.footer-posts li { display: flex; flex-direction: column; gap: 2px; padding: 9px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.footer-posts li:last-child { border-bottom: 0; }
.footer-posts time { font-size: 13px; color: rgba(255, 255, 255, 0.55); }
.footer-muted { color: rgba(255, 255, 255, 0.6); }

.social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-inline-end: 10px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.1);
  font-size: 17px;
  transition: background-color 0.2s, color 0.2s;
}

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

.copyright { padding: 28px 0; text-align: center; }
.footer .copyright .sitename { font-size: inherit; letter-spacing: 0; }
.copyright .risk-note { max-width: 56rem; margin: 0 auto 14px; font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, 0.6); }

/*--------------------------------------------------------------
# Scroll to top
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  inset-inline-end: 15px;
  bottom: 15px;
  z-index: 99999;
  width: 42px;
  height: 42px;
  border-radius: var(--radius);
  background: var(--accent-color);
  transition: opacity 0.3s, visibility 0.3s;
}

.scroll-top i { font-size: 26px; color: var(--contrast-color); line-height: 0; }
.scroll-top:hover { background: color-mix(in srgb, var(--accent-color), white 25%); }
.scroll-top.active { visibility: visible; opacity: 1; }

@media (max-width: 991px) {
  .section { padding: 60px 0; }
  .hero { padding-top: 110px; min-height: 0; }
}