/*
 * ATP Softwares — Distinct Midnight Indigo / Royal Blue / Aqua Theme
 * Original visual direction: dark navigation, light aurora hero and asymmetric accents.
 */

:root {
  --ref-navy-950: #080c20;
  --ref-navy-900: #101735;
  --ref-navy-800: #17204a;
  --ref-navy-700: #24316a;
  --ref-blue: #315bff;
  --ref-blue-hover: #2347db;
  --ref-cyan: #00b8a9;
  --ref-pale-blue: #edf1ff;
  --ref-soft: #f6f7fb;
  --ref-white: #ffffff;
  --ref-ink: #171d38;
  --ref-muted: #66708b;
  --ref-line: #dde2f0;
  --ref-shadow: 0 18px 50px rgba(23, 32, 74, 0.1);
  --ref-shadow-lg: 0 30px 82px rgba(16, 23, 53, 0.2);

  --atp-blue: var(--ref-blue);
  --atp-blue-dark: #253fbd;
  --atp-blue-deep: var(--ref-navy-900);
  --atp-blue-bright: #4a73ff;
  --atp-sky: var(--ref-pale-blue);
  --atp-sky-soft: var(--ref-soft);
  --atp-ink: var(--ref-ink);
  --atp-muted: var(--ref-muted);
  --atp-line: var(--ref-line);
  --atp-shadow: var(--ref-shadow);
  --atp-shadow-lg: var(--ref-shadow-lg);
}

html,
body {
  background: #f7f8fc !important;
}

body {
  color: var(--ref-ink) !important;
}

body::before {
  height: 0 !important;
  background: none !important;
}

::selection {
  color: var(--ref-white) !important;
  background: var(--ref-blue) !important;
}

/* Light information ribbon: deliberately different from the dark reference bar. */
.atp-topbar {
  position: relative;
  z-index: 10001;
  display: flex;
  align-items: center;
  min-height: 38px;
  color: #394363;
  background: linear-gradient(90deg, #f5f7ff, #eef9f8, #f5f7ff);
  border-bottom: 1px solid #dfe5f2;
  font-size: 12px;
  line-height: 1.3;
}

.atp-topbar .container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  width: min(1520px, calc(100% - 48px)) !important;
  max-width: 1520px !important;
}

.atp-topbar-info,
.atp-topbar-social {
  display: flex;
  align-items: center;
  gap: 26px;
  white-space: nowrap;
}

.atp-topbar strong,
.atp-topbar a {
  color: var(--ref-navy-900) !important;
  font-weight: 800;
}

.atp-topbar a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 !important;
}

.atp-topbar a:hover {
  color: var(--ref-blue) !important;
}

.atp-topbar .fa {
  color: var(--ref-cyan);
}

/* Dark, brand-led navigation with a luminous active indicator. */
.ai-header {
  background: rgba(12, 17, 42, 0.98) !important;
  border-bottom: 1px solid rgba(124, 145, 255, 0.18) !important;
  box-shadow: 0 16px 38px rgba(8, 12, 32, 0.24) !important;
  backdrop-filter: blur(20px) saturate(135%) !important;
}

.ai-header .container {
  width: min(1520px, calc(100% - 48px)) !important;
  max-width: 1520px !important;
}

.ai-nav {
  min-height: 88px !important;
  padding: 11px 0 !important;
  gap: 22px !important;
}

.ai-logo {
  color: var(--ref-white) !important;
}

.ai-logo img {
  height: 56px !important;
  max-height: 56px !important;
  padding: 4px !important;
  border: 1px solid rgba(122, 151, 255, 0.3) !important;
  border-radius: 15px !important;
  background: var(--ref-white) !important;
  box-shadow: 0 10px 28px rgba(49, 91, 255, 0.26) !important;
}

.ai-logo span {
  color: var(--ref-white) !important;
  font-size: 20px !important;
}

.ai-menu {
  gap: 5px !important;
}

.ai-menu a {
  min-height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 9px 12px !important;
  color: #d7def8 !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  background: transparent !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

.ai-menu a:hover {
  color: var(--ref-white) !important;
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(134, 157, 255, 0.2) !important;
}

.ai-menu a.active,
.ai-menu .active {
  color: var(--ref-white) !important;
  background: linear-gradient(135deg, var(--ref-blue), #516fff) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 10px 24px rgba(49, 91, 255, 0.3) !important;
}

.site-btn.header-demo {
  min-width: 140px !important;
  min-height: 50px !important;
  padding: 11px 20px !important;
  border-radius: 12px !important;
  color: #08152d !important;
  background: linear-gradient(135deg, #71efe1, #28d2c2) !important;
  border: 1px solid #71efe1 !important;
  box-shadow: 0 15px 34px rgba(0, 184, 169, 0.24) !important;
}

.site-btn.header-demo:hover,
.site-btn.header-demo:focus {
  color: #071225 !important;
  background: linear-gradient(135deg, #8af6ea, #44dfd0) !important;
}

/* Shared buttons */
.site-btn,
.purchase,
input.site-btn,
input[type="submit"],
button.site-btn,
.btn-atp {
  color: var(--ref-white) !important;
  background: linear-gradient(135deg, #315bff, #5a50e8) !important;
  border-color: #315bff !important;
  border-radius: 12px !important;
  box-shadow: 0 13px 30px rgba(49, 91, 255, 0.23) !important;
}

.site-btn:hover,
.site-btn:focus,
.purchase:hover,
.btn-atp:hover {
  color: var(--ref-white) !important;
  background: linear-gradient(135deg, #2347db, #4238c5) !important;
  box-shadow: 0 18px 38px rgba(49, 70, 190, 0.3) !important;
}

.btn-outline-atp {
  color: var(--ref-navy-900) !important;
  background: var(--ref-white) !important;
  border: 1px solid #cad8ea !important;
  box-shadow: 0 10px 24px rgba(4, 17, 31, 0.1) !important;
}

.btn-outline-atp:hover,
.btn-outline-atp:focus {
  color: var(--ref-blue) !important;
  background: var(--ref-pale-blue) !important;
  border-color: #a9c8f4 !important;
}

/* Light aurora hero with sweeping shapes rather than the reference grid. */
.ai-hero {
  min-height: 680px !important;
  padding: 96px 0 92px !important;
  color: var(--ref-ink) !important;
  background:
    radial-gradient(circle at 84% 12%, rgba(0, 184, 169, 0.16), transparent 31%),
    radial-gradient(circle at 8% 88%, rgba(91, 80, 232, 0.16), transparent 30%),
    linear-gradient(112deg, #ffffff 0%, #f2f5ff 48%, #eaf9f7 100%) !important;
}

.ai-hero::before {
  inset: auto -9% -52% 48% !important;
  width: 72% !important;
  height: 118% !important;
  opacity: 1 !important;
  background: linear-gradient(135deg, rgba(49, 91, 255, 0.13), rgba(0, 184, 169, 0.11)) !important;
  border: 1px solid rgba(49, 91, 255, 0.12) !important;
  border-radius: 48% 52% 0 0 / 40% 45% 0 0 !important;
  transform: rotate(-9deg) !important;
  mask-image: none !important;
}

.hero-grid {
  gap: 58px !important;
}

.hero-copy h1 {
  max-width: 760px !important;
  color: var(--ref-navy-900) !important;
  font-size: clamp(44px, 4vw, 64px) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.045em !important;
}

.hero-copy h1::after {
  width: 118px !important;
  height: 5px !important;
  background: linear-gradient(90deg, var(--ref-blue), var(--ref-cyan)) !important;
}

.hero-copy p {
  color: #56627d !important;
}

.mini-label {
  color: #263fae !important;
  background: rgba(255, 255, 255, 0.8) !important;
  border: 1px solid #d9def5 !important;
  box-shadow: 0 10px 28px rgba(49, 91, 255, 0.09) !important;
}

.mini-label::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ref-cyan);
  box-shadow: 0 0 0 5px rgba(0, 184, 169, 0.13);
}

.mini-label .fa {
  display: none !important;
}

.hero-bullets li {
  color: #35405f !important;
  background: rgba(255, 255, 255, 0.76) !important;
  border-color: #dfe4f2 !important;
  box-shadow: 0 10px 25px rgba(34, 44, 90, 0.08) !important;
}

.hero-bullets i,
.tick-list i {
  color: var(--ref-cyan) !important;
}

.dashboard-card,
.about-image {
  background: linear-gradient(145deg, #121936, #202b60) !important;
  border: 1px solid rgba(129, 151, 255, 0.32) !important;
  border-radius: 24px !important;
  box-shadow: 0 34px 88px rgba(23, 32, 74, 0.27) !important;
}

.dashboard-card img,
.about-image img {
  border-color: rgba(124, 190, 249, 0.2) !important;
  box-shadow: 0 20px 52px rgba(0, 0, 0, 0.34) !important;
}

.floating-chip {
  color: var(--ref-white) !important;
  background: linear-gradient(135deg, #151d42, #273675) !important;
  border-color: rgba(124, 150, 255, 0.32) !important;
  box-shadow: 0 16px 42px rgba(16, 23, 53, 0.26) !important;
}

.floating-chip i {
  color: #62e3d7 !important;
}

/* Clean white/pale content area. */
.spad,
.content-section,
.payu-shell {
  background-color: var(--ref-soft) !important;
}

.stats-panel,
.feature-card,
.white-card,
.review-card,
.pricing-card,
.faq-item,
.legal-card,
.contact-box,
.contact-form,
.video-card,
.google-review-card,
.payu-info,
.payu-form-card,
.payu-result-card,
.thankyou-card {
  background: var(--ref-white) !important;
  border-color: var(--ref-line) !important;
  box-shadow: var(--ref-shadow) !important;
}

.feature-card::before,
.pricing-card::before {
  width: 52px !important;
  left: 28px !important;
  right: auto !important;
  background: linear-gradient(90deg, var(--ref-blue), var(--ref-cyan)) !important;
}

.feature-card:hover,
.white-card:hover,
.review-card:hover,
.pricing-card:hover,
.google-review-card:hover,
.video-card:hover {
  border-color: #bcd3ee !important;
  box-shadow: var(--ref-shadow-lg) !important;
}

.icon-badge,
.contact-line i,
.google-avatar {
  color: #263fae !important;
  background: linear-gradient(135deg, #edf0ff, #e7faf7) !important;
  border-color: #d8def4 !important;
}

.section-kicker {
  color: var(--ref-blue) !important;
}

.section-title h2,
.feature-card h3,
.white-card h3,
.pricing-card h3,
.video-card h3,
.faq-item h3,
.legal-card h2,
.legal-card h3,
.contact-box h3,
.contact-form h3,
.payu-info h3,
.payu-form-card h3,
.payu-result-card h3,
.stat-card strong {
  color: var(--ref-navy-900) !important;
}

.stat-card {
  background: linear-gradient(145deg, #ffffff, #f0f2ff) !important;
  border-color: #dde2f0 !important;
}

/* Indigo aurora highlight sections without grid lines. */
.dark-panel {
  color: var(--ref-white) !important;
  background:
    radial-gradient(circle at 12% 10%, rgba(76, 101, 255, 0.25), transparent 30%),
    radial-gradient(circle at 90% 80%, rgba(0, 184, 169, 0.18), transparent 28%),
    linear-gradient(118deg, #0d1431, #1c2452) !important;
  border-color: rgba(129, 151, 255, 0.16) !important;
}

.dark-panel::before {
  inset: -35% auto auto -8% !important;
  width: 340px !important;
  height: 340px !important;
  background: rgba(49, 91, 255, 0.14) !important;
  border: 1px solid rgba(126, 148, 255, 0.18) !important;
  border-radius: 50% !important;
}

.dark-panel h2,
.dark-panel h3,
.dark-panel .atp-inline-011 {
  color: var(--ref-white) !important;
}

.dark-panel p,
.dark-panel .atp-inline-012,
.dark-panel .atp-inline-013,
.dark-panel .tick-list li {
  color: #d1e0f0 !important;
}

.dark-panel .btn-outline-atp {
  color: var(--ref-navy-900) !important;
  background: var(--ref-white) !important;
  border-color: #c4d8ed !important;
}

.page-hero,
.compact-page-hero {
  color: var(--ref-white) !important;
  background:
    radial-gradient(circle at 18% 16%, rgba(86, 106, 255, 0.28), transparent 30%),
    radial-gradient(circle at 88% 74%, rgba(0, 184, 169, 0.18), transparent 28%),
    linear-gradient(118deg, #0c1230 0%, #222b64 100%) !important;
  border-bottom-color: rgba(126, 149, 255, 0.18) !important;
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  width: 340px;
  height: 340px;
  inset: auto -90px -210px auto;
  border: 58px solid rgba(0, 184, 169, 0.08);
  border-radius: 50%;
}

.page-hero .container {
  position: relative;
  z-index: 1;
}

.page-hero::after {
  width: 132px !important;
  left: calc(50% - 66px) !important;
  right: auto !important;
  background: linear-gradient(90deg, var(--ref-blue), var(--ref-cyan)) !important;
}

.page-hero h1 {
  color: var(--ref-white) !important;
}

.page-hero p {
  color: #cfdfef !important;
}

/* Form and checkout accents. */
.contact-form input,
.contact-form select,
.contact-form textarea,
.payu-form-card input,
.payu-form-card select,
.payu-form-card textarea,
input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea,
.form-control {
  color: var(--ref-ink) !important;
  background: #fbfdff !important;
  border-color: #cedbea !important;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus,
.payu-form-card input:focus,
.payu-form-card select:focus,
.payu-form-card textarea:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--ref-blue) !important;
  box-shadow: 0 0 0 4px rgba(8, 100, 232, 0.12) !important;
}

.pricing-card.featured {
  color: var(--ref-white) !important;
  background:
    radial-gradient(circle at 90% 10%, rgba(26, 111, 216, 0.28), transparent 34%),
    linear-gradient(145deg, #061727, #103b6b) !important;
  border-color: rgba(113, 181, 246, 0.2) !important;
}

.pricing-card.featured h3,
.pricing-card.featured p {
  color: var(--ref-white) !important;
}

.pricing-card.featured .site-btn {
  color: var(--ref-white) !important;
  background: linear-gradient(135deg, #0b6cf2, #0759d3) !important;
  border-color: #2f87f6 !important;
}

.payu-shell {
  background: linear-gradient(135deg, #f6f9fd, #eaf2fb) !important;
}

.payu-badge,
.coupon-helper {
  color: #0755b8 !important;
  background: #e9f3ff !important;
  border-color: #bfd8f5 !important;
}

.payu-points i {
  color: var(--ref-blue) !important;
}

.payu-secure-strip span,
.payu-total,
.payu-total-detailed > div,
.payu-table td {
  background: #edf5ff !important;
  border-color: #d4e3f4 !important;
}

/* Two-tone indigo/aqua CTA and midnight footer. */
.cta-band {
  color: var(--ref-white) !important;
  background:
    radial-gradient(circle at 14% 0, rgba(255, 255, 255, 0.16), transparent 31%),
    radial-gradient(circle at 92% 110%, rgba(0, 184, 169, 0.35), transparent 36%),
    linear-gradient(120deg, #315bff, #5046cf) !important;
  border-top-color: rgba(255, 255, 255, 0.16) !important;
}

.cta-band .cta-row {
  position: relative !important;
  overflow: hidden !important;
  padding: 32px 36px !important;
  color: var(--ref-white) !important;
  background: linear-gradient(135deg, rgba(12, 19, 56, 0.38), rgba(25, 33, 83, 0.2)) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 24px !important;
  box-shadow: 0 24px 55px rgba(22, 31, 101, 0.22) !important;
  backdrop-filter: blur(10px) !important;
}

.cta-band .cta-row::before {
  content: "" !important;
  position: absolute !important;
  width: 180px !important;
  height: 180px !important;
  right: -75px !important;
  top: -105px !important;
  border: 32px solid rgba(122, 241, 230, 0.13) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
}

.cta-band .cta-row > * {
  position: relative !important;
  z-index: 1 !important;
}

.cta-row h2,
.cta-row p {
  color: var(--ref-white) !important;
}

.cta-band .site-btn {
  color: #07182f !important;
  background: linear-gradient(135deg, #7af1e6, #41d9cb) !important;
  border-color: #7af1e6 !important;
  box-shadow: 0 16px 36px rgba(2, 33, 76, 0.24) !important;
}

.ai-footer {
  color: #cbd9e8 !important;
  background:
    radial-gradient(circle at 88% 0, rgba(49, 91, 255, 0.2), transparent 31%),
    linear-gradient(145deg, #080c20, #151d42) !important;
  border-top-color: #00b8a9 !important;
}

.ai-footer .footer-grid {
  padding: 36px !important;
  color: #d8e2f7 !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.025)) !important;
  border: 1px solid rgba(151, 169, 255, 0.17) !important;
  border-radius: 24px !important;
  box-shadow: 0 24px 60px rgba(3, 6, 20, 0.23) !important;
}

.ai-footer h4 {
  color: var(--ref-white) !important;
}

.ai-footer p,
.ai-footer a {
  color: #d8e2f7 !important;
  opacity: 1 !important;
}

.ai-footer a:hover {
  color: #79beff !important;
}

.copyright {
  color: #8fa8c2 !important;
  border-color: rgba(157, 199, 240, 0.13) !important;
}

.footer-logo img {
  padding: 6px !important;
  background: var(--ref-white) !important;
  border: 1px solid rgba(102, 177, 247, 0.3) !important;
  box-shadow: 0 12px 28px rgba(2, 5, 18, 0.22) !important;
}

.sticky-demo a {
  color: var(--ref-white) !important;
  background: linear-gradient(135deg, #315bff, #5046cf) !important;
  border-color: rgba(255, 255, 255, 0.62) !important;
  box-shadow: 0 15px 36px rgba(1, 28, 64, 0.32) !important;
}

/* Thank-you state and the first-visit popup. */
.thankyou-premium {
  background:
    radial-gradient(circle at 50% 0, rgba(8, 100, 232, 0.14), transparent 38%),
    linear-gradient(180deg, #ffffff, #edf5ff) !important;
}

.thankyou-card h1 {
  color: var(--ref-navy-900) !important;
}

.thankyou-card .mini-label {
  color: #0755b8 !important;
  background: #e9f3ff !important;
  border-color: #bfd8f5 !important;
}

.success-icon,
.thankyou-icon {
  color: var(--ref-white) !important;
  background: linear-gradient(135deg, var(--ref-blue), var(--ref-cyan)) !important;
  box-shadow: 0 14px 34px rgba(8, 100, 232, 0.25) !important;
}

.atp-demo-backdrop {
  background: rgba(7, 10, 28, 0.86) !important;
  backdrop-filter: blur(10px) !important;
}

.atp-demo-dialog {
  border-color: rgba(134, 151, 255, 0.28) !important;
  background: var(--ref-white) !important;
  border-radius: 24px !important;
  box-shadow: 0 36px 100px rgba(4, 7, 24, 0.58) !important;
}

.atp-demo-modal-head {
  color: var(--ref-white) !important;
  background:
    radial-gradient(circle at 92% 10%, rgba(0, 184, 169, 0.24), transparent 38%),
    linear-gradient(125deg, #121938, #3546a0) !important;
  border-radius: 23px 23px 0 0 !important;
}

.atp-demo-modal-icon {
  color: #75eee2 !important;
  background: rgba(0, 184, 169, 0.11) !important;
  border-color: rgba(117, 238, 226, 0.28) !important;
}

.atp-demo-modal-copy span {
  color: #75eee2 !important;
}

.atp-demo-modal-copy h2 {
  color: var(--ref-white) !important;
}

.atp-demo-modal-copy p {
  color: #d9e0ff !important;
}

.atp-demo-close {
  color: var(--ref-white) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(169, 181, 255, 0.25) !important;
}

.atp-demo-close:hover,
.atp-demo-close:focus {
  color: var(--ref-blue) !important;
  background: var(--ref-white) !important;
}

.atp-demo-loading {
  color: var(--ref-blue) !important;
}

.atp-demo-modal-foot {
  color: #60708a !important;
  background: linear-gradient(90deg, #f3f5ff, #eefaf8) !important;
  border-top-color: var(--ref-line) !important;
}

.atp-demo-modal-foot i {
  color: var(--ref-cyan) !important;
}

.atp-demo-modal.is-success .atp-demo-modal-icon {
  color: var(--ref-white) !important;
  background: linear-gradient(135deg, var(--ref-blue), var(--ref-cyan)) !important;
}

html.atp-popup-embed .atp-topbar,
html.atp-popup-embed .ai-header {
  display: none !important;
}

/* Responsive treatment for the two-level header. */
@media (max-width: 1180px) {
  .atp-topbar-info {
    gap: 16px;
  }

  .atp-topbar-info span:nth-child(4) {
    display: none;
  }

  .ai-menu {
    border-top-color: rgba(129, 151, 255, 0.2) !important;
  }
}

@media (max-width: 760px) {
  .atp-topbar {
    min-height: 38px;
    font-size: 11px;
  }

  .atp-topbar .container {
    width: calc(100% - 24px) !important;
  }

  .atp-topbar-info span:nth-child(n+3),
  .atp-topbar-social {
    display: none;
  }

  .atp-topbar-info {
    width: 100%;
    justify-content: center;
    gap: 12px;
  }
}

@media (max-width: 640px) {
  .ai-header .container {
    width: calc(100% - 24px) !important;
  }

  .ai-nav {
    min-height: auto !important;
  }

  .ai-logo {
    color: var(--ref-white) !important;
  }

  .ai-menu {
    background: var(--ref-navy-900) !important;
    scrollbar-color: #95b9e6 transparent !important;
  }

  .ai-menu a {
    min-height: 38px !important;
    padding: 8px 11px !important;
    color: #e3e8ff !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(135, 156, 255, 0.17) !important;
  }

  .ai-menu a.active,
  .ai-menu .active {
    color: var(--ref-white) !important;
    background: linear-gradient(135deg, var(--ref-blue), #5a50e8) !important;
  }

  .ai-hero {
    padding-top: 70px !important;
  }

  .cta-band .cta-row,
  .ai-footer .footer-grid {
    padding: 24px 20px !important;
    border-radius: 20px !important;
  }
}