/*
Theme Name: Zeroinsect Solutions
Theme URI: https://zeroinsect.com
Author: Zeroinsect Solutions
Description: Premium dark one-page pest control theme with cinematic animations.
Version: 1.0
License: GNU General Public License v2
Text Domain: zeroinsect
*/

:root {
  --bg: #0b0f0b;
  --fg: #e8ede8;
  --primary: hsl(145,70%,45%);
  --primary-fg: #0a0f0a;
  --card: #141a14;
  --border: #1e2a1e;
  --muted: hsl(150,8%,55%);
  --neon: hsl(145,100%,50%);
  --smoke: hsl(150,5%,20%);
}

/* BODY */
body {
  background: var(--bg);
  color: var(--fg);
  font-family: 'Poppins', sans-serif;
}

/* CARD STYLE */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  position: relative;
  overflow: hidden;

  /* Neon Glow */
  box-shadow: 
    0 0 5px var(--neon),
    0 0 10px rgba(0,255,120,0.3),
    inset 0 0 10px rgba(0,255,120,0.1);

  transition: 0.3s ease;
}

/* BORDER NEON EFFECT */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  padding: 1px;
  background: linear-gradient(120deg, transparent, var(--neon), transparent);
  -webkit-mask: 
    linear-gradient(#000 0 0) content-box, 
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;

  animation: borderGlow 3s linear infinite;
}

/* HOVER EFFECT */
.card:hover {
  transform: translateY(-5px) scale(1.01);
  box-shadow: 
    0 0 10px var(--neon),
    0 0 25px rgba(0,255,120,0.6),
    0 0 50px rgba(0,255,120,0.3);
}

/* TEXT NORMAL */
.text-normal {
  color: white;
}

/* TEXT NEON */
.text-neon {
  color: var(--neon);
  text-shadow: 
    0 0 5px var(--neon),
    0 0 10px var(--neon),
    0 0 20px rgba(0,255,120,0.8),
    0 0 40px rgba(0,255,120,0.6);
}

/* MIX TEXT */
.text-mix span {
  color: white;
}

.text-mix strong {
  color: var(--neon);
  text-shadow: 
    0 0 5px var(--neon),
    0 0 15px var(--neon);
}

/* ANIMATION */
@keyframes borderGlow {
  0% {
    filter: drop-shadow(0 0 2px var(--neon));
  }
  50% {
    filter: drop-shadow(0 0 10px var(--neon));
  }
  100% {
    filter: drop-shadow(0 0 2px var(--neon));
  }
}

*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font-family:'Outfit',sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6{font-family:'Space Grotesk',sans-serif}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto}

/* Intro */
.zp-intro{position:fixed;inset:0;z-index:100;background:var(--bg);display:flex;align-items:center;justify-content:center;transition:opacity 1s}
.zp-intro.hide{opacity:0;pointer-events:none}
.zp-intro .thread{position:absolute;top:0;left:50%;width:1px;background:hsl(150,10%,40%);transform:translateX(-50%);animation:thread 1.5s ease-out forwards}
.zp-intro .spider{position:absolute;left:50%;transform:translateX(-50%);top:-50px;animation:drop 1.5s ease-out forwards,swing 2s 1.5s ease-in-out 2}
.zp-intro .intro-text{text-align:center;opacity:0;animation:fadeUp .8s 2.8s forwards}
.zp-intro .intro-text h1{font-size:clamp(1.5rem,4vw,3rem);color:var(--fg);text-shadow:0 0 20px hsla(145,100%,50%,.5)}
.zp-intro .intro-text p{color:var(--muted);text-transform:uppercase;letter-spacing:.2em;font-size:.85rem;margin-top:.5rem}
@keyframes thread{from{height:0}to{height:40vh}}
@keyframes drop{from{top:-50px}to{top:calc(40vh - 25px)}}
@keyframes swing{0%,100%{transform:translateX(-50%) rotate(0)}25%{transform:translateX(-50%) rotate(3deg)}75%{transform:translateX(-50%) rotate(-3deg)}}
@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}

/* Header */
.zp-header{position:fixed;top:0;left:0;right:0;z-index:50;padding:1rem 2rem;display:flex;align-items:center;justify-content:space-between;background:hsla(150,10%,4%,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);transition:transform .3s}
.zp-header .logo{font-family:'Space Grotesk',sans-serif;font-size:1.25rem;font-weight:700;color:var(--primary)}
.zp-header nav a{color:var(--muted);margin-left:1.5rem;font-size:.875rem;transition:color .3s}
.zp-header nav a:hover{color:var(--primary)}
.zp-menu-btn{display:none;background:none;border:none;color:var(--fg);font-size:1.5rem;cursor:pointer}
@media(max-width:768px){.zp-header nav{position:fixed;top:0;right:-100%;width:70%;height:100vh;background:var(--bg);flex-direction:column;padding:5rem 2rem;transition:right .3s;display:flex;gap:1.5rem}.zp-header nav.open{right:0}.zp-header nav a{margin:0;font-size:1.1rem}.zp-menu-btn{display:block}}

/* Sections */
section{padding:5rem 1.5rem;max-width:1100px;margin:0 auto}
.section-label{color:var(--primary);font-size:.75rem;text-transform:uppercase;letter-spacing:.15em;font-weight:500}
.section-title{font-size:clamp(1.75rem,4vw,2.75rem);margin:.5rem 0 2rem;line-height:1.2}
.section-title span{color:var(--primary);text-shadow:0 0 20px hsla(145,100%,50%,.4)}

/* Hero */
.zp-hero{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;position:relative;overflow:hidden}
.zp-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 20% 50%,hsla(150,5%,20%,.4),transparent 50%),radial-gradient(ellipse at 80% 20%,hsla(145,70%,45%,.08),transparent 50%)}
.zp-hero h1{font-size:clamp(2rem,5vw,3.5rem);max-width:800px;line-height:1.15}
.zp-hero p{color:var(--muted);max-width:600px;margin:1rem auto 2rem}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.75rem;border-radius:.5rem;font-weight:600;font-size:.9rem;transition:all .3s;cursor:pointer;border:none}
.btn-primary{background:var(--primary);color:var(--primary-fg)}
.btn-primary:hover{box-shadow:0 0 25px hsla(145,100%,50%,.3)}
.btn-outline{border:1px solid var(--border);color:var(--fg);background:transparent}
.btn-outline:hover{border-color:var(--primary);color:var(--primary)}
.hero-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* Stats */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;text-align:center}
.stat-card{background:var(--card);border:1px solid var(--border);border-radius:.75rem;padding:2rem 1rem}
.stat-card .num{font-size:2.5rem;font-weight:700;color:var(--primary);font-family:'Space Grotesk',sans-serif}
.stat-card p{color:var(--muted);font-size:.85rem;margin-top:.25rem}

/* Services */
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}
.service-card{background:var(--card);border:1px solid var(--border);border-radius:.75rem;padding:2rem;transition:transform .3s,box-shadow .3s}
.service-card:hover{transform:translateY(-4px);box-shadow:0 0 30px hsla(145,100%,50%,.12)}
.service-card .icon{width:48px;height:48px;border-radius:.5rem;background:hsla(145,70%,45%,.1);display:flex;align-items:center;justify-content:center;color:var(--primary);font-size:1.25rem;margin-bottom:1rem}
.service-card h3{font-size:1.1rem;margin-bottom:.5rem}
.service-card p{color:var(--muted);font-size:.85rem;line-height:1.6}

/* Gallery */
.gallery-tabs{display:flex;gap:.5rem;justify-content:center;margin-bottom:2rem}
.gallery-tabs button{padding:.5rem 1.5rem;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--muted);cursor:pointer;font-size:.85rem;transition:all .3s}
.gallery-tabs button.active{background:var(--primary);color:var(--primary-fg);border-color:var(--primary);box-shadow:0 0 15px hsla(145,100%,50%,.2)}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem}
.gallery-grid .item{border-radius:.75rem;overflow:hidden;aspect-ratio:3/2;position:relative;cursor:pointer}
.gallery-grid .item img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.gallery-grid .item:hover img{transform:scale(1.08)}

/* About */
.about-content{max-width:750px;color:var(--muted);line-height:1.8;font-size:1rem}

/* Testimonials */
.testimonials-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}
.testimonial-card{background:var(--card);border:1px solid var(--border);border-radius:.75rem;padding:1.5rem}
.testimonial-card .stars{color:var(--primary);margin-bottom:.75rem}
.testimonial-card blockquote{color:var(--muted);font-size:.9rem;line-height:1.7;font-style:italic;margin-bottom:1rem}
.testimonial-card .author{font-weight:600;font-size:.85rem}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem}
@media(max-width:768px){.contact-grid{grid-template-columns:1fr}}
.contact-grid input{width:100%;padding:.75rem 1rem;background:var(--card);border:1px solid var(--border);border-radius:.5rem;color:var(--fg);font-size:.9rem;margin-bottom:.75rem}
.contact-grid input:focus{outline:none;border-color:var(--primary)}
.contact-info .info-item{display:flex;gap:1rem;align-items:flex-start;margin-bottom:1.5rem}
.contact-info .info-icon{width:40px;height:40px;border-radius:.5rem;background:hsla(145,70%,45%,.1);display:flex;align-items:center;justify-content:center;color:var(--primary);flex-shrink:0}
.contact-info h4{font-size:.95rem;margin-bottom:.15rem}
.contact-info p{color:var(--muted);font-size:.85rem}

/* Footer */
.zp-footer{text-align:center;padding:2rem;border-top:1px solid var(--border);color:var(--muted);font-size:.8rem}

/* WhatsApp */
.zp-wa{position:fixed;bottom:1.5rem;right:1.5rem;z-index:40;width:56px;height:56px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;color:var(--primary-fg);font-size:1.5rem;box-shadow:0 0 20px hsla(145,100%,50%,.25);animation:bounce 2s infinite;border:none;cursor:pointer}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* Lightbox */
.zp-lightbox{position:fixed;inset:0;z-index:60;background:hsla(150,10%,4%,.92);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:1rem}
.zp-lightbox.show{display:flex}
.zp-lightbox img{max-width:90%;max-height:85vh;border-radius:.75rem;object-fit:contain}
.zp-lightbox .close{position:absolute;top:1.5rem;right:1.5rem;background:none;border:none;color:var(--fg);font-size:2rem;cursor:pointer}

/* Scroll animations */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .6s,transform .6s}
.reveal.visible{opacity:1;transform:translateY(0)}

/* Clients marquee */
.marquee-wrap{overflow:hidden}
.marquee-track{display:flex;gap:3rem;animation:marquee 20s linear infinite;width:max-content}
.marquee-track span{color:var(--muted);font-size:1rem;white-space:nowrap;padding:.75rem 1.5rem;border:1px solid var(--border);border-radius:.5rem}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}