/* ============================================================
   BUGZIFI CONNECT — SHARED STYLES v2
   Professional dark · Green as accent only · Section variety
   ============================================================ */
:root {
  --bg:         #07090f;
  --bg-alt:     #0b0e17;
  --bg-slate:   #0d1220;
  --bg-teal:    #071510;
  --bg-indigo:  #0a0b1c;
  --bg-warm:    #100b0d;
  --bg-card:    rgba(255,255,255,.04);
  --bg-ch:      rgba(255,255,255,.07);
  --green:      #22c422;
  --green-neon: #39ff14;
  --green-dim:  rgba(34,196,34,.12);
  --green-glow: rgba(34,196,34,.22);
  --blue:   #4a90f0;
  --teal:   #14c4b0;
  --violet: #9a6ef5;
  --amber:  #f0a020;
  --text:       #dde8f5;
  --text-soft:  #8fa8c0;
  --text-muted: #4c6075;
  --border:   rgba(255,255,255,.07);
  --border-g: rgba(34,196,34,.22);
  --shadow:    0 2px 20px rgba(0,0,0,.5);
  --shadow-g:  0 4px 24px rgba(34,196,34,.22);
  --shadow-lg: 0 8px 40px rgba(0,0,0,.5);
  --font-d: 'Barlow Condensed', sans-serif;
  --font-b: 'DM Sans', sans-serif;
  --max: 1200px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-b);background:var(--bg);color:var(--text);overflow-x:hidden;line-height:1.6}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}

/* PRELOADER */
#preloader{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:9999;transition:opacity .5s .1s,visibility .5s .1s}
#preloader.done{opacity:0;visibility:hidden;pointer-events:none}
.pl-inner{text-align:center}
.pl-logo{font-family:var(--font-d);font-size:3rem;font-weight:900;letter-spacing:.35em;line-height:1;margin-bottom:.25rem}
.pl-logo .bz{color:var(--text)}.pl-logo .dot{color:var(--green-neon)}
.pl-sub{font-size:.65rem;letter-spacing:.45em;text-transform:uppercase;color:var(--text-muted);margin-bottom:1.8rem}
.pl-bar{width:140px;height:2px;background:var(--border);border-radius:2px;margin:0 auto;overflow:hidden}
.pl-fill{height:100%;background:linear-gradient(90deg,var(--green),var(--green-neon));width:0;animation:pl-grow 1.3s ease forwards}
@keyframes pl-grow{to{width:100%}}

/* TOP BAR */
.topbar{background:#030508;border-bottom:1px solid var(--border);padding:.45rem 0;font-size:.8rem}
.topbar .inner{max-width:var(--max);margin:0 auto;padding:0 1.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.4rem}
.tb-left{display:flex;gap:1.4rem;flex-wrap:wrap}
.tb-left a{color:var(--text-soft);display:flex;align-items:center;gap:.4rem;transition:color .2s}
.tb-left a i{color:var(--green);font-size:.85rem}
.tb-left a:hover{color:var(--green)}
.tb-right{display:flex;gap:.5rem}
.tb-right a{width:26px;height:26px;border-radius:6px;background:var(--bg-card);border:1px solid var(--border);color:var(--text-muted);display:flex;align-items:center;justify-content:center;font-size:.72rem;transition:all .2s}
.tb-right a:hover{background:var(--green-dim);border-color:var(--border-g);color:var(--green)}

/* HEADER */
header{position:sticky;top:0;z-index:200;background:rgba(4,6,11,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:.8rem 0;transition:box-shadow .3s,border-color .3s}
header.scrolled{box-shadow:0 4px 30px rgba(0,0,0,.6);border-color:rgba(34,196,34,.1)}
.nav-wrap{max-width:var(--max);margin:0 auto;padding:0 1.5rem;display:flex;justify-content:space-between;align-items:center}
.logo{display:flex;align-items:center;gap:.7rem}
.logo-mark{width:40px;height:40px;background:var(--green);border-radius:10px;display:flex;align-items:center;justify-content:center;color:#000;font-size:1.15rem;flex-shrink:0;box-shadow:0 0 16px var(--green-glow);transition:box-shadow .3s}
.logo:hover .logo-mark{box-shadow:0 0 28px rgba(34,196,34,.4)}
.logo-copy .brand{font-family:var(--font-d);font-size:1.4rem;font-weight:900;letter-spacing:.05em;color:var(--text);line-height:1}
.logo-copy .tagline{font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--green);line-height:1}
nav.desk{display:flex;align-items:center;gap:.05rem}
nav.desk a{color:var(--text-soft);padding:.45rem .9rem;border-radius:7px;font-size:.88rem;font-weight:500;transition:all .2s}
nav.desk a:hover,nav.desk a.active{background:var(--green-dim);color:var(--green)}
.hamburger{display:none;background:none;border:1.5px solid var(--border-g);color:var(--green);padding:.45rem .65rem;border-radius:7px;cursor:pointer;font-size:1rem}

/* BUTTONS */
.btn-primary{display:inline-flex;align-items:center;gap:.4rem;background:var(--green);color:#000;padding:.6rem 1.4rem;border-radius:8px;font-family:var(--font-b);font-weight:700;font-size:.88rem;transition:all .2s;border:none;cursor:pointer}
.btn-primary:hover{background:var(--green-neon);transform:translateY(-2px);box-shadow:var(--shadow-g)}
.btn-outline{display:inline-flex;align-items:center;gap:.4rem;border:1.5px solid var(--border-g);color:var(--green);padding:.6rem 1.4rem;border-radius:8px;font-weight:600;font-size:.88rem;transition:all .2s}
.btn-outline:hover{background:var(--green-dim);border-color:var(--green);transform:translateY(-2px)}
.btn-ghost{display:inline-flex;align-items:center;gap:.4rem;border:1.5px solid rgba(255,255,255,.2);color:rgba(255,255,255,.85);padding:.6rem 1.4rem;border-radius:8px;font-weight:600;font-size:.88rem;transition:all .2s}
.btn-ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.4);transform:translateY(-2px)}

/* LAYOUT */
.container{max-width:var(--max);margin:0 auto;padding:0 1.5rem}
section{padding:5rem 0}
.text-center{text-align:center}
.text-center .section-sub{margin:0 auto}
.section-eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.7rem;font-weight:700;letter-spacing:.25em;text-transform:uppercase;color:var(--green);margin-bottom:.6rem}
.section-eyebrow::before{content:'';width:16px;height:2px;background:var(--green);border-radius:2px;display:inline-block}
.section-title{font-family:var(--font-d);font-size:clamp(1.9rem,3.5vw,2.9rem);font-weight:900;line-height:1.1;margin-bottom:.9rem}
.section-title span{color:var(--green-neon)}
.section-sub{color:var(--text-soft);max-width:520px;line-height:1.75;font-size:.94rem}

/* MARQUEE */
.marquee{overflow:hidden;background:var(--bg-alt);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:.85rem 0}
.marquee-track{display:flex;animation:marquee-move 26s linear infinite;white-space:nowrap}
.marquee-track span{font-family:var(--font-d);font-size:.88rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;padding:0 2rem;color:var(--text-soft)}
.marquee-track span.dot{color:var(--green);font-size:.4rem;vertical-align:middle}
@keyframes marquee-move{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* PACKAGE CARDS */
.packages-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(172px,1fr));gap:1.1rem;margin-top:3rem}
.pkg-card{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:1.5rem 1.1rem;text-align:center;transition:all .3s;position:relative;overflow:hidden}
.pkg-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--green),transparent);opacity:0;transition:opacity .3s}
.pkg-card:hover{transform:translateY(-6px);border-color:var(--border-g);background:rgba(34,196,34,.04);box-shadow:var(--shadow-lg)}
.pkg-card:hover::before{opacity:1}
.pkg-card.popular{border-color:var(--green);background:rgba(34,196,34,.06);transform:scale(1.03)}
.pkg-card.popular::before{opacity:1}
.pop-badge{position:absolute;top:-1px;right:14px;background:var(--green);color:#000;font-size:.62rem;font-weight:800;padding:.22rem .55rem;border-radius:0 0 7px 7px;text-transform:uppercase;letter-spacing:.1em}
.pkg-name{font-family:var(--font-d);font-size:.9rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--green);margin-bottom:.3rem}
.pkg-duration{font-size:.75rem;color:var(--text-soft);margin-bottom:.9rem}
.pkg-price{font-family:var(--font-d);font-size:2.2rem;font-weight:900;color:var(--text);line-height:1}
.pkg-price .cur{font-size:.9rem;color:var(--green);vertical-align:super}
.pkg-divider{border:none;border-top:1px solid var(--border);margin:.9rem 0}
.pkg-feature{font-size:.78rem;color:var(--text-soft);padding:.18rem 0}
.pkg-feature i{color:var(--green);margin-right:.35rem}
.pkg-btn{display:block;margin-top:1.1rem;border:1.5px solid var(--border-g);color:var(--green);padding:.5rem;border-radius:7px;font-weight:700;font-size:.83rem;cursor:pointer;transition:all .2s}
.pkg-btn:hover,.pkg-card.popular .pkg-btn{background:var(--green);color:#000}
.pay-row{display:flex;justify-content:center;gap:.9rem;flex-wrap:wrap;margin-top:2.5rem}
.pay-badge{display:flex;align-items:center;gap:.5rem;background:var(--bg-card);border:1px solid var(--border);padding:.55rem 1.1rem;border-radius:8px;font-size:.84rem;font-weight:600;color:var(--text-soft)}
.pay-badge i{color:var(--green)}

/* IMPACT STRIP */
.impact-strip{background:var(--bg-slate);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:3.5rem 0}
.impact-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.impact-item{text-align:center;padding:1rem 1.5rem;border-right:1px solid var(--border)}
.impact-item:last-child{border-right:none}
.impact-num{font-family:var(--font-d);font-size:clamp(2.2rem,4vw,3.2rem);font-weight:900;color:var(--text);line-height:1}
.impact-num em{color:var(--green-neon);font-style:normal}
.impact-lbl{font-size:.7rem;text-transform:uppercase;letter-spacing:.15em;color:var(--text-muted);margin-top:.35rem}

/* CTA BAND */
.cta-band{background:linear-gradient(135deg,#0d380d 0%,#1a6a1a 50%,#0d380d 100%);padding:4rem 0;position:relative;overflow:hidden}
.cta-band::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(57,255,20,.08) 0%,transparent 70%)}
.cta-band::after{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:60px 60px}
.cta-band-inner{position:relative;z-index:1;max-width:var(--max);margin:0 auto;padding:0 1.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:2rem}
.cta-band-text h2{font-family:var(--font-d);font-size:clamp(1.7rem,3.2vw,2.6rem);font-weight:900;line-height:1.2}
.cta-band-text h2 a{color:var(--green-neon)}
.cta-band-text p{color:rgba(255,255,255,.7);margin-top:.4rem;font-size:.9rem}
.cta-band-actions{display:flex;gap:.9rem;flex-wrap:wrap}

/* FEATURES BAR */
.features-bar{background:var(--bg-alt);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:2rem 0}
.features-bar .inner{max-width:var(--max);margin:0 auto;padding:0 1.5rem;display:flex;justify-content:space-around;flex-wrap:wrap;gap:1.5rem}
.feat-item{display:flex;align-items:center;gap:.9rem}
.feat-icon{width:44px;height:44px;background:var(--green-dim);border:1px solid var(--border-g);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.feat-icon i{color:var(--green);font-size:1.1rem}
.feat-copy h4{font-family:var(--font-d);font-size:1rem;font-weight:700}
.feat-copy p{font-size:.74rem;color:var(--text-muted)}

/* PAGE HERO */
.page-hero{padding:5rem 0 4rem;position:relative;overflow:hidden}
.page-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% -20%,rgba(34,196,34,.1) 0%,transparent 65%)}
.page-hero::after{content:'';position:absolute;inset:0;opacity:.03;background-image:linear-gradient(rgba(255,255,255,.8) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.8) 1px,transparent 1px);background-size:60px 60px}
.page-hero-content{position:relative;z-index:1;text-align:center}
.page-hero-content .section-eyebrow{justify-content:center}
.page-hero-content h1{font-family:var(--font-d);font-size:clamp(2.5rem,6vw,4.5rem);font-weight:900;line-height:1.05;margin-bottom:.8rem}
.page-hero-content h1 span{color:var(--green-neon)}
.page-hero-content .hero-desc{color:var(--text-soft);max-width:560px;margin:0 auto;line-height:1.75;font-size:.95rem}
.breadcrumb{display:flex;align-items:center;gap:.5rem;justify-content:center;font-size:.78rem;color:var(--text-muted);margin-top:1.5rem}
.breadcrumb a{color:var(--green);transition:color .2s}
.breadcrumb a:hover{color:var(--green-neon)}

/* CARD */
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:1.8rem;transition:all .3s}
.card:hover{border-color:var(--border-g);background:rgba(34,196,34,.04);transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.card-icon{width:52px;height:52px;background:var(--green-dim);border:1px solid var(--border-g);border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:1.2rem}
.card-icon i{color:var(--green);font-size:1.4rem}
.card h3{font-family:var(--font-d);font-size:1.2rem;font-weight:700;margin-bottom:.5rem}
.card p{font-size:.85rem;color:var(--text-soft);line-height:1.7}
.tag-row{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.9rem}
.tag{background:rgba(255,255,255,.05);border:1px solid var(--border);color:var(--text-soft);font-size:.7rem;padding:.2rem .6rem;border-radius:100px}

/* FAQ */
.faq-item{border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:.8rem;transition:border-color .2s}
.faq-item.open{border-color:var(--border-g)}
.faq-q{width:100%;background:var(--bg-card);border:none;color:var(--text);padding:1.1rem 1.4rem;text-align:left;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-family:var(--font-b);font-size:.92rem;font-weight:600;transition:background .2s}
.faq-q:hover{background:var(--bg-ch)}
.faq-q i{color:var(--green);transition:transform .3s;flex-shrink:0}
.faq-item.open .faq-q i{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease,padding .3s}
.faq-item.open .faq-a{max-height:300px;padding:.2rem 1.4rem 1.2rem}
.faq-a p{color:var(--text-soft);font-size:.88rem;line-height:1.75}

/* FOOTER */
footer{background:#030508;border-top:1px solid var(--border);padding:3.5rem 0 0}
.footer-grid{max-width:var(--max);margin:0 auto;padding:0 1.5rem;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2.5rem}
.footer-brand p{color:var(--text-muted);font-size:.84rem;line-height:1.75;margin:.8rem 0 1.2rem;max-width:260px}
.foot-social{display:flex;gap:.6rem}
.foot-social a{width:34px;height:34px;border-radius:8px;background:var(--bg-card);border:1px solid var(--border);color:var(--text-muted);display:flex;align-items:center;justify-content:center;font-size:.8rem;transition:all .2s}
.foot-social a:hover{background:var(--green-dim);border-color:var(--border-g);color:var(--green)}
.footer-col h5{font-family:var(--font-d);font-size:1rem;font-weight:700;color:var(--text);margin-bottom:1rem;letter-spacing:.05em;text-transform:uppercase}
.footer-col ul{list-style:none}
.footer-col ul li{margin-bottom:.5rem}
.footer-col ul li a{color:var(--text-muted);font-size:.84rem;transition:color .2s}
.footer-col ul li a:hover{color:var(--green)}
.fc-item{display:flex;align-items:flex-start;gap:.7rem;margin-bottom:.7rem}
.fc-item i{color:var(--green);width:14px;margin-top:.15rem;flex-shrink:0}
.fc-item a{color:var(--text-muted);font-size:.84rem;transition:color .2s}
.fc-item a:hover{color:var(--green)}
.footer-bottom{max-width:var(--max);margin:2.5rem auto 0;padding:1.2rem 1.5rem;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.footer-bottom p{color:var(--text-muted);font-size:.8rem}
.footer-bottom a{color:var(--green)}
.foot-links{display:flex;gap:1.2rem}
.foot-links a{color:var(--text-muted);font-size:.8rem;transition:color .2s}
.foot-links a:hover{color:var(--green)}

/* SCROLL TOP */
#scrollUp{position:fixed;bottom:1.5rem;right:1.5rem;width:42px;height:42px;background:var(--green);color:#000;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1rem;z-index:50;opacity:0;pointer-events:none;transition:all .2s;box-shadow:0 4px 16px var(--green-glow)}
#scrollUp.visible{opacity:1;pointer-events:auto}
#scrollUp:hover{background:var(--green-neon);transform:translateY(-3px)}

/* MOBILE NAV */
.mobile-nav{display:none;position:fixed;inset:0;background:rgba(3,4,8,.98);z-index:300;flex-direction:column;align-items:center;justify-content:center;gap:1.8rem}
.mobile-nav.open{display:flex}
.mobile-nav a{color:var(--text);font-family:var(--font-d);font-size:1.7rem;font-weight:700;letter-spacing:.05em;transition:color .2s}
.mobile-nav a:hover{color:var(--green)}
.mn-close{position:absolute;top:1.5rem;right:1.5rem;background:none;border:1.5px solid var(--border-g);color:var(--green);width:40px;height:40px;border-radius:8px;cursor:pointer;font-size:1rem}

/* RESPONSIVE */
@media(max-width:900px){nav.desk{display:none}.hamburger{display:block}.nav-cta{display:none}.footer-grid{grid-template-columns:1fr 1fr}.impact-grid{grid-template-columns:repeat(2,1fr)}.impact-item{border-right:none}.impact-item:nth-child(odd){border-right:1px solid var(--border)}.packages-grid{grid-template-columns:repeat(2,1fr)}.pkg-card.popular{transform:none}}
@media(max-width:600px){.footer-grid{grid-template-columns:1fr}.tb-right{display:none}}