/*
  FalconBot Copy Trade
  - ForexVPS-like look (black + green)
  - Always dark
  - Subtle animated background
*/

html[data-bs-theme="dark"],
[data-bs-theme="dark"] {
  --brand-color: #38ff8a;            /* light green accent */
  --brand-color-dark: #0b6b3a;       /* darker green */
  --title-color: #ffffff;
  --text-color: rgba(255, 255, 255, 0.78);

  --body-color: #000000;
  --header-bg-color: #000000;
  --header-bg-color2: #000000;

  /* Template gradients -> force black */
  --bg-grad-color: #000000;
  --bg-grad-color-2: #000000;
  --bg-grad-color-3: #000000;
  --bg-grad-color-trans: rgba(0, 0, 0, 0);
  --bg-grad-color-trans-2: rgba(0, 0, 0, 0);
  --bg-grad-color-trans-3: rgba(0, 0, 0, 0);

  /* Surfaces */
  --bg-color: rgba(255, 255, 255, 0.035);
  --bg-color-trans: rgba(255, 255, 255, 0.02);
  --feature-bg-color: rgba(255, 255, 255, 0.04);
}

body {
  background: #000000 !important;
  color: var(--text-color);
}

/* Subtle animated background (glows + grid) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background:
    radial-gradient(800px 500px at 78% 22%, rgba(56, 255, 138, 0.14), transparent 55%),
    radial-gradient(700px 450px at 22% 78%, rgba(56, 255, 138, 0.08), transparent 60%),
    radial-gradient(900px 700px at 50% 50%, rgba(255,255,255,0.02), transparent 60%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0.10;
  background-image:
    repeating-linear-gradient(0deg, rgba(56,255,138,0.18) 0px, rgba(56,255,138,0.18) 1px, transparent 1px, transparent 64px),
    repeating-linear-gradient(90deg, rgba(56,255,138,0.14) 0px, rgba(56,255,138,0.14) 1px, transparent 1px, transparent 64px);
  animation: bgGridMove 18s linear infinite;
}

@keyframes bgGridMove {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-64px, -64px, 0); }
}

/* Always-dark: hide light/dark switch */
.lightdark-switch,
#btnSwitch,
.switch-btn {
  display: none !important;
}

/* Links */
a { color: var(--brand-color); }
a:hover { color: #9dffcc; }

/* Header */
.header-section--style2 .header-bottom,
.header-section--style2.header-fixed .header-bottom {
  background: rgba(0, 0, 0, 0.92) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(8px);
}

.header-section--style2 .header-wrapper {
  padding: 8px 0 !important;
}

/* Logo sizing */
.header-section .logo img {
  height: 68px !important;
  width: auto !important;
}
.footer__about-logo img {
  height: 56px !important;
  width: auto !important;
}

/* Spacer inserted by JS when header becomes fixed */
.header-spacer { height: 0px; }

/* Force all sections to pure black */
section,
.banner,
.page-header,
.feature,
.service,
.pricing,
.blog,
.contact,
.account,
.cta,
.testimonial,
.footer,
.footer__middile,
.footer__bottom {
  background-color: transparent !important;
}

/* Remove/soften template illustration layers */
.banner__bg-element img,
.page-header__shape-item,
.banner__shape-item,
.feature__shape-item,
.service__shape-item,
.roadmap__shape-item,
.pricing__shape-item,
.faq__shape-item,
.cta__shape-item,
.footer__shape-item {
  opacity: 0.0 !important;
  pointer-events: none;
}

/* Page header */
.page-header {
  background-image: none !important;
  background-color: transparent !important;
  border-bottom: 1px solid rgba(56,255,138,0.18);
}

/* Cards / panels */
.blog__item-inner,
.service__item-inner,
.pricing__item-inner,
.sidebar,
.blog-details,
.contact__wrapper,
.account__content,
.accordion-item,
.accordion-button,
.form-control,
textarea,
select,
.modal-content {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  color: rgba(255, 255, 255, 0.84);
}

.form-control:focus,
textarea:focus {
  border-color: rgba(56,255,138,0.55) !important;
  box-shadow: 0 0 0 0.2rem rgba(56,255,138,0.15) !important;
}

/* Page headers: add a bit of extra top padding so text never sits under the menu */
.page-header {
  padding-block-start: 110px; /* mobile */
}
@media (min-width: 992px) {
  .page-header {
    padding-block-start: 160px;
  }
}

/* Buttons */
.trk-btn--primary,
.trk-btn--primary span {
  background: var(--brand-color) !important;
  border-color: var(--brand-color) !important;
  color: #000000 !important;
  font-weight: 700;
}
.trk-btn--primary:hover { filter: brightness(1.05); }

/* Template uses "trk-btn--border" but doesn't style it; define as outline button */
.trk-btn--border,
.trk-btn--border span {
  background: transparent !important;
  border-color: rgba(56,255,138,0.55) !important;
  color: var(--brand-color) !important;
}
.trk-btn--border:hover {
  background: rgba(56,255,138,0.12) !important;
}

.trk-btn--outline2,
.trk-btn--outline2 span,
.trk-btn--outline22,
.trk-btn--outline22 span {
  border-color: rgba(56,255,138,0.55) !important;
  color: var(--brand-color) !important;
}
.trk-btn--outline2:hover,
.trk-btn--outline22:hover {
  background: rgba(56,255,138,0.12) !important;
}

/* Headline highlight */
.banner__content-heading span,
.section-header__title span {
  color: var(--brand-color) !important;
}

/* Hero video (left) */
.hero-video-frame {
  height: 100%;
  min-height: 420px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(56,255,138,0.18);
  background: rgba(0,0,0,0.65);
  box-shadow: 0 0 0 1px rgba(56,255,138,0.10), 0 20px 60px rgba(0,0,0,0.55);
}
.hero-video-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Pricing bar */
.pricing-bar {
  padding: 38px 0;
}
.pricing-bar__wrap {
  border: 1px solid rgba(56,255,138,0.18);
  border-radius: 18px;
  background: rgba(255,255,255,0.025);
  padding: 22px;
}
.pricing-bar__plan {
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  background: rgba(0,0,0,0.55);
  padding: 18px;
  height: 100%;
}
.pricing-bar__price {
  font-size: 30px;
  font-weight: 800;
  color: #ffffff;
}
.pricing-bar__price small { font-size: 14px; opacity: 0.8; }

/* Trading instruments */
.instrument-grid { margin-top: 18px; }
.instrument-card {
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  background: rgba(255,255,255,0.025);
  padding: 18px;
  height: 100%;
}
.instrument-card__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.instrument-card__icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(56,255,138,0.12);
  border: 1px solid rgba(56,255,138,0.20);
  color: var(--brand-color);
}
.instrument-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.instrument-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.50);
  color: rgba(255,255,255,0.88);
  font-size: 13px;
}

/* Trustpilot block */
.trustpilot-box {
  border: 1px solid rgba(56,255,138,0.18);
  border-radius: 18px;
  background: rgba(255,255,255,0.025);
  padding: 22px;
}

/* Testimonials avatars */
.testimonial__author-thumb img {
  width: 54px !important;
  height: 54px !important;
  object-fit: cover;
  border-radius: 999px;
  border: 1px solid rgba(56,255,138,0.25);
}

/* Mobile tweaks */
@media (max-width: 991px) {
  .header-section .logo img { height: 56px !important; }
  .hero-video-frame { min-height: 300px; border-radius: 14px; }
}


/* ===== Pricing Stripe Bar ===== */
.price-stripe{
  background:#000;
  padding:10px 0;
  border-bottom:1px solid rgba(60,255,170,.15);
}
.price-stripe .tradingview-widget-container{
  background:transparent;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 0 0 1px rgba(60,255,170,.10) inset;
}

/* Instruments section equal height */
.instrument-media img{
  object-fit: cover;
  min-height: 260px;
}
@media (min-width: 992px){
  .instrument-media img{ min-height: 100%; }
}


/* About image visibility fix */
.about__thumb-image img.about-img{
  display:block !important;
  width:100%;
  height:auto;
  position:relative;
  z-index:2;
}

/* Trustpilot hero pill (single-line, bigger, bordered) */
.hero-trustpilot{ margin: 14px 0 16px; }

.tp-pill--big{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding: 12px 18px;
  border-radius: 16px;

  background: rgba(8, 12, 10, .55);
  border: 1px solid rgba(60,255,170,.45);
  box-shadow:
    0 0 0 1px rgba(60,255,170,.12) inset,
    0 14px 35px rgba(0,0,0,.45);

  color:#fff;
  text-decoration:none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  font-size: 15px;
  font-weight: 600;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.tp-pill--big:hover{
  transform: translateY(-1px);
  border-color: rgba(60,255,170,.65);
  box-shadow:
    0 0 0 1px rgba(60,255,170,.18) inset,
    0 18px 45px rgba(0,0,0,.55);
}

.tp-pill__logo{
  font-weight: 800;
  letter-spacing: .2px;
  position: relative;
  padding-left: 16px;
}
.tp-pill__logo:before{
  content:"";
  width:10px;height:10px;
  border-radius: 3px;
  background:#00b67a;
  position:absolute;
  left:0; top:50%;
  transform: translateY(-50%);
  box-shadow: 0 0 16px rgba(0,182,122,.55);
}

.tp-pill__stars{
  color:#00ff9a;
  letter-spacing: 2px;
  font-size: 16px;
  line-height: 1;
}

.tp-pill__cta{
  color:#bfffe6;
  font-weight: 700;
}
@media (max-width:575.98px){
  .tp-pill--big{ width:100%; justify-content:center; }
}


/* Hero video standard height */
.hero-video--compact{
  height: 300px;            /* standard desktop */
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(60,255,170,.18) inset,
    0 18px 45px rgba(0,0,0,.55);
}
.hero-video--compact video{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

/* Responsive heights */
@media (max-width: 991.98px){
  .hero-video--compact{ height: 260px; }
}
@media (max-width: 575.98px){
  .hero-video--compact{ height: 220px; }
}



/* =======================================================================
   2026 Update: Hero + About videos (portrait, full visible, no overlap)
   ======================================================================= */

/* Make the hero banner less tall (reduce excessive top padding from template) */
.banner--hero-tp{
  padding-block-start: 120px !important;
  padding-block-end: 70px !important;
}
@media (max-width: 991.98px){
  .banner--hero-tp{
    padding-block-start: 105px !important;
    padding-block-end: 60px !important;
  }
}

/* IMPORTANT: template makes .banner__thumb absolute on >=768px.
   For our video-left layout, keep it in normal flow so it doesn't overlap sections. */
.banner--video-left .banner__thumb{
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  max-inline-size: 100% !important;
  animation: none !important;
}

/* Row: top align both columns */
.banner--hero-tp .hero-row{
  align-items: flex-start !important;
}

/* Hero video frame (portrait-ish, but capped height) */
.banner--hero-tp .hero-video--compact{
  width: 100%;
  height: clamp(260px, 42vh, 420px) !important;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(60,255,170,.22);
  background: rgba(0,0,0,0.70);
  box-shadow:
    0 0 0 1px rgba(60,255,170,.10) inset,
    0 18px 45px rgba(0,0,0,.55);
}

/* Show the FULL video (no crop). Letterboxing is expected for portrait videos. */
.banner--hero-tp .hero-video--compact video{
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  background: #000;
  display: block;
}

/* Mobile: add safe spacing so next section never peeks behind the video */
@media (max-width: 767.98px){
  .banner--hero-tp{ padding-block-end: 80px !important; }
  .banner--hero-tp .hero-video--compact{ height: 240px !important; }
}
@media (max-width: 575.98px){
  .banner--hero-tp{ padding-block-end: 90px !important; }
  .banner--hero-tp .hero-video--compact{ height: 220px !important; border-radius: 14px; }
}

/* About page (Story) video: same look + capped height */
.about-video-frame,
.story .hero-video-frame{
  height: clamp(260px, 42vh, 420px) !important;
  min-height: unset !important;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(60,255,170,.22);
  background: rgba(0,0,0,0.70);
  box-shadow:
    0 0 0 1px rgba(60,255,170,.10) inset,
    0 18px 45px rgba(0,0,0,.55);
}

.about-video-frame video,
.story .hero-video-frame video{
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  background: #000;
  display: block;
}

@media (max-width: 991.98px){
  .about-video-frame,
  .story .hero-video-frame{ height: 260px !important; }
}
@media (max-width: 575.98px){
  .about-video-frame,
  .story .hero-video-frame{ height: 220px !important; border-radius: 14px; }
}

/* Mobile menu CTA items (Get Started / Dashboard) */
.menu--style1 .menu-cta{
  margin-top: 10px;
}
@media (max-width: 991.98px){
  .menu--style1 .menu-cta a{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px 14px !important;
    border-radius: 12px;
    border: 1px solid rgba(60,255,170,.45);
    background: rgba(0,0,0,.65);
    color: #ffffff !important;
    font-weight: 700;
  }
  .menu--style1 .menu-cta a:hover{ background: rgba(60,255,170,.12); }
  .menu--style1 .menu-cta.menu-cta--primary a{
    background: var(--brand-color) !important;
    color: #000 !important;
    border-color: var(--brand-color) !important;
  }
}

/* =======================================================================
   2026 Update: Hero + About videos (portrait-friendly, full visible)
   ======================================================================= */

/* Reduce excessive hero padding from the base template */
.banner--hero-tp{
  padding-block-start: 120px !important;
  padding-block-end: 70px !important;
}
@media (max-width: 991.98px){
  .banner--hero-tp{
    padding-block-start: 105px !important;
    padding-block-end: 60px !important;
  }
}
@media (max-width: 575.98px){
  .banner--hero-tp{
    padding-block-start: 95px !important;
    padding-block-end: 50px !important;
  }
}

/* IMPORTANT: The template makes .banner__thumb absolute from md+. Override for video-left layout */
.banner--video-left .banner__thumb,
.banner--video-left .banner__thumb-inner,
.banner--video-left .banner__thumb--video{
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  animation: none !important;
  max-inline-size: 100% !important;
  transform: none !important;
}

/* Keep both columns top-aligned */
.banner--hero-tp .hero-row{
  align-items: flex-start !important;
}

.banner--hero-tp .banner__thumb--video{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Standard frame: keep height reasonable but show the FULL video (no cropping) */
.banner--hero-tp .hero-video--compact{
  height: clamp(240px, 40vh, 420px) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.65) !important;
  border: 1px solid rgba(60,255,170,.22) !important;
  box-shadow:
    0 0 0 1px rgba(60,255,170,.10) inset,
    0 18px 45px rgba(0,0,0,.55) !important;
}

.banner--hero-tp .hero-video--compact video{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: #000;
}

/* Ensure hero never overlaps the next section when stacked */
@media (max-width: 991.98px){
  .banner--hero-tp{ padding-block-end: 80px !important; }
  .banner--hero-tp .hero-video--compact{
    height: clamp(220px, 34vh, 360px) !important;
  }
}
@media (max-width: 575.98px){
  .banner--hero-tp{ padding-block-end: 70px !important; }
  .banner--hero-tp .hero-video--compact{ height: 260px !important; }
}

/* ABOUT page top video: match hero behaviour */
.about-video-frame,
.story .hero-video-frame{
  height: clamp(240px, 40vh, 420px) !important;
  min-height: unset !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.65) !important;
}

.about-video-frame video,
.story .hero-video-frame video{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: #000;
}

@media (max-width: 991.98px){
  .about-video-frame,
  .story .hero-video-frame{ height: clamp(220px, 34vh, 360px) !important; }
}
@media (max-width: 575.98px){
  .about-video-frame,
  .story .hero-video-frame{ height: 260px !important; }
}

/* =======================================================================
   2026 Update: Hero + About videos (portrait-friendly, full visible)
   ======================================================================= */

/* Reduce excessive hero padding from the base template */
.banner--hero-tp{
  padding-block-start: 120px !important;
  padding-block-end: 70px !important;
}
@media (max-width: 991.98px){
  .banner--hero-tp{
    padding-block-start: 105px !important;
    padding-block-end: 60px !important;
  }
}
@media (max-width: 575.98px){
  .banner--hero-tp{
    padding-block-start: 95px !important;
    padding-block-end: 50px !important;
  }
}

/* IMPORTANT: the base template makes .banner__thumb absolute on md+.
   For our "video-left" hero we want the video to stay in normal flow. */
.banner--video-left .banner__thumb{
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  inset: auto !important;
  animation: none !important;
  max-inline-size: 100% !important;
  transform: none !important;
}

/* Keep row top-aligned (video starts at the Trustpilot pill line) */
.banner--hero-tp .hero-row{
  align-items: flex-start !important;
}

/* Remove any manual padding/margins that push the hero video too far down */
.banner--hero-tp .banner__thumb--video{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Portrait-friendly frame: keep height reasonable but show full video */
.banner--hero-tp .hero-video--compact{
  height: clamp(240px, 40vh, 420px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0,0,0,0.65) !important;
  border: 1px solid rgba(60,255,170,.22) !important;
  box-shadow:
    0 0 0 1px rgba(60,255,170,.10) inset,
    0 18px 45px rgba(0,0,0,.55) !important;
}

/* Show the full portrait video (no crop) */
.banner--hero-tp .hero-video--compact video{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: #000 !important;
}

/* Ensure the hero always has enough space on mobile (no overlap with next section) */
@media (max-width: 991.98px){
  .banner--hero-tp{ padding-block-end: 80px !important; }
  .banner--hero-tp .hero-video--compact{ height: clamp(220px, 34vh, 360px) !important; }
}
@media (max-width: 575.98px){
  .banner--hero-tp{ padding-block-end: 70px !important; }
  .banner--hero-tp .hero-video--compact{ height: 260px !important; }
}

/* ABOUT page top video: same behaviour as hero */
.about-video-frame,
.story .hero-video-frame{
  height: clamp(240px, 40vh, 420px) !important;
  min-height: unset !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0,0,0,0.65) !important;
}

.about-video-frame video,
.story .hero-video-frame video{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: #000 !important;
}

@media (max-width: 991.98px){
  .about-video-frame,
  .story .hero-video-frame{ height: clamp(220px, 34vh, 360px) !important; }
}
@media (max-width: 575.98px){
  .about-video-frame,
  .story .hero-video-frame{ height: 260px !important; }
}

/* =======================================================================
   2026 Update: Hero + About videos (portrait-friendly, full visible)
   ======================================================================= */

/* Reduce excessive hero padding from the base template */
.banner--hero-tp{
  padding-block-start: 120px !important;
  padding-block-end: 70px !important;
}
@media (max-width: 991.98px){
  .banner--hero-tp{
    padding-block-start: 105px !important;
    padding-block-end: 60px !important;
  }
}
@media (max-width: 575.98px){
  .banner--hero-tp{
    padding-block-start: 95px !important;
    padding-block-end: 50px !important;
  }
}

/* IMPORTANT: the base template makes .banner__thumb absolute from 768px.
   For our video-layout we must keep it in normal flow. */
.banner--video-left .banner__thumb,
.banner--video-left .banner__thumb-inner,
.banner--video-left .banner__thumb--video{
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  animation: none !important;
  max-inline-size: 100% !important;
}

/* Align the two columns from the top (video starts at Trustpilot pill) */
.banner--hero-tp .hero-row{
  align-items: flex-start !important;
}
.banner--hero-tp .banner__thumb--video{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Video frame: standard height, portrait-friendly, show the full video */
.banner--hero-tp .hero-video--compact{
  height: clamp(240px, 40vh, 420px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0,0,0,0.65) !important;
  border: 1px solid rgba(60,255,170,.22) !important;
  box-shadow:
    0 0 0 1px rgba(60,255,170,.10) inset,
    0 18px 45px rgba(0,0,0,.55) !important;
}

.banner--hero-tp .hero-video--compact video{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important; /* FULL video visible */
  background: #000;
}

/* Ensure the next section never overlaps the hero on small screens */
@media (max-width: 991.98px){
  .banner--hero-tp{ padding-block-end: 80px !important; }
  .banner--hero-tp .hero-video--compact{ height: clamp(220px, 34vh, 360px) !important; }
}
@media (max-width: 575.98px){
  .banner--hero-tp{ padding-block-end: 70px !important; }
  .banner--hero-tp .hero-video--compact{ height: 260px !important; }
}

/* ABOUT page top video: match hero behaviour */
.about-video-frame,
.story .hero-video-frame{
  height: clamp(240px, 40vh, 420px) !important;
  min-height: unset !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0,0,0,0.65) !important;
}

.about-video-frame video,
.story .hero-video-frame video{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: #000;
}

@media (max-width: 991.98px){
  .about-video-frame,
  .story .hero-video-frame{ height: clamp(220px, 34vh, 360px) !important; }
}
@media (max-width: 575.98px){
  .about-video-frame,
  .story .hero-video-frame{ height: 260px !important; }
}

/* Pricing: discount badge */
.pricing__item,
.pricing__item-inner{
  position: relative;
}
.pricing__item-badge{
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .3px;
  color: var(--brand-color);
  background: rgba(56,255,138,0.10);
  border: 1px solid rgba(56,255,138,0.35);
  box-shadow: 0 0 0 1px rgba(56,255,138,0.10) inset;
}

/* Mobile menu: show CTA buttons at the bottom */
@media (max-width: 991.98px){
  .menu--style1 .menu-cta{
    padding: 0 16px;
    margin-top: 12px;
  }
  .menu--style1 .menu-cta .trk-btn{
    width: 100%;
    display: flex;
    justify-content: center;
  }
}

/* App dashboard UI */
.app-main{ min-height: calc(100vh - 220px); }
.app-card{
  border-radius: 16px;
  padding: 22px;
  background: rgba(var(--wh-color), 0.04);
  border: 1px solid rgba(56,255,138,0.18);
  box-shadow: 0 0 0 1px rgba(56,255,138,0.08) inset;
}
.app-badge{
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .3px;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
}
.app-badge--active{
  color: var(--brand-color);
  border-color: rgba(56,255,138,0.35);
  background: rgba(56,255,138,0.08);
}
.app-badge--inactive{
  color: rgba(var(--wh-color), 0.85);
}
.step-card{
  height: 100%;
  border-radius: 14px;
  padding: 18px;
  background: rgba(var(--wh-color), 0.03);
  border: 1px solid rgba(56,255,138,0.16);
}
.step-number{
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-weight: 900;
  color: var(--brand-color);
  background: rgba(56,255,138,0.10);
  border: 1px solid rgba(56,255,138,0.25);
  margin-bottom: 12px;
}
.quick-link{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(56,255,138,0.16);
  background: rgba(var(--wh-color), 0.03);
  color: rgba(var(--wh-color), 0.92);
}
.quick-link:hover{
  border-color: rgba(56,255,138,0.32);
  color: rgba(var(--wh-color), 1);
}

/* =========================
   DASHBOARD HERO VIDEO
   ========================= */

.dashboard-video-wrap{
  max-width: 360px;              /* mobile-like portrait */
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(0,0,0,.6);
  box-shadow:
    0 0 0 1px rgba(56,255,138,.18),
    0 18px 45px rgba(0,0,0,.55);
}

.dashboard-video{
  width: 100%;
  height: 380px;
  object-fit: contain;
  display: block;
  border-radius: 18px;
}

/* Tablet */
@media (max-width: 991px){
  .dashboard-video{ height: 260px; }
}

/* Mobile */
@media (max-width: 575px){
  .dashboard-video{ height: 240px; }
}



/* =========================
   HERO PORTRAIT – VISUAL CENTER BALANCE
   ========================= */

/* Center the portrait within the left column with a soft offset */
.hero-video-align{
  display: flex;
  justify-content: center;        /* center, not hard-left/right */
  padding-right: 40px;            /* subtle visual balance */
}

/* portrait container */
.hero-portrait{
  width: 100%;
  max-width: 360px;
  margin: 0 auto;                 /* TRUE centering */
  border-radius: 18px;
  overflow: hidden;
  background: transparent;
}

/* portrait video */
.hero-portrait__video{
  width: 100%;
  height: 280px;
  object-fit: cover;
  background: rgba(0,0,0,.55);
  border-radius: 18px;
  display: block;
}

/* Desktop large screens – slightly more breathing room */
@media (min-width: 1200px){
  .hero-video-align{
    padding-right: 60px;
  }
}

/* Tablet */
@media (max-width: 991.98px){
  .hero-video-align{
    justify-content: center;
    padding-right: 0;
  }
  .hero-portrait{
    max-width: 320px;
  }
  .hero-portrait__video{
    height: 260px;
  }
}

/* Mobile */
@media (max-width: 575.98px){
  .hero-portrait{
    max-width: 100%;
  }
  .hero-portrait__video{
    height: 240px;
    border-radius: 14px;
  }
}


/* =========================
   PRICING DISCOUNT BADGE FIX
   ========================= */

/* Give the pricing card a safe top space */
.pricing__item-inner{
  padding-top: 18px !important;
}

/* If your discount badge uses "20% OFF" ribbon style, move it out */
.pricing__item-inner .pricing-badge,
.pricing__item-inner .discount-badge,
.pricing__item-inner .pricing__badge,
.pricing__item-inner .badge,
.pricing__item-inner span[style*="OFF"]{
  top: -14px !important;
}

/* Common ribbon class in some templates */
.pricing__item-inner .ribbon,
.pricing__item-inner .ribbon-top-left,
.pricing__item-inner .ribbon-top-right{
  transform: translateY(-10px) !important;
}

/* Ensure title/price always stays readable */
.pricing__item-top{
  position: relative;
  z-index: 2;
}