/* =====================================
   THEME VARIABLES
   Easily switch between color schemes
===================================== */
:root {
  /* === Base (gray industrial theme) === */
  --bg-color: #1c1c1c;
  --navbar-color: #2a2a2a;   /* lighter gray menu */
  --footer-color: #1f1f1f;
  --text-color: #ffffff;
  --text-muted: #d0d0d0;
  --accent-color: #ffc107;   /* gold accent */
  --accent-hover: #ffda47;
  --shadow-color: rgba(0, 0, 0, 0.5);
  --glass-bg: rgba(255, 255, 255, 0.06);
  --glass-border: rgba(255, 255, 255, 0.12);

  /* Fallbacks for measured chrome (updated by JS) */
  --nav-h: 56px;
  --footer-h: 56px;
}

/* === Optional alternative: blue theme === */
/*
:root {
  --bg-color: #1a2030;
  --navbar-color: #1a2030;
  --footer-color: #1a2030;
  --text-color: #ffffff;
  --text-muted: #d0d0d0;
  --accent-color: #ffc107;
  --accent-hover: #ffda47;
  --shadow-color: rgba(0, 0, 0, 0.3);
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.15);
}
*/


/* ================================
   GLOBAL STYLES
================================= */
html {
  scroll-padding-top: 80px;
  scroll-behavior: smooth;

  /* Keep layout width stable on modal open without extra left gutter */
  scrollbar-gutter: stable;
  
}

/* Stop reserving a gutter globally (prevents odd grey strip on Home/Pricing) */
html { scrollbar-gutter: auto; }

/* Keep anti-jump behavior on page-fit pages via no gutter + modal padding removal */
.page-fit html, html.no-root-gutter { scrollbar-gutter: auto; }



/* But disable the reserved gutter on page-fit pages */
html.no-root-gutter { scrollbar-gutter: auto; }

@media (max-width: 767px) {
  html { scroll-padding-top: 200px; }
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: 'Inter', sans-serif;
  margin: 0;
  overflow-y: auto;   /* normal scroll by default */
  overflow-x: hidden; /* prevent horizontal leaks/gaps */
  width: 100%;
}

/* ================================
   NAVBAR
================================= */
.navbar.sticky-top {
  background-color: var(--navbar-color) !important;
  box-shadow: 0 2px 8px var(--shadow-color);
  transition: box-shadow .3s ease, background-color .3s ease;
}

/* Make navbar truly full-bleed */
.navbar .container-fluid { padding-left: 1rem; padding-right: 1rem; }

.navbar .nav-link {
  color: var(--text-muted);
}
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active {
  color: var(--text-color);
}


/* ================================
   FOOTER
================================= */
footer {
  background-color: var(--footer-color);
  color: var(--text-color);
  flex: 0 0 auto; /* never shrink */
}

/* ================================
   MAIN SECTION
================================= */
main { flex: 0 0 auto; } /* we'll control height in page-fit mode */

.main {
  background-color: transparent;
  padding: 2rem;
  border-radius: 10px;
  margin: 2rem auto;
  max-width: 800px;
}

.main p,
.main li {
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: 0.2px;
  margin-bottom: 1rem;
}

.main h2,
.main h3 {
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--text-color);
}

/* ================================
   BUTTONS
================================= */
.button,
.btn {
  background-color: var(--accent-color);
  color: #111;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 6px;
  text-decoration: none;
}
.button:hover,
.btn:hover { background-color: var(--accent-hover); color: #000; }

/* CTA variants with glow (optional) */
.purchase--btn { animation: goldPulse 1s infinite; transition: all .3s ease; }
.purchase--btn:hover {
  background-color: #ff4d4d; color: #fff;
  animation: redGlow 1s infinite; transform: scale(1.05);
}
.cta-button { font-weight: bold; background-color: var(--accent-color); color: #111; animation: goldPulse 1s infinite; transition: all .3s; }
.cta-button:hover { background-color: #ff4d4d; color: #fff; animation: redGlow 1s infinite; transform: scale(1.05); }

/* ================================
   CONTACT FORM
================================= */
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.5rem;
  margin: 0.5rem 0;
  border-radius: 6px;
  border: none;
}

/* ================================
   PROFILE SECTION
================================= */
.profile-link a {
  color: var(--accent-color);
  text-decoration: none;
  margin: 0 5px;
  font-size: 1.2rem;
}
.profile-pic {
  width: 160px;
  height: 160px;
  border-radius: 15px;
  object-fit: cover;
  margin-bottom: 1rem;
}
.about-person { text-align: center; margin-bottom: 2rem; }

/* ================================
   IMAGE STYLING
================================= */
img.img-fluid {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 15px;
}

.screenshot {
  width: 100%;
  border-radius: 10px;
  margin: 1rem 0;
}

/* ================================
   PRICING SECTION
================================= */
.card {
  border-radius: 12px;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.card .btn { margin-top: auto; }
.card:hover {
  transform: scale(1.03);
  box-shadow: 0 0 18px rgba(255, 193, 7, 0.3), 0 0 8px rgba(255, 193, 7, 0.2);
  border: 1px solid rgba(255, 193, 7, 0.5);
}

/* ================================
   GLASS BOX
================================= */
.glass-box {
  background: var(--glass-bg);
  border-radius: 20px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  box-shadow: 0 8px 32px var(--shadow-color);
}

/* ================================
   CHECKOUT
================================= */
.checkout-wrapper {
  background: var(--glass-bg);
  border-radius: 20px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  box-shadow: 0 8px 32px var(--shadow-color);
  max-width: 500px;
  margin: 2rem auto;
  padding: 2rem;
}

.input_container { margin-bottom: 1rem; }
.input_label { font-weight: 500; display: block; margin-bottom: 0.25rem; }
.input_field {
  width: 100%;
  padding: 0.5rem;
  border: none;
  border-radius: 8px;
  background-color: #fff;
  color: #000;
}

.payment--options {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.payment--options button {
  flex: 1;
  padding: 0.5rem;
  border: none;
  border-radius: 8px;
  background-color: var(--accent-color);
  color: #111;
  font-weight: 500;
  cursor: pointer;
}
.payment--options button:hover { background-color: var(--accent-hover); }

.separator { text-align: center; margin: 1rem 0; font-size: 0.9rem; opacity: 0.7; }
.purchase--btn {
  width: 100%;
  background-color: var(--accent-color);
  border: none;
  border-radius: 8px;
  padding: 0.75rem;
  font-weight: bold;
  color: #111;
}

/* ================================
   BACK BUTTON
================================= */
.back-button {
  position: absolute;
  top: 1rem;
  right: 1rem;
  color: #ff4d4d;
  font-size: 2rem;
  text-decoration: none;
  font-weight: bold;
  z-index: 10;
}
.back-button:hover { color: #ff6b6b; }

/* ================================
   ANIMATIONS
================================= */
@keyframes goldPulse {
  0% { box-shadow: 0 0 8px rgba(255, 193, 7, 0.4); }
  50% { box-shadow: 0 0 16px rgba(255, 193, 7, 0.7); }
  100% { box-shadow: 0 0 8px rgba(255, 193, 7, 0.4); }
}
@keyframes redGlow {
  0% { box-shadow: 0 0 8px rgba(255, 77, 77, 0.4); }
  50% { box-shadow: 0 0 18px rgba(255, 77, 77, 0.7); }
  100% { box-shadow: 0 0 8px rgba(255, 77, 77, 0.4); }
}
.glow-gold {
  color: var(--accent-color);
  text-shadow: 0 0 6px rgba(255, 193, 7, 0.5);
  animation: textGoldPulse 1s ease-in-out infinite;
}
@keyframes textGoldPulse {
  0% { text-shadow: 0 0 6px rgba(255, 193, 7, 0.4); }
  50% { text-shadow: 0 0 14px rgba(255, 193, 7, 0.8); }
  100% { text-shadow: 0 0 6px rgba(255, 193, 7, 0.4); }
}

/* ================================
   MODALS
   - Image lightbox modals scoped to .image-modal
   - Success modal is solid and opaque
================================= */

/* Center image modals vertically & horizontally */
.image-modal .modal-dialog {
  max-width: min(95vw, 1400px);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin: 0 auto;
}
@media (max-width: 576px) {
  .image-modal .modal-dialog { max-width: 100vw; margin: 0 1rem; }
}

/* Image lightbox content */
.image-modal .modal-content {
  width: auto !important;
  padding: 0 !important;
  background: rgba(0, 0, 0, 0.85) !important;
  border: none !important;
  border-radius: 16px !important;
  overflow: hidden; /* lets rounded corners clip image */
}
.image-modal .modal-body {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 !important;
  background: transparent !important;
}
.image-modal .modal-body img {
  display: block;
  margin: auto;
  width: auto;
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain !important;
  background: transparent !important;
  border: none !important;
  border-radius: 16px !important;   /* rounded edges on image */
  box-shadow: 0 0 20px rgba(0,0,0,0.4);
}

/* Success modal (yellow card) */
.modal-content.custom-success-modal {
  background-color: var(--accent-color) !important;
  color: #212529 !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 1.25rem !important;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.4);
  opacity: 1 !important;
}
.custom-success-modal .modal-header { border-bottom: 0 !important; background: transparent !important; }
.custom-success-modal .modal-body   { background: transparent !important; }

/* Backdrop slightly darker for contrast */
.modal-backdrop.show { opacity: 0.7; }

/* Neutralize Bootstrap's padding compensation on modal open */
.modal-open { padding-right: 0 !important; }
.modal-open .navbar,
.modal-open .sticky-top,
.modal-open .fixed-top,
.modal-open .fixed-bottom { padding-right: 0 !important; }

/* Allow modal to scroll internally if content is tall */
.modal { overflow-y: auto; }

/* ================================
   PAGE-FIT PAGES (Software / Report / Demo)
   - No document scroll; content resized to one screen
================================= */
.page-fit { overflow: hidden; } /* page itself doesn't scroll */

.page-fit main {
  height: calc(100dvh - var(--nav-h) - var(--footer-h)); /* dynamic viewport height */
  min-height: calc(100dvh - var(--nav-h) - var(--footer-h));
  overflow: hidden;
  display: flex;
  align-items: center;   /* vertical center */
  justify-content: center;
  padding-block: 1rem;
}

/* keep your glass container nicely constrained */
.page-fit .glass-box {
  width: min(1100px, 94vw);
  margin: 0 auto;
}

/* responsive type so text doesn't force overflow */
.page-fit h2 { font-size: clamp(1.25rem, 1.1rem + 1vw, 2rem); }
.page-fit p,
.page-fit li { font-size: clamp(0.9rem, 0.85rem + 0.35vw, 1rem); }

/* images never exceed main's available height */
.page-fit .screenshot,
.page-fit img.img-fluid {
  max-height: calc(100dvh - var(--nav-h) - var(--footer-h) - 180px); /* ~space for headings/text/buttons */
  width: auto;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

/* For rows of screenshots: prevent overflow */
.page-fit .row { row-gap: 1rem; }


/* Navbar logo styling */
.navbar-logo {
  height: 42px;
  width: auto;
  object-fit: contain;
  transition: opacity 0.3s ease;
}

.navbar-logo:hover {
  opacity: 0.85;
}

@media (max-width: 992px) {
  .navbar-logo {
    height: 36px;
  }
}


body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  padding-bottom: 56px; /* same as footer height */
}

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 56px;
  background-color: var(--footer-color);
  color: var(--text-color);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.4);
  z-index: 1030;
}

/* Optional: add subtle fade if your glass box overlaps footer */
main, section {
  padding-bottom: 80px; /* space so content isn't covered by footer */
}

/* Force big, edge-to-edge report modals */
.image-modal .modal-dialog {
  width: auto;
  max-width: 96vw !important;     /* wider than Bootstrap's defaults */
  margin: 0 auto;
}

@media (min-width: 1400px) {
  .image-modal .modal-dialog { max-width: 1400px !important; }
}

.image-modal .modal-content {
  width: 100%;
  padding: 0 !important;
  background: rgba(0,0,0,0.85) !important;
  border: none !important;
  border-radius: 16px !important;
  overflow: hidden;
}

.image-modal .modal-body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  background: transparent !important;
  min-height: 60vh; /* prevents “tiny” feel if image is small */
}

/* Fit image to both viewport width and height */
.image-modal .modal-body img {
  width: auto;             /* let it scale both ways */
  height: auto;
  max-width: 95vw;         /* fill width when landscape */
  max-height: 92vh;        /* fill height when portrait */
  object-fit: contain;
  background: transparent !important;
  border: none !important;
  border-radius: 16px !important;
  box-shadow: 0 0 20px rgba(0,0,0,0.4);
}