/* INDEX.CSS — CLEANED */

/* Global */
html, body { overflow-x: hidden; }
* { box-sizing: border-box; }
body { font-family: Arial, sans-serif; margin: 0; }

/* CTA buttons (Demo) */
.btn-demo, .btn-demo-sticky {
  background-color:#00FA9A; border-color:#00FA9A; color:#006400;
  border-radius:5px; text-decoration:none; display:inline-block; text-align:center;
  transition:background .3s cubic-bezier(.4,2,.6,1), color .2s, box-shadow .25s, transform .22s cubic-bezier(.33,1,.68,1);
  box-shadow:0 2px 6px rgba(0,0,0,.07); font-size:1rem; padding:10px;
}
.btn-demo:hover, .btn-demo:focus,
.btn-demo-sticky:hover, .btn-demo-sticky:focus {
  color:#fff; background:linear-gradient(90deg,#0de673 0%,#23e3c9 100%); border-color:#23e3c9;
  box-shadow:0 4px 18px rgba(44,204,136,.20),0 2px 8px rgba(0,0,0,.07);
  transform:translateY(-2px) scale(1.03); text-decoration:none;
}
.btn-demo-sticky { position:fixed; top:16px; right:32px; z-index:1041; }

/* Header & hero */
.site-header{
  background:linear-gradient(180deg,#0b2447 0%,#19376d 60%,#1d4ed8 100%);
  color:#fff; box-shadow:0 2px 12px rgba(0,0,0,.18);
}
header .d-flex{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.5rem 1rem; }
.site-header .nav-link{ color:#e5e7eb!important; }
.site-header .nav-link:hover{ color:#fff!important; text-decoration:underline; text-underline-offset:3px; }
.site-header .btn-outline-light{ border-color:#e5e7eb; color:#e5e7eb; }
.site-header .btn-outline-light:hover{ border-color:#fff; color:#fff; background:rgba(255,255,255,.12); }
.site-header .btn-light{ color:#212529; }

.hero-lite{
  background:
    radial-gradient(1200px 600px at 10% 110%,rgba(29,78,216,.35) 0%,rgba(29,78,216,0) 60%) no-repeat,
    linear-gradient(0deg,#0b2447 0%,#19376d 60%,#1d4ed8 100%);
  color:#fff; padding:16px 12px; border-bottom:1px solid rgba(255,255,255,.08);
}
.hero-lite .lead{ color:#e5e7eb; }

/* Brand */
.brand-logo{ width:40px; height:auto; vertical-align:middle; }
.tagline{
  display:inline-block; overflow:hidden; white-space:nowrap; max-width:0; vertical-align:middle;
  font-size:.9rem; color:#ccc; animation:typing 2.5s steps(40,end) forwards;
}
@keyframes typing{ from{max-width:0;} to{max-width:450px;} }
.navbar-brand{
  display:flex; align-items:center; flex-wrap:wrap; font-size:1.5rem; font-weight:bold;
  color:#fff; text-decoration:none; white-space:nowrap; max-width:100%; overflow:hidden;
}
.navbar-brand .brand-group{ display:flex; align-items:center; flex-shrink:0; }
.navbar-brand .fw-bold{ font-size:1.5rem; color:#fff; margin:0 8px 0 2px; }
.navbar-brand .tagline{ font-size:1rem; color:rgba(255,255,255,.7); overflow:hidden; text-overflow:ellipsis; }
.navbar-brand:hover .tagline,
.navbar-brand .fw-bold:hover{ text-shadow:0 0 10px rgba(255,255,255,.5); }

/* Nav links & dropdown */
.navbar-nav{ display:flex; flex-direction:row; align-items:center; gap:12px; flex-wrap:wrap; margin:0; padding:0; list-style:none; }
.nav-link{ color:#e5e7eb; font-size:1rem; transition:color .2s,text-shadow .2s; white-space:nowrap; }
.nav-link:hover{ color:#fff; text-shadow:0 0 10px rgba(255,255,255,.5); }

.dropdown-menu{
  background-color:#1f2937; border:1px solid rgba(255,255,255,.08); border-radius:8px; overflow:hidden;
}
.dropdown-item{ display:flex; align-items:center; gap:10px; color:#e5e7eb; transition:background-color .2s; }
.dropdown-item:hover{ background-color:rgba(59,130,246,.22); }
.dropdown-item.active{ background-color:rgba(59,130,246,.25); color:#fff; }
.dropdown-item img{ width:20px; }

/* Auth buttons */
.btn-outline-light{
  font-size:.9rem; padding:5px 10px; border-radius:6px; border-color:#e5e7eb; color:#e5e7eb;
}
.btn-outline-light:hover{ background:rgba(255,255,255,.18); color:#fff; border-color:#fff; }
.btn-light{
  font-size:.9rem; padding:5px 15px; border-radius:6px; background:#fff; color:#212529; border:1px solid #ced4da;
}
.btn-light:hover{ background:#e2e6ea; }

/* Scroll-to-top */
#scrollToTop{
  position:fixed; bottom:120px; right:30px; background:#0d6efd; color:#fff; border:none; border-radius:50%;
  width:50px; height:50px; font-size:24px; display:none; cursor:pointer; z-index:1000; box-shadow:0 2px 6px rgba(0,0,0,.3);
}
#scrollToTop:hover{ background:#0b5ed7; }

/* === Features === */
.feature-heading{ font-size:1.1rem; font-weight:700; margin:0 0 .25rem; }
.feature-icon{ font-size:clamp(28px,6vw,40px); color:#0d6efd; }
.feature-text{ line-height:1.45; }

/* Card shell */
.feature-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:12px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
@media (hover:hover){
  .feature-card:hover{
    transform:translateY(-3px);
    box-shadow:0 8px 18px rgba(0,0,0,.08);
    border-color:rgba(13,110,253,.25);
  }
}

/* Tighten on phones */
@media (max-width:576.98px){
  #features{ padding-top:28px!important; padding-bottom:28px!important; }
  .feature-card{ padding:16px!important; border-radius:10px; }
  .feature-heading{ font-size:1rem; }
  .feature-text{
    font-size:.92rem;
    display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; /* clamp long copy */
  }
  .feature-icon{ font-size:34px; }
}

/* Equal height + centered inner spacing */
.feature-card > .feature-heading,
.feature-card > .feature-text{ margin-left:auto; margin-right:auto; }


.screenshot-thumb{ width:100%; height:200px; border-radius:8px; object-fit:cover; transition:transform .3s, box-shadow .3s; }
.screenshot-thumb:hover{ transform:scale(1.08); box-shadow:0 4px 10px rgba(0,0,0,.2); }

/* Lightbox */
.lb-dataContainer{ background:#222!important; color:#fff!important; border-radius:10px!important; padding:10px; }
.lb-prev,.lb-next{
  background:rgba(0,0,0,.6)!important; width:45px!important; height:45px!important; border-radius:50%;
  display:flex!important; align-items:center; justify-content:center; cursor:pointer!important;
}
.lb-prev:hover,.lb-next:hover{ background:rgba(0,0,0,.9)!important; }
.lb-prev::before,.lb-next::before{ font-family:"Font Awesome 5 Free"; font-weight:900; font-size:20px; color:#fff!important; }
.lb-prev::before{ content:'\f104'; } .lb-next::before{ content:'\f105'; }

/* Carousel */
.carousel-control-prev-icon,.carousel-control-next-icon{
  background-color:rgba(0,0,0,.5); border-radius:50%; padding:15px; background-size:50% 50%; filter:invert(1);
}
.carousel-control-prev-icon:hover,.carousel-control-next-icon:hover{ background-color:rgba(0,0,0,.8); }

/* Pricing */
#pricing{ background:#f9f9f9; padding:50px 20px; border-radius:8px; }

/* card base */
.pricing-card{
  background:#fff; border-radius:12px; padding:20px;
  border:1px solid #e5e7eb; transition:transform .25s ease, box-shadow .25s ease;
}
@media (hover:hover){
  .pricing-card:hover{ transform:translateY(-6px); box-shadow:0 12px 24px rgba(0,0,0,.08); }
}
.pricing-card .month-price{ font-size:2.5rem; font-weight:800; line-height:1.1; margin:0; }
.pricing-card .price-container{ margin-bottom:.5rem; }
.pricing-card .annual-price{ margin-top:.25rem; }
.text-annual-discount{ color:#64748b!important; }

.pricing-card ul{ list-style:none; padding:0; margin:12px 0 18px; }
.pricing-card ul li{
  font-size:.95rem; margin-bottom:10px; padding-left:20px; position:relative;
}
.pricing-card ul li::before{
  content:"✔"; color:#0d6efd; position:absolute; left:0; top:0;
}
.pricing-card .cta-button{
  display:inline-block; padding:.55rem 1rem; border-radius:8px; background:#0d6efd; color:#fff; text-decoration:none;
}
.pricing-card .cta-button:hover{ filter:brightness(1.05); }

.standard-heading{ color:#8a6800!important; }
.custom-heading{ color:#0d6efd!important; }
.featured-plan{ border:2px solid #ffc107; background:#fffbe8; }
.featured-plan .cta-button{ background:#ffc107; color:#000; }

/* ===== Mobile (≤576px): centered swipe with snap ===== */
@media (max-width:576.98px){
  .pricing-table{
    display:flex;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    gap:12px;

    /* center first and last cards */
    padding:2px 7.5% 10px;          /* 7.5% = (100% - 85%) / 2 */
    scroll-snap-type:x mandatory;
    scroll-padding-left:7.5%;
    scroll-padding-right:7.5%;
    margin-left:0;                   /* cancel .row negative margins */
    margin-right:0;
  }
  .pricing-table::-webkit-scrollbar{ display:none; }

  .pricing-table > [class*="col-"]{
    flex:0 0 85%;
    max-width:85%;
    scroll-snap-align:start;
  }

  .pricing-card{ padding:16px; border-radius:12px; }
  .pricing-card .month-price{ font-size:2rem; }
  .pricing-card .cta-button{ width:100%; text-align:center; }
  #pricing{ padding:28px 0; border-radius:0; }
}


/* ===== Small tablets (577–767px): two-up grid, readable text ===== */
@media (min-width:577px) and (max-width:767.98px){
  .pricing-card{ padding:18px; }
  .pricing-card .month-price{ font-size:2.2rem; }
  .pricing-card .cta-button{ width:100%; }
}


/* Register */
#register{ background:#f9f9f9; border-radius:8px; padding:50px 20px; margin-top:50px; }
#registration-form{ background:#fff; border-radius:8px; padding:30px; box-shadow:0 10px 20px rgba(0,0,0,.1); }
#registration-form .form-control:focus{ border-color:#007bff; box-shadow:0 0 5px rgba(0,123,255,.5); }
#register_button{ font-size:1.1rem; font-weight:bold; background:#0056b3; border:none; padding:12px 20px; border-radius:5px; color:#fff; }

/* ===== Footer (mobile-first) ===== */
.site-footer{ background:#222; color:#fff; padding:28px 0; font-size:.95rem; }
.site-footer a{ color:#e5e7eb!important; text-decoration:none; }
.site-footer a:hover{ text-decoration:underline; }
.footer-heading{ font-size:1.15rem; font-weight:700; }

.footer-title-toggle{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:.75rem; padding:.75rem 0; margin:0; background:none; border:none; color:#fff;
  font-size:1.05rem; font-weight:700; border-bottom:1px solid rgba(255,255,255,.12);
}
.footer-title-toggle .bi{ transition:transform .2s ease; }
.footer-title-toggle[aria-expanded="true"] .bi{ transform:rotate(180deg); }

.footer-collapse{ padding-top:.5rem; }
.footer-row{ row-gap:1rem; }

.footer-link{ display:inline-block; padding:.4rem 0; color:#e5e7eb!important; }
.footer-articles .footer-article-link{ display:inline-block; padding:.4rem 0; }

.social-icons{ display:flex; gap:14px; justify-content:center; }
.social-link{ display:inline-flex; width:42px; height:42px; align-items:center; justify-content:center;
  border-radius:50%; background:rgba(255,255,255,.08); font-size:1.2rem;
}
.social-link:hover{ background:rgba(255,255,255,.18); }

.footer-sep{ border-color:rgba(255,255,255,.12); }
.footer-bottom{ font-size:.9rem; color:#cbd5e1; }

/* Touch targets */
.touch-link{ padding:.35rem 0; }

/* ≥ md: show sections expanded, hide toggles, align left */
@media (min-width:768px){
  .footer-title-toggle{ display:none; }
  .footer-collapse{ display:block !important; height:auto !important; }
  .social-icons{ justify-content:flex-start; }
  .site-footer{ padding:40px 0; }
}

/* ≥ lg: comfortable spacing */
@media (min-width:992px){
  .footer-heading{ font-size:1.25rem; }
}

/* High-contrast links on very dark bg */
@media (prefers-contrast: more){
  .site-footer a{ text-decoration:underline; }
}


/* Chat widget */
#mhr-chat{ position:fixed; right:16px; bottom:16px; z-index:1055; }
.mhr-chat-toggle{ width:56px; height:56px; border-radius:50%; background:#0d6efd; color:#fff; }

/* Language selector */
.lang-btn.btn{
  display:flex; align-items:center; gap:6px;
  padding:.3rem .5rem!important;
  line-height:1!important; border:1px solid #e5e7eb; border-radius:6px;
  background:transparent; color:#e5e7eb;
}
.lang-btn.btn:hover{ background:rgba(255,255,255,.18); color:#fff; }
.lang-option{ display:flex; align-items:center; padding:.45rem .75rem; }
.lang-option .lang-text{ margin-left:.35rem; }
.lang-flag-rect{ width:24px; object-fit:contain; display:block; }
.lang-flag--menu{ width:18px; height:18px; border-radius:2px; object-fit:cover; display:block; }

/* Media queries */
@media (max-width:992px){
  .site-header .btn, .site-header{ padding:.4rem .7rem; font-size:.9rem; }
  header .d-flex{ flex-wrap:wrap; }
  .site-header nav{
    display:grid!important; grid-template-columns:1fr 1fr auto;
    grid-template-areas:"menu menu menu" "demo register lang";
    gap:8px;
  }
  .site-header nav > ul.navbar-nav{ grid-area:menu; justify-content:center; flex-wrap:wrap; gap:10px; }
  .site-header nav > .btn-demo{ grid-area:demo; }
  .site-header nav > a.btn.btn-light{ grid-area:register; }
  .site-header nav > .dropdown{ grid-area:lang; justify-self:end; }
}
@media (max-width:768px){
  .btn-demo-sticky{ right:14px; left:14px; width:auto; font-size:1rem; padding:.7rem 1.4rem; }
  #scrollToTop{ bottom:100px; right:10px; }
  .navbar-brand{ flex-direction:row!important; gap:6px; }
}
@media (max-width:576px){
  .site-header nav{ column-gap:6px; row-gap:6px; }

  /* keep logo + tagline on one row */
  .navbar-brand{
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px;
    min-width: 0;               /* allow children to shrink */
  }
  .navbar-brand .tagline{
    flex: 1 1 auto;
    min-width: 0;
    max-width: 60vw;            /* fits next to logo + MHR */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .8rem;           /* optional smaller size on phones */
  }

  .site-header nav > ul.navbar-nav{
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 6px;
    padding: 0 .5rem 2px;
    margin: 0 !important;
    max-width: 100%;
  }
  .site-header .navbar-nav .nav-item{ flex:0 0 auto; margin-right:6px!important; }
  .site-header .navbar-nav .nav-item:last-child{ margin-right:0!important; }

  .site-header nav > ul.navbar-nav .nav-link{
    white-space: nowrap;
    padding:.2rem .35rem;
    font-size:.85rem;
    line-height:1.1;
  }

  /* shrink all row-2 buttons */
  .site-header nav > a.btn,
  .site-header nav > button.btn{
    padding:5px;
    font-size:.8rem;
    line-height:1.1;
    width:100%;
    border-radius:6px;
    margin:0!important;
  }

  /* enlarge Demo + Register */
  .site-header nav > .btn-demo,
  .site-header nav > a.btn.btn-light{
    font-size:1rem;
    padding:.65rem .8rem;
  }

  .site-header nav > .dropdown > .lang-btn{
    padding:.45rem;
    font-size:.9rem;
    min-height:36px;
    border-radius:8px;
  }
  .site-header nav > .dropdown > .lang-btn .lang-flag-rect{ width:28px; }

  .hero-lite h1{ font-size:1.35rem; }
  .hero-lite .lead{ font-size:.95rem; }
}

@media (min-width:992px){
  /* keep logo + MHR + tagline in one line */
  .navbar-brand{
    flex-wrap: nowrap !important;
    align-items: center;
    min-width: 0; /* allow children to shrink instead of wrapping */
  }

  .navbar-brand .tagline{
    flex: 1 1 auto;
    min-width: 0;              /* required for ellipsis inside flex */
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    animation: none;            /* no typing animation on desktop */
    font-size: 0.95rem;         /* optional smaller text so it fits */
    color: rgba(255,255,255,.8);
  }
}

/* Desktop (≥992px): keep tagline on one line + ellipsis */
@media (min-width:992px){
  .navbar-brand{
    flex-wrap: nowrap !important;
    align-items: center;
    min-width: 0;              /* allow children to shrink instead of wrapping */
  }
  .navbar-brand .tagline{
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    animation: none;           /* no typing on desktop */
  }
}

/* Mobile (≤576px): same row as logo, smaller, clipped safely; no horizontal overflow */
@media (max-width:576px){
  /* ensure nothing inside header can create page-wide overflow */
  .site-header .container{ overflow: hidden; }

  .navbar-brand{
    flex-wrap: nowrap !important;  /* keep in one row */
    align-items: center;
    min-width: 0;
    gap: 6px;
  }
  .navbar-brand .brand-group{ flex: 0 0 auto; }
  .navbar-brand .tagline{
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    animation: none;               /* disable typing on tiny screens */
    font-size: .75rem;             /* shrink so it fits on iPhone SE */
    line-height: 1.2;
    color: rgba(255,255,255,.85);
  }
}