/* ===============================
   NXERA - Fully Modified CSS
   (mobile-first, centered navbar)
   =============================== */

/* --- THEME / GLOBAL --- */
:root{
  --bg:#0e0e10;
  --bg-2:#14161a;
  --panel:#111214;
  --text:#ffffff;
  --muted:#cfd9d7;
  --accent:#00ffcc;
  --accent-2:#00ffff;
}

html, body { height: 100%; overflow-x: hidden; }
*{ box-sizing: border-box }

body{
  margin:0;
  font-family:'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
  padding-top: env(safe-area-inset-top);
}

/* Images/icons never overflow */
img, svg { max-width: 100%; height: auto; }

/* ===============================
   NAVBAR (single-row grid)
   =============================== */
.navbar{
  position:absolute; /* use fixed if you want it sticky */
  top:0; left:0; width:100%;
  z-index:10; background:transparent;
}

.navbar .nav-inner{
  display:grid;
  grid-template-columns: auto 1fr auto; /* left | center | right */
  align-items:center;
  gap:.75rem;
  max-width:1200px;
  width:100%;
  margin:0 auto;
  padding:.75rem clamp(12px, 4vw, 24px);
}

/* reset old nudges */
.navbar .nav-left,
.navbar .nav-center,
.navbar .nav-right{
  margin:0 !important;
  flex:initial !important;
  width:auto !important;
  min-width:0;
}

.navbar .nav-left{ justify-self:start; display:flex; align-items:center; }
.navbar .nav-center{ justify-self:center; }
.navbar .nav-right{ justify-self:end; display:flex; align-items:center; gap:.5rem; flex-wrap:nowrap; white-space:nowrap; }

/* Logo */
.navbar .logo{
  font-family:'Orbitron',sans-serif;
  font-weight:800; letter-spacing:.5px;
  color:var(--accent); text-decoration:none;
  text-shadow:0 0 10px #00ffcc88;
  font-size: clamp(1.25rem, 2.5vw + 1rem, 1.8rem);
}

/* Buttons */
.navbar .nav-right a{
  padding:.55rem .9rem; border-radius:999px;
  text-decoration:none; font-weight:700; font-size:.95rem;
  transition:.25s all;
}
.navbar .btn{ background:var(--accent); color:#000; }
.navbar .btn-outline{ border:1px solid var(--accent); color:var(--accent); background:transparent; }
.navbar .btn:hover{ box-shadow:0 0 10px #00ffcc88; }
.navbar .btn-outline:hover{ background:#00ffcc11; }

/* Dropdown (tap-friendly; absolute so it doesn't push layout) */
.navbar .dropdown{ position:relative; }
.navbar .dropbtn{
  background:transparent; border:0; color:var(--accent);
  font-weight:700; cursor:pointer; padding:.5rem .75rem; font-size:1.1rem;
}
.navbar .dropdown-content{
  position:absolute; left:0; top:calc(100% + 8px);
  display:none; min-width:200px;
  background:#1a1a1d; border:1px solid #00ffcc22; border-radius:12px;
  padding:.25rem; box-shadow:0 12px 28px rgba(0,0,0,.35); z-index:20;
}
.navbar .dropdown-content a{
  display:block; color:#fff; text-decoration:none; padding:.8rem 1rem; border-radius:8px;
}
.navbar .dropdown-content a:hover{ background:#00ffcc22; }
.navbar .dropdown-content.open{ display:block; }
/* also open on hover for desktop */
@media (hover:hover){ .navbar .dropdown:hover .dropdown-content{ display:block; } }

/* Hide right button group on very narrow screens (avoid wrapping) */
@media (max-width:520px){
  .navbar .nav-right{ display:none; }
  .navbar .logo{ font-size:1.35rem; }
}

/* === NAVBAR TRUE-CENTER FIX === */
.navbar .nav-inner{
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); /* equal sides, auto center */
  align-items: center;
  gap: .75rem;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: .75rem clamp(12px, 4vw, 24px);
}

.navbar .nav-left,
.navbar .nav-center,
.navbar .nav-right{
  margin: 0 !important;
  flex: initial !important;
  width: auto !important;
  min-width: 0;
}

.navbar .nav-left  { justify-self: start; display:flex; align-items:center; }
.navbar .nav-center{ justify-self: center; } /* logo stays perfectly center */
.navbar .nav-right { justify-self: end; display:flex; align-items:center; gap:.5rem; flex-wrap:nowrap; white-space:nowrap; }

/* keep your existing button/dropdown styles */


/* ===============================
   HERO
   =============================== */
.hero{
  position:relative;
  height:100svh;                 /* mobile-friendly viewport */
  min-height:520px;
  display:grid; place-items:center;
  overflow:hidden; text-align:center;
  background: linear-gradient(135deg, var(--bg) 0%, #1a1a1d 100%);
  padding-top:3.5rem;            /* space under navbar */
}
#vanta-bg{ position:absolute; inset:0; width:100%; height:100%; z-index:0 }
.hero .overlay{
  position:absolute; inset:0;
  background: radial-gradient(circle at 50% 40%, rgba(0,255,204,0.15), transparent 70%);
  z-index:1; animation: pulseGlow 6s ease-in-out infinite;
}
@keyframes pulseGlow{ 0%,100%{opacity:.25} 50%{opacity:.5} }

.hero-content{ position:relative; z-index:2; padding:0 1rem; max-width:800px }
.hero h1{ line-height:1.1; font-size: clamp(1.8rem, 5vw + 1rem, 3rem); margin:.25rem 0 }
.glow{ text-shadow:0 0 10px var(--accent), 0 0 20px var(--accent), 0 0 40px var(--accent) }
.fade-in{ font-size: clamp(.95rem, 1.5vw + .6rem, 1.15rem); margin-top:.6rem; color:var(--muted); opacity:0; animation:fadeIn 1.2s forwards .4s }
@keyframes fadeIn{ to{ opacity:1 } }

.cta{
  display:inline-block; margin-top:1.1rem; padding:.85rem 1.35rem;
  background:var(--accent); color:#000; font-weight:800;
  border-radius:40px; text-decoration:none; font-size:1rem;
  transition: transform .25s, box-shadow .25s;
}
.cta:hover{ transform: translateY(-2px) scale(1.03); box-shadow:0 0 15px var(--accent) }
.pulse{ animation:pulseButton 2s infinite }
@keyframes pulseButton{ 0%{box-shadow:0 0 0 0 rgba(0,255,204,.55)} 70%{box-shadow:0 0 0 18px rgba(0,255,204,0)} 100%{box-shadow:0 0 0 0 rgba(0,255,204,0)} }

/* ===============================
   PRICING
   =============================== */
.pricing{ padding:2.2rem 1rem; text-align:center; background: rgba(14,14,16,0.85); backdrop-filter: blur(6px) }

.glow-heading{
  position:relative; text-align:center; font-family:'Orbitron',sans-serif; color:var(--accent);
  font-size: clamp(1.4rem, 2.5vw + 1rem, 2.2rem);
  margin: 0 0 1.25rem; text-shadow:0 0 8px var(--accent),0 0 18px var(--accent-2)
}

.pricing-cards{
  display:grid; grid-template-columns:1fr; gap:1rem;
  max-width:1100px; margin:0 auto;
}
@media (min-width:560px){ .pricing-cards{ grid-template-columns: repeat(2,1fr) } }
@media (min-width:900px){ .pricing-cards{ grid-template-columns: repeat(3,1fr) } }

.pricing-card{
  background:linear-gradient(145deg, #1a1a1f, #232328);
  border:1px solid #00ffcc33; border-radius:14px; padding:1.25rem; width:auto;
  color:#ccc; text-align:center; box-shadow:0 0 10px rgba(0,255,204,0.1); transition:.3s all; position:relative; overflow:hidden;
}
.pricing-card:hover{ transform: translateY(-8px) scale(1.02); box-shadow: 0 0 10px #00ffcc33, 0 0 20px #00ffcc22, 0 0 30px #00ffff11 }
.pricing-card h3{ font-family:'Orbitron',sans-serif; color:var(--accent); font-size:1.05rem; margin:.2rem 0 .4rem; text-shadow:0 0 8px #00ffcc88 }
.pricing-card .price{ font-size:1.1rem; color:#fff; font-weight:800; margin:.3rem 0 .6rem; text-shadow:0 0 5px var(--accent) }
.pricing-card .desc{ font-size:.95rem; color:#aaa; line-height:1.45 }

/* ===============================
   HOW WE HELP (chat)
   =============================== */
.how-we-help {
  padding: 2rem 1rem;
}

.chat-container {
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: .8rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 16px;
  border: 1px solid #00ffcc22;
  box-shadow: 0 0 20px rgba(0, 255, 204, 0.05);
}

/* Initially hidden (before scroll trigger) */
.chat-bubble {
  max-width: 100%;
  padding: .9rem 1rem;
  font-size: .98rem;
  line-height: 1.6;
  position: relative;
  border-radius: 16px;
  backdrop-filter: blur(8px);
  word-wrap: break-word;

  opacity: 0;
  transform: translateY(20px) scale(0.95);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* When shown (after scroll trigger) */
.chat-bubble.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: popIn 0.35s ease;
}

.chat-bubble.bot {
  align-self: flex-start;
  background: linear-gradient(145deg, #111, #1b1b1f);
  color: var(--accent);
  border: 1px solid #00ffcc33;
  text-shadow: 0 0 5px #00ffcc55;
}

.chat-bubble.user {
  align-self: flex-end;
  background: linear-gradient(145deg, #1a1a1f, #2a2a2d);
  color: #ccc;
  border: 1px solid #88888833;
}

.chat-bubble strong {
  display: block;
  font-weight: 600;
  color: #00ffee;
  margin-bottom: .3rem;
  font-family: 'Orbitron', sans-serif;
}

/* Pop/bounce animation */
@keyframes popIn {
  0% {
    transform: scale(0.9);
  }
  60% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* ===============================
   PORTFOLIO
   =============================== */
.portfolio{
  position:relative; padding:2.5rem 1rem;
  background: linear-gradient(135deg, var(--bg) 0%, var(--bg-2) 100%);
  overflow:hidden; /* guard against horizontal scroll */
}
.floating-particles::before,.floating-particles::after{
  content:""; position:absolute; width:200%; height:200%; top:-50%; left:-50%;
  background: radial-gradient(circle, rgba(0,255,204,0.05) 0%, transparent 70%);
  animation: particleFloat 20s linear infinite; pointer-events:none; z-index:0
}
.floating-particles::after{ animation-delay:10s; opacity:.7 }
@keyframes particleFloat{ 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }

.glitch-text::before,.glitch-text::after{
  content: attr(data-text); position:absolute; left:0; width:100%; overflow:hidden;
}
.glitch-text::before{ color:#00ffff; text-shadow:2px 0 #00ffff; animation:glitch 2s infinite linear alternate-reverse }
.glitch-text::after{ color:#fff; text-shadow:-2px 0 #fff; animation:glitch 2s infinite linear alternate-reverse 1s }
@keyframes glitch{
  0%{clip-path: inset(0 0 95% 0)}
  20%{clip-path: inset(20% 0 70% 0)}
  40%{clip-path: inset(40% 0 30% 0)}
  60%{clip-path: inset(60% 0 30% 0)}
  80%{clip-path: inset(80% 0 70% 0)}
  100%{clip-path: inset(100% 0 100% 0)}
}

.projects{
  display:grid; grid-template-columns:1fr; gap:1rem; position:relative; z-index:1;
  max-width:1100px; margin:0 auto;
}
@media (min-width:680px){ .projects{ grid-template-columns: repeat(2, 1fr) } }
@media (min-width:1024px){ .projects{ grid-template-columns: repeat(4, 1fr) } }

.project-card.neon-card{
  position:relative; background:linear-gradient(135deg,#111214,#1a1a1d);
  border-radius:16px; padding:1.25rem; width:auto; border:1px solid #00ffcc33;
  box-shadow:0 0 15px rgba(0,255,204,0.25); transition: transform .4s ease, box-shadow .4s ease; overflow:hidden; backdrop-filter: blur(4px);
}
.project-card.neon-card::before{
  content:""; position:absolute; inset:-1px; background: conic-gradient(from 180deg at 50% 50%, #00ffcc33, #00ffff22, #00ffcc33);
  border-radius:inherit; z-index:-1; opacity:0; transition:.5s opacity;
}
.project-card.neon-card:hover::before{ opacity:1 }
.project-card.neon-card:hover{ transform: translateY(-12px) scale(1.03); box-shadow: 0 0 10px #00ffcc44, 0 0 25px #00ffcc33, 0 0 40px #00ffff22 }
.project-card.neon-card h3{ font-family:'Orbitron',sans-serif; font-size:1.15rem; color:var(--accent); margin:0 0 .4rem; text-shadow:0 0 12px var(--accent) }
.project-card.neon-card {
  position: relative;
  background: linear-gradient(135deg,#111214,#1a1a1d);
  border-radius: 16px;
  padding: 2.5rem 1.25rem 1.25rem; /* 🔥 added extra top padding for badge space */
  width: auto;
  border: 1px solid #00ffcc33;
  box-shadow: 0 0 15px rgba(0,255,204,0.25);
  transition: transform .4s ease, box-shadow .4s ease;
  overflow: hidden;
  backdrop-filter: blur(4px);
}

.badge {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  background: linear-gradient(135deg,#ff00cc,#3333ff);
  color: #fff;
  font-size: .75rem;
  padding: .3rem .7rem;
  border-radius: 12px;
  text-transform: uppercase;
  font-weight: 800;
  box-shadow: 0 0 8px rgba(255,0,204,.4);
  font-family: 'Orbitron', sans-serif;
  letter-spacing: .05em;
  z-index: 3;
}

/* ===============================
   WHY CHOOSE US
   =============================== */
.google-review-box{
  margin:2rem auto; background:#111214; padding:1.5rem 2rem; border:1px solid #00ffcc22; border-radius:12px;
  max-width:520px; width:100%; box-shadow:0 0 12px rgba(0,255,204,0.1); text-align:center;
}
.google-logo{ height:32px; margin-bottom:.5rem }
.review-stars{ font-size:1.5rem; color:gold }
.review-stars .star.filled{ filter: drop-shadow(0 0 4px gold) }
.review-score{ color:var(--accent); margin-left:.5rem; font-weight:800 }
.review-caption{ color:#999; font-size:.9rem; margin-top:.3rem }

.credentials{ margin:2rem auto 1rem; text-align:center }
.credentials h3{ color:var(--accent); font-family:'Orbitron',sans-serif; text-shadow:0 0 8px var(--accent); margin-bottom:1rem }
.cert-logos, .trusted-badges{ display:flex; justify-content:center; gap:1rem; flex-wrap:wrap }
.cert-item, .badge-item{ display:flex; flex-direction:column; align-items:center; text-align:center; animation: floatEffect 3s ease-in-out infinite alternate }
.cert-item img, .badge-item img{ width:48px; height:48px; margin-bottom:.4rem; filter: drop-shadow(0 0 4px #00ffcc55) }
.cert-item p, .badge-item p{ color:#ccc; font-size:.85rem; margin:0 }
@keyframes floatEffect{ from{ transform: scale(1); filter: drop-shadow(0 0 2px #00ffcc44) } to{ transform: scale(1.12); filter: drop-shadow(0 0 6px #00ffccaa) } }

.performance-metrics{
  display:flex; justify-content:center; gap:1.25rem; margin-top:2rem; flex-wrap:wrap;
}
.metric{
  background:#1a1a1f; border:1px solid #00ffcc22; border-radius:14px; padding:.8rem 1rem; min-width:140px; text-align:center;
  box-shadow:0 0 8px rgba(0,255,204,0.08); transition: transform .3s, box-shadow .3s;
}
.metric:hover{ transform: translateY(-6px); box-shadow:0 0 14px rgba(0,255,204,0.2) }
.metric .icon{ font-size:1.4rem; display:block; margin-bottom:.5rem; color:var(--accent) }
.metric p{ font-size:.95rem; color:#ddd }

/* ===============================
   FOOTER
   =============================== */
.site-footer{
  position:relative; background: radial-gradient(ellipse at top, var(--bg) 0%, var(--bg-2) 100%);
  color:#bbb; padding:3rem 1rem 1.5rem; font-size:.95rem; overflow:hidden; z-index:1;
}
.footer-container{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:2rem; max-width:1200px; margin:0 auto; position:relative; z-index:2;
}
.footer-brand,.footer-links,.footer-social{ flex:1; min-width:240px }
.footer-brand h3{ font-family:'Orbitron',sans-serif; color:var(--accent); font-size:1.6rem; margin:0 0 1rem; text-shadow:0 0 12px #00ffcc88 }
.footer-brand p{ color:#aaa; line-height:1.5; font-size:.95rem }
.footer-links h4,.footer-social h4{ color:var(--accent); font-size:1.2rem; margin:0 0 1rem; font-family:'Orbitron',sans-serif; text-shadow:0 0 8px #00ffcc55 }
.footer-links ul{ list-style:none; padding:0; margin:0 }
.footer-links li{ margin-bottom:.6rem }
.footer-links a{ color:#bbb; text-decoration:none; transition: color .3s, text-shadow .3s }
.footer-links a:hover{ color:var(--accent); text-shadow:0 0 6px #00ffcc99 }

.footer-social .social-icons{ display:flex; gap:1rem; flex-wrap:wrap }
.footer-social .social-icons a{
  color:#bbb; font-size:1.4rem; padding:.5rem; border:1px solid #00ffcc33; border-radius:50%;
  transition: all .3s; box-shadow:0 0 8px #00ffcc11; backdrop-filter: blur(2px);
}
.footer-social .social-icons a:hover{ color:var(--accent); background: rgba(0,255,204,0.05); transform: scale(1.15); box-shadow:0 0 12px #00ffcc55 }

.footer-glow{
  content:""; position:absolute; top:-60%; left:-60%; width:220%; height:220%;
  background: radial-gradient(circle at center, rgba(0,255,204,0.03), transparent 80%);
  animation: footerPulse 20s linear infinite; pointer-events:none; z-index:0;
}
@keyframes footerPulse{ 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }

.footer-bottom{
  text-align:center; padding-top:2rem; border-top:1px solid #333; color:#888; font-size:.85rem; margin-top:3rem; z-index:2; position:relative;
}
.neon-text{ color:var(--accent); text-shadow:0 0 5px var(--accent), 0 0 10px var(--accent-2) }

/* Footer responsive tweaks */
@media (max-width:768px){
  .footer-container{ flex-direction:column; align-items:center; text-align:center }
  .footer-links li{ margin-bottom:.8rem }
  .footer-social .social-icons{ justify-content:center }
}

/* ===============================
   ACCESSIBILITY / MOTION
   =============================== */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}