/* =====================================================================
   Matjri — Modern Dark Landing Theme  (v1)
   Additive override for EcommerceGo LandingPage. Fully reversible:
   remove this file's <link> to restore the original design.
   ===================================================================== */

:root{
  --mt-bg:#070B12; --mt-bg2:#0A0F1A; --mt-surface:#0F1826; --mt-surface2:#131E2E;
  --mt-border:#1C2636; --mt-border2:#26344a;
  --mt-text:#EAF0F8; --mt-muted:#94A3B8; --mt-dim:#64748B;
  --mt-blue:#2563EB; --mt-blue-l:#3B82F6; --mt-violet:#7C3AED; --mt-violet-l:#8B5CF6;
  --mt-grad:linear-gradient(115deg,#3B82F6 0%,#7C3AED 100%);
  --mt-grad-soft:linear-gradient(115deg,rgba(59,130,246,.16),rgba(124,58,237,.16));
}

/* ---- base ---- */
body.landing-page{
  background:var(--mt-bg)!important; color:var(--mt-text)!important;
  font-family:"SF Pro Display",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
}
body.landing-page h1,body.landing-page h2,body.landing-page h3,
body.landing-page h4,body.landing-page h5,body.landing-page h6{color:var(--mt-text)!important;letter-spacing:-.02em}
body.landing-page p,body.landing-page h6,body.landing-page .text-body,body.landing-page li{color:var(--mt-muted)!important}
body.landing-page a{color:inherit}

/* neutralise bootstrap light/solid backgrounds */
body.landing-page .bg-white,body.landing-page .bg-gray-100,body.landing-page .bg-light,
body.landing-page .bg-body,body.landing-page .bg-primary,body.landing-page .bg-dark{
  background:transparent!important; background-color:transparent!important;
}

/* ---- header ---- */
body.landing-page .main-header{
  background:rgba(7,11,18,.72)!important; backdrop-filter:blur(14px);
  border-bottom:1px solid var(--mt-border);
}
body.landing-page .navbar .nav-link,body.landing-page .navbar-nav a{color:var(--mt-muted)!important;font-weight:500}
body.landing-page .navbar .nav-link:hover,body.landing-page .navbar-nav a:hover{color:var(--mt-text)!important}
/* keep header compact & everything on one centred row */
body.landing-page .main-header .navbar{padding-top:6px!important;padding-bottom:6px!important;align-items:center!important}
body.landing-page .main-header .navbar-brand img,body.landing-page .main-header .logo img{max-height:42px!important;width:auto!important}
body.landing-page .main-header .navbar-collapse,body.landing-page .main-header .navbar-nav{align-items:center!important}
body.landing-page .main-header .btn,body.landing-page .main-header .btn-outline-dark,body.landing-page .main-header .btn-primary{padding:9px 20px!important}
/* Pages / Custom Page dropdown menus -> dark */
body.landing-page .menu-dropdown{background:#0F1826!important;border:1px solid var(--mt-border)!important;box-shadow:0 24px 60px -24px rgba(0,0,0,.8)!important;border-radius:12px!important}
body.landing-page .menu-dropdown .dropdown-item,body.landing-page .menu-dropdown a{color:var(--mt-muted)!important;background:transparent!important}
body.landing-page .menu-dropdown .dropdown-item:hover,body.landing-page .menu-dropdown a:hover{color:var(--mt-text)!important;background:rgba(124,58,237,.12)!important}

/* ---- buttons ---- */
body.landing-page .btn-primary,
body.landing-page .btn-dark{
  background:var(--mt-grad)!important;border:none!important;color:#fff!important;
  border-radius:100px!important;padding:12px 26px!important;font-weight:600!important;
  box-shadow:0 8px 30px -8px rgba(99,102,241,.6);transition:transform .18s,box-shadow .25s;
}
body.landing-page .btn-primary:hover,body.landing-page .btn-dark:hover{
  transform:translateY(-2px);box-shadow:0 14px 40px -8px rgba(99,102,241,.8);color:#fff!important;
}
body.landing-page .btn-outline-dark,body.landing-page .btn-outline-primary,
body.landing-page .btn-outline-secondary,body.landing-page .btn-white{
  background:rgba(255,255,255,.04)!important;border:1px solid var(--mt-border2)!important;
  color:var(--mt-text)!important;border-radius:100px!important;padding:12px 26px!important;font-weight:600!important;
  transition:transform .18s,background .2s,border-color .2s;
}
body.landing-page .btn-outline-dark:hover,body.landing-page .btn-outline-primary:hover,
body.landing-page .btn-outline-secondary:hover,body.landing-page .btn-white:hover{
  background:rgba(255,255,255,.09)!important;border-color:var(--mt-dim)!important;
  color:var(--mt-text)!important;transform:translateY(-2px);
}

/* ---- hero / main banner ---- */
/* padding-top clears the absolute header (~103px) so it never overlaps the hero image */
body.landing-page .main-banner{position:relative;overflow:hidden;background:transparent!important;padding-top:112px!important;padding-bottom:70px}
body.landing-page .main-banner::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(124,58,237,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(59,130,246,.05) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 40% 40%,#000 40%,transparent 78%);
  mask-image:radial-gradient(ellipse 70% 60% at 40% 40%,#000 40%,transparent 78%);
}
body.landing-page .main-banner::after{
  content:"";position:absolute;top:-160px;left:20%;width:520px;height:520px;border-radius:50%;z-index:0;
  background:radial-gradient(circle,rgba(37,99,235,.5),transparent 62%);filter:blur(90px);pointer-events:none;
  animation:mtGlow 16s ease-in-out infinite;
}
@keyframes mtGlow{0%,100%{transform:translate(0,0)}50%{transform:translate(60px,30px)}}
@media(prefers-reduced-motion:reduce){body.landing-page .main-banner::after{animation:none}}
body.landing-page .main-banner>*{position:relative;z-index:1}
body.landing-page .main-banner h1{
  font-size:clamp(2.4rem,5vw,4.2rem)!important;font-weight:800!important;line-height:1.05!important;
  background:var(--mt-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent!important;
}
body.landing-page .main-banner h6{font-size:1.1rem!important;color:var(--mt-muted)!important;margin-top:8px}
body.landing-page .main-banner .badge{
  background:rgba(124,58,237,.10)!important;border:1px solid var(--mt-border2)!important;
  color:var(--mt-muted)!important;border-radius:100px!important;letter-spacing:.06em;
}
body.landing-page .main-banner .preview-img{border-radius:18px;border:1px solid var(--mt-border2);box-shadow:0 40px 120px -40px rgba(59,130,246,.5)}

/* ---- generic sections ---- */
body.landing-page section{position:relative}
body.landing-page .section-gap{padding-top:90px;padding-bottom:90px}
body.landing-page section h2{font-size:clamp(1.9rem,3.6vw,2.9rem)!important;font-weight:800!important}

/* ---- cards ---- */
body.landing-page .card,
body.landing-page .screenshot-card,
body.landing-page .features-preview,
body.landing-page .accordion-item{
  background:linear-gradient(180deg,var(--mt-surface),var(--mt-bg2))!important;
  border:1px solid var(--mt-border)!important;border-radius:16px!important;color:var(--mt-text)!important;
  transition:transform .2s,border-color .2s,box-shadow .3s;
}
body.landing-page .card:hover,body.landing-page .screenshot-card:hover{
  transform:translateY(-4px);border-color:var(--mt-border2)!important;box-shadow:0 24px 60px -30px rgba(99,102,241,.5);
}
body.landing-page .card .card-body{color:var(--mt-muted)!important}
body.landing-page .card h1,body.landing-page .card h2,body.landing-page .card h3,
body.landing-page .card h4,body.landing-page .card h5{color:var(--mt-text)!important}

/* feature/service icon chips */
body.landing-page .card .icon,body.landing-page .feature-icon,body.landing-page .icon-box{
  background:var(--mt-grad-soft)!important;border:1px solid var(--mt-border2)!important;color:var(--mt-violet-l)!important;border-radius:12px!important;
}

/* ---- pricing / subscription ---- */
body.landing-page .subscription{background:transparent!important}
body.landing-page .subscription .card{background:linear-gradient(180deg,var(--mt-surface),var(--mt-bg2))!important}
body.landing-page .subscription .card.active,
body.landing-page .subscription .card.featured,
body.landing-page .subscription .popular{
  border-color:transparent!important;
  background:linear-gradient(var(--mt-bg2),var(--mt-bg2)) padding-box,var(--mt-grad) border-box!important;
  box-shadow:0 30px 80px -40px rgba(99,102,241,.6);
}

/* ---- accordion / faq ---- */
body.landing-page .faqs{background:transparent!important}
body.landing-page .accordion-button{background:transparent!important;color:var(--mt-text)!important;font-weight:600!important;box-shadow:none!important}
body.landing-page .accordion-button:not(.collapsed){color:var(--mt-violet-l)!important;background:rgba(124,58,237,.06)!important}
body.landing-page .accordion-button::after{filter:invert(1) opacity(.6)}
body.landing-page .accordion-body{color:var(--mt-muted)!important}

/* ---- footer ---- */
body.landing-page .site-footer{background:var(--mt-bg2)!important;border-top:1px solid var(--mt-border)!important}
body.landing-page .site-footer a,body.landing-page .site-footer p,body.landing-page .site-footer li{color:var(--mt-muted)!important}
body.landing-page .site-footer a:hover{color:var(--mt-text)!important}

/* Section eyebrow labels (FEATURES / DISCOVER / SCREENSHOTS / PLAN / FAQ).
   The template uses two variants — some carry .fw-bold, others carry
   .text-white instead — so match on .d-block.text-uppercase to catch both,
   and set the weight here so they all render identically. */
body.landing-page section span.d-block.text-uppercase,
body.landing-page #plan span.text-uppercase{
  color:var(--mt-violet-l)!important;
  display:block!important;
  font-size:22px!important;
  font-weight:700!important;
  letter-spacing:.18em!important;
  margin-bottom:16px!important;
}

/* ---- pricing cards: make the numbers actually readable ---- */
body.landing-page #plan .p-price{color:#FFFFFF!important;font-weight:800!important}
body.landing-page #plan .p-price small,
body.landing-page #plan .p-price .text-sm{color:var(--mt-muted)!important;font-weight:500!important}
body.landing-page #plan .price-badge{font-size:17px!important;color:var(--mt-text)!important;font-weight:600!important}
body.landing-page #plan .form-check-label{color:#CBD5E1!important}
body.landing-page #plan .price-card{border:1px solid var(--mt-border)!important}

/* highlight the middle plan with a gradient border */
body.landing-page #plan .row > div:nth-child(2) .price-card{
  border:2px solid transparent!important;
  background:linear-gradient(var(--mt-bg2),var(--mt-bg2)) padding-box,var(--mt-grad) border-box!important;
  box-shadow:0 30px 80px -40px rgba(99,102,241,.65)!important;
}

/* button labels stayed green from the old theme — force white */
body.landing-page .btn.btn-primary,
body.landing-page .btn.btn-primary *,
body.landing-page a.btn.btn-primary{color:#ffffff!important;-webkit-text-fill-color:#ffffff!important}
body.landing-page .btn.btn-primary svg{stroke:#ffffff!important}

/* ---- content / custom pages (About Us, Terms, Privacy, custom pages) ---- */
body.landing-page .common-banner{background:linear-gradient(180deg,var(--mt-surface),var(--mt-bg))!important;border-bottom:1px solid var(--mt-border)!important}
body.landing-page .common-banner h1,body.landing-page .common-banner h2,body.landing-page .common-banner h3,body.landing-page .common-banner span,body.landing-page .common-banner p{color:var(--mt-text)!important}
body.landing-page .bg-primary.rounded,body.landing-page .bg-primary.p-4,body.landing-page .page-content .bg-primary{background:linear-gradient(180deg,var(--mt-surface),var(--mt-bg2))!important;border:1px solid var(--mt-border)!important;color:var(--mt-muted)!important;border-radius:14px!important}
body.landing-page .page-content,body.landing-page .custom-page-content{color:var(--mt-muted)!important}

/* ---- misc ---- */
body.landing-page .badge.bg-white{background:rgba(255,255,255,.06)!important;color:var(--mt-text)!important}
body.landing-page hr{border-color:var(--mt-border)!important}
body.landing-page .text-dark{color:var(--mt-text)!important}

/* =====================================================================
   v2 refinements
   ===================================================================== */

/* hide template's white hero clouds */
.cloud,body .cloud,.landing-page .cloud{display:none!important}

/* hide the floating color-switcher (customizer) demo widget.
   NOTE: .c-bn/.c-bl were removed from this list — they are cookie-consent
   button/block classes, not customizer classes; hiding them made the
   cookie banner impossible to accept or dismiss. */
.customizer,[class*="customizer"]{display:none!important}

/* buttons: force white label + icon (kills leftover green) */
body.landing-page .btn-primary,body.landing-page .btn-dark{color:#fff!important}
body.landing-page .btn-primary *,body.landing-page .btn-dark *{color:#fff!important}
body.landing-page .btn-primary i,body.landing-page .btn-dark i,
body.landing-page .btn-primary svg,body.landing-page .btn-primary svg *,
body.landing-page .btn-dark svg,body.landing-page .btn-dark svg *{stroke:#fff!important;color:#fff!important}

/* feature/service card icons -> accent, always visible */
body.landing-page .card i,body.landing-page .card [data-feather],
body.landing-page .card svg,body.landing-page .features-section i{
  color:var(--mt-violet-l)!important;stroke:var(--mt-violet-l)!important;
}

/* hero banner illustration boxes -> dark glass instead of white */
body.landing-page .bns-t{background:transparent!important;box-shadow:none!important}
body.landing-page .bns-t .card,body.landing-page .bns-t>div,
body.landing-page .c-bl,body.landing-page .b-ex{
  background:linear-gradient(180deg,var(--mt-surface),var(--mt-bg2))!important;
  color:var(--mt-text)!important;border:1px solid var(--mt-border2)!important;
}

/* newsletter / form inputs */
body.landing-page input,body.landing-page textarea,body.landing-page .form-control{
  background:var(--mt-surface2)!important;border:1px solid var(--mt-border2)!important;color:var(--mt-text)!important;
}
body.landing-page input::placeholder,body.landing-page .form-control::placeholder{color:var(--mt-dim)!important}

/* "trusted by" placeholder brand logos -> make visible on dark (subtle).
   NOTE: must NOT touch the header logo (.navbar-brand). */
body.landing-page .logo-slider img,body.landing-page [class*="client"] img,
body.landing-page [class*="trusted"] img{
  filter:brightness(0) invert(1)!important;opacity:.42!important;
}
/* protect the header logo from any filter/opacity override */
body.landing-page .main-header .navbar-brand img,
body.landing-page .main-header .logo img{filter:none!important;opacity:1!important}

/* dashboard preview image: soften brightness slightly */
body.landing-page .main-banner .preview-img,body.landing-page .dash-preview img{filter:saturate(.95)}

/* =====================================================================
   v3 — mobile header buttons fix
   On <=767px the template turns Login/Register into icon-only circles
   (45px, padding 0), but the padding:9px 20px !important set for the
   header buttons above overrides that and leaves no room for the icon,
   so the circles rendered empty. Restore icon-only mode here.
   ===================================================================== */
@media only screen and (max-width:767px){
  body.landing-page .main-header .btn.rounded,
  body.landing-page .main-header .btn-outline-dark.rounded,
  body.landing-page .main-header .btn-primary.rounded{
    padding:0!important;
    width:45px;height:45px;
    display:inline-flex;align-items:center;justify-content:center;
  }
  .main-header .btn.rounded svg{flex-shrink:0}
}
@media only screen and (max-width:480px){
  body.landing-page .main-header .btn.rounded,
  body.landing-page .main-header .btn-outline-dark.rounded,
  body.landing-page .main-header .btn-primary.rounded{width:35px;height:35px}
}

/* =====================================================================
   v4 - btn-outline-light fix
   The "Live Demo" button in the dark pricing/demo section carries
   .btn-outline-light: stock text color #293240 is invisible on the dark
   background (contrast 1.5:1) and only appeared on hover. Style it like
   the other outline buttons.
   ===================================================================== */
body.landing-page .btn-outline-light{
  background:rgba(255,255,255,.04)!important;border:1px solid var(--mt-border2)!important;
  color:var(--mt-text)!important;border-radius:100px!important;font-weight:600!important;
}
body.landing-page .btn-outline-light:hover{
  background:rgba(255,255,255,.09)!important;border-color:var(--mt-dim)!important;color:var(--mt-text)!important;
}
body.landing-page .btn-outline-light *,body.landing-page .btn-outline-light svg{color:var(--mt-text)!important;stroke:var(--mt-text)}