/* ============================================================
   Motrjim Bot — Neon Cyberpunk skin (override layer)
   Loaded AFTER style.css. Rebrand 2026-09-21.
   Palette: violet #a855f7 / deep #7c3aed  +  cyan #22d3ee
   ============================================================ */
:root{
  --mtj-bg:#08081a;
  --mtj-bg2:#0c0a20;
  --mtj-surface:#14122b;
  --mtj-surface2:#1a1740;
  --mtj-violet:#a855f7;
  --mtj-deep:#7c3aed;
  --mtj-cyan:#22d3ee;
  --mtj-text:#eaecfb;
  --mtj-muted:#9aa0c7;
  --mtj-border:rgba(168,85,247,.28);
  --mtj-grad:linear-gradient(135deg,#a855f7 0%,#7c3aed 45%,#22d3ee 100%);
  --mtj-glow:0 0 24px rgba(124,58,237,.45), 0 0 48px rgba(34,211,238,.22);
}

/* ---------- Global canvas ---------- */
body{
  background:
    radial-gradient(1000px 600px at 12% -8%, rgba(124,58,237,.20), transparent 60%),
    radial-gradient(900px 620px at 100% 0%, rgba(34,211,238,.16), transparent 55%),
    linear-gradient(180deg,var(--mtj-bg) 0%, var(--mtj-bg2) 100%) !important;
  color:var(--mtj-text) !important;
}
/* faint cyber grid */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(124,58,237,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,211,238,.05) 1px, transparent 1px);
  background-size:46px 46px, 46px 46px;
  mask-image:radial-gradient(circle at 50% 20%, #000 0%, transparent 75%);
}
.header_area, section, footer{ position:relative; z-index:1; }

p, li, span, .text-muted{ color:var(--mtj-muted); }
h1,h2,h3,h4,h5,h6,.section-title h2,.section-title h3{ color:var(--mtj-text) !important; }
a{ color:var(--mtj-cyan); }
a:hover{ color:var(--mtj-violet); }

/* ---------- Header / nav ---------- */
.header_area{
  background:rgba(10,10,26,.72) !important;
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--mtj-border);
}
.header_area.sticky, .navbar.sticky{
  background:rgba(10,10,26,.9) !important;
  box-shadow:0 6px 30px rgba(124,58,237,.25);
}
.navbar-nav .nav-link, .main-menu ul li a{ color:var(--mtj-text) !important; }
.navbar-nav .nav-link:hover, .main-menu ul li a:hover{ color:var(--mtj-cyan) !important; }
#logo{ filter:drop-shadow(0 0 10px rgba(34,211,238,.35)); }

/* ---------- Buttons / brand accents ---------- */
.main-btn, .btn-hover, .main-btn.btn-hover{
  background:var(--mtj-grad) !important;
  border:none !important;
  color:#fff !important;
  box-shadow:var(--mtj-glow);
  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.main-btn:hover, .btn-hover:hover{
  transform:translateY(-2px);
  filter:brightness(1.08);
  box-shadow:0 0 30px rgba(168,85,247,.6), 0 0 60px rgba(34,211,238,.35);
  color:#fff !important;
}
.watch-btn{ color:var(--mtj-text) !important; }
.watch-btn i{
  background:var(--mtj-grad) !important; color:#fff !important;
  box-shadow:var(--mtj-glow);
}

/* ---------- Hero ---------- */
.hero-area{ background:transparent !important; padding-top:60px; }
.hero-area .hero-content h2{
  background:var(--mtj-grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent !important;
  text-shadow:0 0 40px rgba(124,58,237,.35);
  font-weight:800;
}
.hero-area .hero-content h3{ color:var(--mtj-cyan) !important; font-weight:600; }
.hero-area .hero-content p{ color:var(--mtj-muted) !important; }
.hero-area .hero-img img{ filter:drop-shadow(0 20px 60px rgba(124,58,237,.35)); }

/* ---------- Section titles ---------- */
.section-title h3, .section-title .sub-title{
  color:var(--mtj-cyan) !important; letter-spacing:2px; text-transform:uppercase;
}
.section-title h2::after{ background:var(--mtj-grad) !important; }

/* ---------- Cards: features / how-work / pricing / screenshots ---------- */
.feature-area, .how-work-area, .tutorial-area, .screenshot-area-wrapper,
.pricing-area, .contact-area, .download-area{ background:transparent !important; }

.single-feature, .single-work, .single-pricing, .pricing-style,
.single-tutorial, .single-screenshot, .contact-wrapper, .feature-box,
.work-content, .pricing-box{
  background:linear-gradient(160deg, rgba(26,23,64,.65), rgba(20,18,43,.65)) !important;
  border:1px solid var(--mtj-border) !important;
  border-radius:18px !important;
  box-shadow:0 8px 30px rgba(0,0,0,.35);
  backdrop-filter:blur(8px);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.single-feature:hover, .single-work:hover, .single-pricing:hover,
.pricing-style:hover, .single-tutorial:hover, .single-screenshot:hover,
.pricing-box:hover{
  transform:translateY(-6px);
  border-color:var(--mtj-cyan) !important;
  box-shadow:0 0 34px rgba(124,58,237,.35), 0 0 60px rgba(34,211,238,.18);
}
.single-feature .icon, .single-work .icon, .feature-icon, .work-icon,
.single-feature i, .single-work i{
  background:var(--mtj-grad) !important;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--mtj-violet) !important;
  filter:drop-shadow(0 0 10px rgba(34,211,238,.4));
}
.single-feature h3, .single-work h4, .single-feature h4{ color:var(--mtj-text) !important; }

/* ---------- Pricing highlight ---------- */
.pricing-style.active, .single-pricing.active, .pricing-box.active{
  border-color:var(--mtj-cyan) !important;
  box-shadow:0 0 40px rgba(34,211,238,.35) !important;
}
.pricing-header .amount, .price, .pricing-style .price{
  background:var(--mtj-grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent !important;
}

/* ---------- Forms ---------- */
input, textarea, select, .form-control{
  background:rgba(20,18,43,.7) !important;
  border:1px solid var(--mtj-border) !important;
  color:var(--mtj-text) !important;
}
input:focus, textarea:focus, .form-control:focus{
  border-color:var(--mtj-cyan) !important;
  box-shadow:0 0 0 3px rgba(34,211,238,.18) !important;
}
input::placeholder, textarea::placeholder{ color:#6b6f97 !important; }

/* ---------- Footer ---------- */
.footer-area{
  background:linear-gradient(180deg, rgba(8,8,26,.4), #060616) !important;
  border-top:1px solid var(--mtj-border);
}
.footer-area, .footer-area p, .footer-area li, .footer-area a{ color:var(--mtj-muted) !important; }
.footer-area a:hover{ color:var(--mtj-cyan) !important; }
.footer-area .logo img{ filter:drop-shadow(0 0 12px rgba(34,211,238,.4)); }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:#0a0a1a; }
::-webkit-scrollbar-thumb{ background:var(--mtj-grad); border-radius:10px; }

/* ---------- Back-to-top / misc accents ---------- */
.back-to-top, .scroll-top{ background:var(--mtj-grad) !important; box-shadow:var(--mtj-glow); }
.preloader{ background:var(--mtj-bg) !important; }