/* ===== MBG BAT — Custom styles ===== */
:root{
  --bg:#050505;
  --bg-2:#0d0d0d;
  --bg-3:#111111;
  --line:#1f1f1f;
  --neon:#39FF14;
  --neon-dim:#2bd60b;
  --text:#ffffff;
  --muted:#a3a3a3;
}
*{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
html,body{ background:var(--bg); color:var(--text); font-family:'Manrope',sans-serif; }
::selection{ background:var(--neon); color:#000; }

.font-display{ font-family:'Oswald',sans-serif; letter-spacing:-0.01em; }
.font-mono{ font-family:'JetBrains Mono', monospace; }

/* Grain texture overlay */
.grain::before{
  content:"";
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.15 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.5; pointer-events:none; mix-blend-mode:overlay;
}

/* Neon underline / glow */
.neon-text{ color:var(--neon); text-shadow:0 0 18px rgba(57,255,20,.35); }
.neon-line{ height:1px; background:linear-gradient(90deg, transparent, var(--neon), transparent); }
.neon-divider{ width:48px; height:2px; background:var(--neon); display:inline-block; box-shadow:0 0 12px rgba(57,255,20,.6); }

/* Overline tag */
.overline{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:'JetBrains Mono', monospace;
  font-size:.72rem; letter-spacing:.32em; text-transform:uppercase; color:var(--neon);
}
.overline::before{ content:""; width:24px; height:1px; background:var(--neon); }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:1rem 1.6rem;
  font-family:'Oswald',sans-serif; font-weight:700;
  text-transform:uppercase; letter-spacing:.14em; font-size:.92rem;
  border:1px solid transparent; cursor:pointer;
  transition: all .35s cubic-bezier(.2,.7,.2,1);
}
.btn-primary{ background:var(--neon); color:#000; box-shadow:0 0 0 0 rgba(57,255,20,0); }
.btn-primary:hover{ background:#fff; transform:translateY(-2px); box-shadow:0 12px 32px rgba(57,255,20,.25); }
.btn-ghost{ border-color:rgba(255,255,255,.2); color:#fff; }
.btn-ghost:hover{ border-color:var(--neon); color:var(--neon); transform:translateY(-2px); }

/* Magnetic card */
.card{
  position:relative; background:var(--bg-3);
  border:1px solid rgba(255,255,255,.06);
  transition: transform .5s cubic-bezier(.2,.7,.2,1), border-color .35s, background .35s;
  overflow:hidden;
}
.card:hover{ transform:translateY(-6px); border-color:rgba(57,255,20,.45); background:#151515; }
.card .corner{
  position:absolute; top:0; right:0; width:48px; height:48px;
  background: linear-gradient(225deg, var(--neon) 0%, transparent 50%);
  opacity:0; transition: opacity .4s;
}
.card:hover .corner{ opacity:1; }

/* Big rotating number bento */
.bento-num{ font-family:'Oswald'; font-size:5.5rem; line-height:1; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.2); }
.bento-num.solid{ -webkit-text-stroke:0; color:var(--neon); text-shadow:0 0 30px rgba(57,255,20,.35); }

/* Nav */
.navbar{
  position:fixed; top:0; left:0; right:0; z-index:50;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  background: rgba(5,5,5,.7); border-bottom:1px solid rgba(255,255,255,.06);
}
.nav-link{ position:relative; font-family:'Oswald',sans-serif; font-weight:500; text-transform:uppercase; letter-spacing:.18em; font-size:.82rem; color:#fff; opacity:.85; }
.nav-link:hover, .nav-link.active{ color:var(--neon); opacity:1; }
.nav-link.active::after{ content:""; position:absolute; left:0; right:0; bottom:-8px; height:2px; background:var(--neon); box-shadow:0 0 8px var(--neon); }

/* Marquee */
.marquee{ display:flex; gap:4rem; animation: scroll 35s linear infinite; }
@keyframes scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* Gallery image hover */
.gimg{ transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.gimg-wrap:hover .gimg{ transform: scale(1.08); }

/* Reveal on scroll */
.reveal{ opacity:0; transform: translateY(28px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.visible{ opacity:1; transform: translateY(0); }

/* Input style */
.input{
  width:100%; background:transparent; color:#fff;
  padding:1.1rem .25rem; border:0; border-bottom:1px solid rgba(255,255,255,.18);
  font-family:'Manrope',sans-serif; font-size:1rem; transition:border-color .3s;
}
.input::placeholder{ color:#666; }
.input:focus{ outline:none; border-bottom-color:var(--neon); }
.label{ display:block; font-family:'JetBrains Mono', monospace; font-size:.68rem; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); margin-bottom:.3rem; }

/* Lightbox */
.lightbox{ position:fixed; inset:0; background:rgba(0,0,0,.96); z-index:100; display:none; align-items:center; justify-content:center; padding:2rem; }
.lightbox.open{ display:flex; }
.lightbox img{ max-width:92vw; max-height:88vh; object-fit:contain; }
.lightbox .close{ position:absolute; top:1.5rem; right:1.5rem; color:#fff; cursor:pointer; }
.lightbox .nav-btn{ position:absolute; top:50%; transform:translateY(-50%); color:#fff; cursor:pointer; padding:1rem; }
.lightbox .nav-btn.prev{ left:1rem; } .lightbox .nav-btn.next{ right:1rem; }

/* Mobile menu */
.mobile-menu{ position:fixed; inset:0; background:#000; z-index:60; transform:translateX(100%); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.mobile-menu.open{ transform:translateX(0); }

/* Diagonal divider */
.diag-divider{
  height:120px;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg) 50%, var(--bg-2) 50%, var(--bg-2) 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 60%);
}

/* Hero kicker */
.hero-line{ width:80px; height:4px; background:var(--neon); box-shadow:0 0 16px rgba(57,255,20,.6); display:block; }

/* Glow ring around brand mark */
.brand-glow{ filter: drop-shadow(0 0 24px rgba(57,255,20,.25)); }

/* Stats counter style */
.stat-num{ font-family:'Oswald'; font-weight:700; font-size:4rem; line-height:1; color:#fff; }
.stat-num span{ color:var(--neon); }
.stat-label{ font-family:'JetBrains Mono', monospace; font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); }

/* Filter pill */
.pill{ padding:.65rem 1.25rem; border:1px solid rgba(255,255,255,.18); font-family:'Oswald'; text-transform:uppercase; letter-spacing:.16em; font-size:.78rem; cursor:pointer; transition: all .25s; }
.pill:hover{ border-color:var(--neon); color:var(--neon); }
.pill.active{ background:var(--neon); color:#000; border-color:var(--neon); }

/* Vertical text */
.vtext{ writing-mode: vertical-rl; transform: rotate(180deg); font-family:'JetBrains Mono', monospace; font-size:.7rem; letter-spacing:.4em; text-transform:uppercase; color:var(--muted); }

/* Service row image hover */
.svc-img-wrap{ overflow:hidden; }
.svc-img{ transition: transform 1s ease, filter 1s ease; filter: grayscale(.2) brightness(.85); }
.svc-img-wrap:hover .svc-img{ transform: scale(1.05); filter:none; }

/* Footer */
.footer-link{ color:#a3a3a3; font-family:'Manrope'; font-size:.92rem; transition:color .25s; }
.footer-link:hover{ color:var(--neon); }

/* Cursor accent */
@media (hover:hover){
  .cursor-dot{ position:fixed; width:8px; height:8px; border-radius:50%; background:var(--neon); pointer-events:none; z-index:1000; transform:translate(-50%,-50%); transition: transform .15s ease, width .25s, height .25s, background .25s; mix-blend-mode:difference; }
  .cursor-dot.active{ width:48px; height:48px; background:transparent; border:1px solid var(--neon); }
}

/* Utility */
.text-balance{ text-wrap:balance; }
.tight{ letter-spacing:-0.02em; }