/*
 * ProdTracker Homepage Overrides
 * Dark / professional SaaS restyle
 */

/* ===========================
   Colour Variables
   =========================== */
:root {
  --pt-accent: #4a90d9;
  --pt-accent-hover: #5da0e8;
  --pt-dark: #16213e;
  --pt-darker: #1a1a2e;
  --pt-navy: #0f3460;
  --pt-text: #2d3436;
  --pt-text-muted: #636e72;
  --pt-bg-alt: #f7f8fa;
  --pt-footer-bg: #111827;
}

/* ===========================
   Typography
   =========================== */
body.body-wrapper {
  color: var(--pt-text);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--pt-dark);
  font-weight: 700;
}

p, .regular {
  color: var(--pt-text-muted);
}

.text-muted {
  color: var(--pt-text-muted) !important;
}

/* ===========================
   Navigation
   =========================== */
.main-nav .navbar-nav .nav-item .nav-link {
  color: var(--pt-text);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.main-nav .navbar-nav .nav-item .nav-link:hover {
  color: var(--pt-accent);
}

.main-nav .navbar-nav .nav-item.active .nav-link {
  color: var(--pt-accent);
}

.main-nav .navbar-nav .nav-item.active .nav-link:before {
  background: var(--pt-accent);
}

.main-nav .dropdown .dropdown-menu .dropdown-item.active,
.main-nav .dropdown .dropdown-menu .dropdown-item:hover,
.main-nav .dropdown .dropdown-menu .dropdown-item:focus {
  color: var(--pt-accent);
}

/* ===========================
   Hero Section
   =========================== */
.gradient-banner {
  padding: 120px 0 160px;
}

.gradient-banner::before {
  background-image: linear-gradient(135deg, var(--pt-darker) 0%, var(--pt-dark) 40%, var(--pt-navy) 100%);
}

/* Subtle dot-grid overlay instead of animated shapes */
.gradient-banner::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 30px 30px;
  pointer-events: none;
}

/* Hide the old animated shapes */
.shapes-container {
  display: none;
}

/* ===========================
   Buttons
   =========================== */
.btn-main,
.btn-main-md,
.btn-main-sm {
  background: var(--pt-accent);
  border-color: var(--pt-accent);
  border-radius: 6px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.btn-main:hover,
.btn-main-md:hover,
.btn-main-sm:hover {
  background: var(--pt-accent-hover);
  border-color: var(--pt-accent-hover);
}

.btn-main:focus,
.btn-main-md:focus,
.btn-main-sm:focus {
  box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.3);
}

/* ===========================
   Pull-top Feature Cards
   =========================== */
.pull-top .rounded {
  border-radius: 10px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

.pull-top .text-primary {
  color: var(--pt-accent) !important;
}

.pull-top .fa {
  font-size: 3rem;
}

.pull-top .col-lg-4 {
  transition: transform 0.2s ease;
}

.pull-top .col-lg-4:hover {
  transform: translateY(-4px);
}

/* ===========================
   Feature Sections
   =========================== */
.feature-content h2 {
  color: var(--pt-dark);
  font-weight: 700;
}

.feature-content .desc {
  color: var(--pt-text-muted);
  line-height: 1.7;
}

.testimonial {
  border-left: 3px solid var(--pt-accent);
  padding-left: 20px;
  margin-top: 30px;
}

.testimonial p {
  font-style: italic;
  color: var(--pt-text);
}

/* ===========================
   Pricing Section
   =========================== */
.pricing-table .plan-recommended {
  background-color: #e8f0fa;
  border-left-color: var(--pt-accent);
  border-right-color: var(--pt-accent);
}

.pricing-table .plan-recommended-top {
  border-top-color: var(--pt-accent);
}

.pricing-table .plan-recommended-bottom {
  border-bottom-color: var(--pt-accent);
}

.pricing-table .plan-header.plan-recommended {
  color: var(--pt-accent);
}

.pricing-table .plan-badge {
  background-color: var(--pt-accent);
}

/* ===========================
   Early Access Section
   =========================== */
.bg-gray {
  background: linear-gradient(135deg, var(--pt-darker) 0%, var(--pt-dark) 100%);
}

.bg-gray .section-title h2 {
  color: #fff;
}

.bg-gray .section-title p {
  color: rgba(255, 255, 255, 0.75);
}

.bg-gray .btn-primary {
  background-color: var(--pt-accent);
  border-color: var(--pt-accent);
  border-radius: 6px;
  font-weight: 600;
}

.bg-gray .btn-primary:hover {
  background-color: var(--pt-accent-hover);
  border-color: var(--pt-accent-hover);
}

/* ===========================
   Footer
   =========================== */
.footer-main {
  background: var(--pt-footer-bg);
}

.footer-main .block-2 h6 {
  color: #e2e8f0;
}

.footer-main .block-2 ul li a {
  color: #94a3b8;
}

.footer-main .block-2 ul li a:hover {
  color: #fff;
}

.footer-main .block ul.social-icon li a {
  background: #1e293b;
  color: #94a3b8;
}

.footer-main .block ul.social-icon li a:hover {
  background: var(--pt-accent);
  color: #fff;
}

.bg-dark {
  background-color: #0f172a !important;
}

/* ===========================
   Section Backgrounds
   =========================== */
.section.bg-gray:not(.gradient-banner) {
  background: linear-gradient(135deg, var(--pt-darker) 0%, var(--pt-dark) 100%);
}

/* Pricing section — dark gradient instead of background image */
.bg-1 {
  background: linear-gradient(135deg, #0f172a 0%, var(--pt-dark) 50%, var(--pt-navy) 100%) !important;
  /* background-image: none !important; */
}

.bg-1 .section-title h2 {
  color: #fff;
}

.bg-1 .section-title p {
  color: rgba(255, 255, 255, 0.75);
}

.bg-1 .rounded {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.bg-1 .pricing-table td {
  color: rgba(255, 255, 255, 0.85);
}

.bg-1 .pricing-table tr:nth-child(even) td:not(.plan-recommended) {
  background-color: rgba(255, 255, 255, 0.03);
}

.bg-1 .pricing-table .plan-recommended {
  background-color: rgba(74, 144, 217, 0.12);
}

.bg-1 p {
  color: rgba(255, 255, 255, 0.7);
}

/* ===========================
   Scroll to top
   =========================== */
.scroll-top-to {
  background: var(--pt-accent);
}

.scroll-top-to:hover {
  background: var(--pt-dark);
}

/* ===========================
   HR accent
   =========================== */
hr {
  border-top-color: var(--pt-accent);
}