/* VisCharts custom polish — loaded after demo.css. Safe, presentational only. */

/* Hero headline accent: replace the dated hard-yellow text-shadow with a
   tasteful warm gradient that reads on both light and dark themes. */
.hero-accent {
  font-weight: 800 !important;
  background: linear-gradient(90deg, #ffd54a 0%, #ffb300 50%, #ff8f00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #ffb300; /* fallback for browsers without background-clip:text */
  letter-spacing: 0.5px;
}

/* ---------------------------------------------------------------------------
   Text-first hero (image disabled). Big, bold headline that fills the section,
   with a subtle eyebrow pill, an animated word rotator, and indicator chips.
   --------------------------------------------------------------------------- */
.hero-text-only {
  max-width: 880px;
  margin: 0 auto;
  padding: 2rem 0 1rem;
}
@media (min-width: 992px) {
  /* The template caps .hero-text-box at 550px. Override it (with matching
     specificity that wins on source order) so the hero spans the full
     container width — same as the "What you get" section. */
  .landing-hero .hero-text-box.hero-text-only {
    max-width: none;
  }
}
/* On big screens let the hero stretch wider than the standard container so it
   feels more expansive than the rest of the page. */
@media (min-width: 1200px) {
  .landing-hero > .container {
    max-width: 1320px;
  }
}
@media (min-width: 1400px) {
  .landing-hero > .container {
    max-width: 1560px;
  }
}

/* Comfortable, balanced gap between the hero and the "What you get" section. */
.landing-hero.section-py {
  padding-bottom: 3.5rem;
}
.landing-features.section-py {
  padding-top: 3rem;
}

/* Eyebrow pill */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem;
  margin-bottom: 1.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #b4bdc6;
  background: rgba(24, 201, 142, 0.1);
  border: 1px solid rgba(24, 201, 142, 0.28);
  border-radius: 50rem;
}
.hero-eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #18c98e;
  box-shadow: 0 0 0 0 rgba(24, 201, 142, 0.6);
  animation: heroPulse 2s infinite;
}
@keyframes heroPulse {
  0% { box-shadow: 0 0 0 0 rgba(24, 201, 142, 0.55); }
  70% { box-shadow: 0 0 0 9px rgba(24, 201, 142, 0); }
  100% { box-shadow: 0 0 0 0 rgba(24, 201, 142, 0); }
}

/* Headline — large and tight */
.hero-headline {
  font-weight: 800;
  font-size: clamp(2.5rem, 6.5vw, 4.75rem);
  line-height: 1.05;
  letter-spacing: -1px;
  margin-bottom: 1.25rem;
}
.hero-headline .hero-accent {
  /* animate the gradient so the accent word subtly shimmers */
  background-size: 200% auto;
  animation: heroShimmer 5s linear infinite;
}
@keyframes heroShimmer {
  to { background-position: 200% center; }
}

/* Subline with the rotating word */
.hero-subline {
  font-size: clamp(1.1rem, 2.4vw, 1.6rem);
  font-weight: 600;
  color: #c6ccd4;
  margin-bottom: 1.25rem;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.4rem;
}

/* CSS word rotator: a fixed-height mask scrolling through stacked words */
.hero-rotator {
  display: inline-block;
  height: 1.5em;
  overflow: hidden;
  vertical-align: bottom;
  text-align: left;
}
.hero-rotator-track {
  display: flex;
  flex-direction: column;
  animation: heroRotate 9s cubic-bezier(0.8, 0, 0.2, 1) infinite;
}
.hero-rotator-word {
  height: 1.5em;
  line-height: 1.5em;
  font-weight: 800;
  white-space: nowrap;
  background: linear-gradient(90deg, #3fe0a8 0%, #18c98e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #3fe0a8;
}
@keyframes heroRotate {
  0%, 27% { transform: translateY(0); }
  33%, 60% { transform: translateY(-1.5em); }
  66%, 93% { transform: translateY(-3em); }
  100% { transform: translateY(-4.5em); }
}

/* Supporting paragraph */
.hero-lead {
  max-width: 620px;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: #9aa0c2;
}

/* Indicator chips */
.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.95rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #d4d7f0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50rem;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.hero-chip i {
  color: #3fe0a8;
  font-size: 1.05rem;
}
.hero-chip:hover {
  transform: translateY(-2px);
  background: rgba(24, 201, 142, 0.1);
  border-color: rgba(24, 201, 142, 0.35);
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .hero-eyebrow-dot,
  .hero-headline .hero-accent,
  .hero-rotator-track {
    animation: none;
  }
  .hero-rotator-track {
    transform: translateY(0);
  }
}

/* Two-card pricing: keep Free + Premium centered and from stretching too wide. */
.pricing-plans {
  justify-content: center;
}
.pricing-plans > .col-lg {
  max-width: 420px;
}

/* Modernize card depth/spacing without changing layout. */
.pricing-plans .card {
  border-radius: 0.75rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pricing-plans .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.12);
}
.pricing-plans .card.border-primary {
  box-shadow: 0 0.5rem 1.5rem rgba(24, 201, 142, 0.18);
}

/* Hero TradingView chart: framed, rounded, subtle depth so it reads as a real
   product screenshot. */
.hero-chart {
  max-width: 100%;
  height: auto;
  border-radius: 0.75rem;
  box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Hero trust / social-proof line under the CTAs. */
.hero-trust .hero-stars {
  color: #ffb300;
  letter-spacing: 1px;
}
.hero-trust a {
  color: inherit;
  font-weight: 600;
}

/* Deeper, cohesive dark backdrop (dark mode only) so the page matches the
   near-black tone of the hero chart image. Sections keep slight layering for
   depth; cards stay lighter for separation. */
.dark-style body {
  background-color: #0f111a;
}
.dark-style .bg-body {
  background-color: #11131d !important;
}
.dark-style .landing-hero {
  background-color: #0f111a;
}
/* Subtle brand-purple ambient glow behind the hero, echoing the image. */
.dark-style .landing-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(60% 50% at 50% 30%, rgba(24, 201, 142, 0.18) 0%, rgba(24, 201, 142, 0) 70%);
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   Cohesive dark surfaces (dark mode only). The template's default slate
   (#2b2c40) looked pale against the deepened backdrop, so navbar, cards and
   footer are retoned to match. Cards stay slightly elevated for separation.
   --------------------------------------------------------------------------- */

/* Navbar: dark translucent glass with a hairline bottom border. */
.dark-style .landing-navbar {
  background-color: rgba(17, 19, 29, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}
/* Glass blur on desktop only. On mobile the slide-in menu is position:fixed, and
   a backdrop-filter on the navbar becomes the containing block for that fixed
   menu — which trapped it inside the short navbar box, rendering it behind the
   hero. Dropping the filter on mobile lets the menu position against the
   viewport (full-height slide-in) again. */
@media (min-width: 992px) {
  .dark-style .landing-navbar {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}
/* Make the mobile slide-in menu solid and above everything. */
@media (max-width: 991.98px) {
  .dark-style .navbar.landing-navbar .landing-nav-menu {
    background-color: #11131d !important;
    z-index: 11000;
  }
  .navbar.landing-navbar .landing-menu-overlay {
    z-index: 10999;
  }
}

/* All cards (reviews, pricing, contact, help center, etc.): darker, elevated
   surface for one consistent look site-wide. */
.dark-style .card {
  background-color: #181b27 !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}
/* Keep the Premium card's purple accent border. */
.dark-style .pricing-plans .card.border-primary {
  border-color: #18c98e !important;
}

/* FAQ accordion (home page #FAQ + faq page): the default slate looked bright. */
.dark-style .accordion-item {
  background-color: #181b27 !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}
.dark-style .accordion-button {
  background-color: #181b27 !important;
  color: #d9dce6 !important;
}
.dark-style .accordion-button:not(.collapsed) {
  background-color: #1d2130 !important;
  color: #ffffff !important;
}
.dark-style .accordion-body {
  color: #a7abbd;
}

/* Navbar dropdowns + mobile menu surface. */
.dark-style .dropdown-menu {
  background-color: #181b27;
  border-color: rgba(255, 255, 255, 0.06);
}
/* Desktop: the nav-links container must stay transparent so links sit on the
   glass navbar (like the logo). Only give it a solid background on mobile, where
   it becomes a collapsed dropdown. */
@media (max-width: 991.98px) {
  .dark-style .landing-nav-menu {
    background-color: rgba(17, 19, 29, 0.96) !important;
  }
}
/* Navbar links: active/hover use the brand emerald (the theme hardcoded the old
   indigo #666cff). Matches the footer link hover color. */
.dark-style .navbar.landing-navbar .navbar-nav .nav-link:hover,
.dark-style .navbar.landing-navbar .navbar-nav .nav-link:focus,
.dark-style .navbar.landing-navbar .navbar-nav .nav-link.active,
.dark-style .navbar.landing-navbar .navbar-nav .nav-link.show,
.dark-style .navbar.landing-navbar .navbar-nav .show > .nav-link,
.dark-style .navbar.landing-navbar .navbar-nav .active > .nav-link {
  color: #18c98e !important;
}
.dark-style .navbar.landing-navbar .navbar-nav .nav-link:hover .menu-icon,
.dark-style .navbar.landing-navbar .navbar-nav .nav-link.active .menu-icon,
.dark-style .navbar.landing-navbar .navbar-nav .show > .nav-link .menu-icon,
.dark-style .navbar.landing-navbar .navbar-nav .active > .nav-link .menu-icon {
  color: #18c98e !important;
}

/* Footer: a touch darker than the base to ground the page; dim the pale
   background image so it blends with the dark theme. */
.dark-style .landing-footer {
  background-color: #0b0d14;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.dark-style .landing-footer .footer-top {
  background-color: #0b0d14;
}
.dark-style .landing-footer .footer-bg {
  opacity: 0.12;
}

/* About page: gradient icon badges for the info cards and values grid. */
.about-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: #18c98e;
  background: rgba(24, 201, 142, 0.12);
  border: 1px solid rgba(24, 201, 142, 0.25);
}
.about-icon-sm {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  font-size: 1.25rem;
}

/* Features section icon badge — compact brand-purple gradient chip with the glyph
   sized to fill it; used in an icon-left / text-right card layout. */
.feature-ri-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9rem;
  line-height: 1;
  color: #fff;
  background: linear-gradient(135deg, #18c98e 0%, #12b886 100%);
  box-shadow: 0 0.5rem 1.25rem rgba(24, 201, 142, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.features-icon-box:hover .feature-ri-icon {
  transform: translateY(-3px);
  box-shadow: 0 0.75rem 1.75rem rgba(24, 201, 142, 0.45);
}
/* Left-align the description in the new icon-left/text-right layout (the template
   centers it with margin:auto + max-width). */
.features-icon-box .features-icon-description {
  max-width: none;
  margin: 0;
}
.value-item h6 {
  color: #fff;
}

/* Billing period selector — informative selectable cards that show each term's
   per-month price + savings, so longer terms sell themselves. */
.period-selector {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  width: 100%;
  max-width: 720px;
}
.period-option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  padding: 0.85rem 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  cursor: pointer;
  background: #181b27;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.period-option:hover {
  border-color: rgba(24, 201, 142, 0.55);
}
.btn-check:checked + .period-option {
  border-color: #18c98e;
  background: rgba(24, 201, 142, 0.14);
  box-shadow: 0 0 0 1px #18c98e inset;
}
.btn-check:focus-visible + .period-option {
  outline: 2px solid #18c98e;
  outline-offset: 2px;
}
.period-name {
  font-weight: 600;
  color: #fff;
  font-size: 0.95rem;
  line-height: 1.2;
}
.period-permonth {
  font-size: 0.85rem;
  font-weight: 600;
  color: #c7cad6;
}
.period-badge {
  font-size: 0.7rem;
  font-weight: 600;
  color: #28c76f;
  min-height: 1rem;
  line-height: 1rem;
}
.period-ribbon {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #1b1e2e;
  background: linear-gradient(135deg, #ffd54a, #ff8f00);
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
}

/* "Popular" tag on the Premium card — same gold treatment as the Best value ribbon.
   !important overrides the template's default .badge color/background. */
.popular-tag {
  text-transform: uppercase;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #1b1e2e !important;
  background: linear-gradient(135deg, #ffd54a, #ff8f00) !important;
}
@media (max-width: 767.98px) {
  .period-selector {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
  }
}

/* AOS safety net: if animations are disabled or AOS fails to init, never leave
   content invisible. */
.no-aos [data-aos] {
  opacity: 1 !important;
  transform: none !important;
}

/* ---------------------------------------------------------------------------
   Primary accent → emerald. Replaces the template's generic indigo-blue
   (#666cff / hover #5c61e6) on buttons, links, badges and form controls.
   Gold (#ffb300) remains the secondary highlight (hero accent, ribbons).
   --------------------------------------------------------------------------- */
:root,
.light-style,
.dark-style {
  --bs-primary: #18c98e;
  --bs-primary-rgb: 24, 201, 142;
  --bs-link-color: #18c98e;
  --bs-link-hover-color: #14b07b;
}

/* Solid primary buttons */
.btn-primary {
  --bs-btn-bg: #18c98e;
  --bs-btn-border-color: #18c98e;
  --bs-btn-hover-bg: #14b07b;
  --bs-btn-hover-border-color: #14b07b;
  --bs-btn-active-bg: #14b07b;
  --bs-btn-active-border-color: #14b07b;
  --bs-btn-disabled-bg: #18c98e;
  --bs-btn-disabled-border-color: #18c98e;
  color: #fff !important;
  background-color: #18c98e !important;
  border-color: #18c98e !important;
}
.btn-primary:hover,
.btn-check:focus + .btn-primary,
.btn-primary:focus,
.btn-primary.focus,
.btn-check:checked + .btn-primary,
.btn-check:active + .btn-primary,
.btn-primary:active,
.btn-primary.active,
.btn-primary.show.dropdown-toggle,
.show > .btn-primary.dropdown-toggle {
  color: #fff !important;
  background-color: #14b07b !important;
  border-color: #14b07b !important;
}
.btn-primary.disabled,
.btn-primary:disabled {
  color: #fff !important;
  background-color: #18c98e !important;
  border-color: #18c98e !important;
}

/* Outline primary buttons (e.g. "See the indicators") */
.btn-outline-primary {
  color: #18c98e !important;
  border-color: #18c98e !important;
  background-color: transparent;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary.focus,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary.dropdown-toggle.show,
.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary {
  color: #fff !important;
  background-color: #18c98e !important;
  border-color: #18c98e !important;
}

/* Text / background / border utilities that referenced primary */
.text-primary {
  color: #18c98e !important;
}
.bg-primary {
  background-color: #18c98e !important;
}
.border-primary {
  border-color: #18c98e !important;
}
.bg-label-primary {
  color: #18c98e !important;
  background-color: rgba(24, 201, 142, 0.16) !important;
}

/* Links that pick up the theme link color */
.footer-theme-link,
a.footer-link:hover {
  color: #18c98e !important;
}

/* Form controls: focus ring + checked state */
.form-control:focus,
.form-select:focus {
  border-color: #18c98e;
  box-shadow: 0 0 0 0.05rem #18c98e;
}
.form-check-input:checked {
  background-color: #18c98e;
  border-color: #18c98e;
}
.form-check-input:focus {
  border-color: #18c98e;
  box-shadow: 0 0 0 0.25rem rgba(24, 201, 142, 0.25);
}