/* ================================================================
   QB.LK — Shared Stylesheet  v3.0 (Client Approval Build)
   AccSoft Solutions (Pvt) Ltd
================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&family=Poppins:wght@300;400;500;600;700;800&display=swap');
@import url('https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.19.0/dist/tabler-icons.min.css');

/* ── Design Tokens ── */
:root {
  --qb-green:     #2ca01c;   /* QuickBooks brand green */
  --green:        #1a5c2a;
  --green-dark:   #0d2e15;
  --green-mid:    #2d7a3e;
  --green-light:  #e8f5ec;
  --green-pale:   #f0f9f2;
  --sand:         #c8956a;
  --sand-light:   #f5ede4;
  --sand-pale:    #faf5f0;
  --sand-dark:    #9e6d47;
  --white:        #ffffff;
  --off-white:    #fafaf8;
  --gray-50:      #f8f8f6;
  --gray-100:     #f0efec;
  --gray-200:     #e2e1dc;
  --gray-400:     #9e9d96;
  --gray-600:     #6b6a63;
  --gray-800:     #2e2e2a;
  --charcoal:     #1c1c1a;
  --shadow-sm:    0 1px 3px rgba(26,92,42,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow-md:    0 4px 16px rgba(26,92,42,.08),0 2px 8px rgba(0,0,0,.06);
  --shadow-lg:    0 12px 40px rgba(26,92,42,.12),0 4px 16px rgba(0,0,0,.08);
  --radius-sm:    8px;
  --radius-md:    14px;
  --radius-lg:    22px;
  --radius-xl:    32px;
  --transition:   all .22s cubic-bezier(.4,0,.2,1);
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:'Manrope',sans-serif;color:var(--charcoal);background:var(--white);overflow-x:hidden;line-height:1.65}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{cursor:pointer;border:none;background:none;font-family:inherit}

/* ── Typography ── */
.display-xl{font-family:'Poppins',sans-serif;font-size:clamp(2.4rem,5vw,4rem);font-weight:800;line-height:1.1;letter-spacing:-.03em}
.display-lg{font-family:'Poppins',sans-serif;font-size:clamp(2rem,4vw,3.2rem);font-weight:800;line-height:1.15;letter-spacing:-.025em}
.display-md{font-family:'Poppins',sans-serif;font-size:clamp(1.6rem,3vw,2.4rem);font-weight:700;line-height:1.2;letter-spacing:-.02em}
.display-sm{font-family:'Poppins',sans-serif;font-size:clamp(1.25rem,2.5vw,1.75rem);font-weight:700;line-height:1.3;letter-spacing:-.015em}
.body-lg{font-size:1.125rem;line-height:1.7;font-weight:400}
.body-md{font-size:1rem;line-height:1.65;font-weight:400}
.body-sm{font-size:.9rem;line-height:1.6;font-weight:400}
.label-tag{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.text-green{color:var(--green)}.text-sand{color:var(--sand)}.text-muted{color:var(--gray-600)}.text-white{color:var(--white)}.text-center{text-align:center}

/* ── Layout ── */
.container{width:min(1200px,100%);margin-inline:auto;padding-inline:clamp(1rem,4vw,2.5rem)}
.section{padding-block:clamp(3.5rem,8vw,7rem)}
.section-sm{padding-block:clamp(2rem,5vw,4rem)}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(1.25rem,3vw,2rem)}
.grid-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:clamp(1rem,2.5vw,1.75rem)}
.flex-col{display:flex;flex-direction:column}
.gap-2{gap:1rem}
.bg-off-white{background:var(--off-white)}
.bg-gray{background:var(--gray-50)}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.75rem;border-radius:var(--radius-md);font-weight:600;font-size:.95rem;transition:var(--transition);letter-spacing:.01em;white-space:nowrap;cursor:pointer}
.btn-primary{background:var(--green);color:var(--white)}
.btn-primary:hover{background:var(--green-dark);transform:translateY(-1px);box-shadow:0 8px 24px rgba(26,92,42,.25)}
.btn-outline{background:transparent;color:var(--green);border:2px solid var(--green)}
.btn-outline:hover{background:var(--green);color:var(--white);transform:translateY(-1px)}
.btn-sand{background:var(--sand);color:var(--white)}
.btn-sand:hover{background:var(--sand-dark);transform:translateY(-1px);box-shadow:0 8px 24px rgba(200,149,106,.3)}
.btn-ghost{background:rgba(255,255,255,.15);color:var(--white);border:1.5px solid rgba(255,255,255,.35);backdrop-filter:blur(8px)}
.btn-ghost:hover{background:rgba(255,255,255,.25);border-color:rgba(255,255,255,.6)}
.btn-lg{padding:1rem 2.25rem;font-size:1.05rem}
.btn-sm{padding:.55rem 1.25rem;font-size:.875rem}

/* ================================================================
   NAVBAR  — always dark forest-green glass
================================================================ */
.navbar{position:fixed;top:0;left:0;right:0;z-index:1000;padding:0;transition:var(--transition)}
.navbar-inner-wrap{
  background:rgba(13,46,21,.9);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid rgba(255,255,255,.09);
  transition:var(--transition);
}
.navbar.scrolled .navbar-inner-wrap{background:rgba(8,30,14,.97);box-shadow:0 2px 32px rgba(0,0,0,.3)}
.navbar-inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:.65rem 0}

/* Logo — bigger, more prominent */
.logo-wrap{display:flex;align-items:center;flex-shrink:0;text-decoration:none}
.logo-svg-wrap{height:58px;width:auto;display:flex;align-items:center;flex-shrink:0}
.logo-svg-wrap svg{height:58px;width:auto;display:block}

/* Nav links */
.nav-links{display:flex;align-items:center;gap:1.75rem}
.nav-link{font-weight:600;font-size:.9rem;color:rgba(255,255,255,.75);transition:var(--transition);position:relative;padding:.3rem 0;letter-spacing:.01em}
.nav-link::after{content:'';position:absolute;bottom:-3px;left:0;right:0;height:2px;background:var(--sand);border-radius:2px;transform:scaleX(0);transition:var(--transition);transform-origin:left}
.nav-link:hover{color:var(--white)}
.nav-link.active{color:var(--white)}
.nav-link.active::after,.nav-link:hover::after{transform:scaleX(1)}

/* CTA button */
.btn-nav-cta{
  background:var(--sand);color:var(--white);border:none;
  padding:.65rem 1.5rem;border-radius:var(--radius-md);
  font-weight:700;font-size:.9rem;
  transition:var(--transition);
  display:inline-flex;align-items:center;gap:.4rem;
  white-space:nowrap;letter-spacing:.01em;text-decoration:none;
}
.btn-nav-cta:hover{background:var(--sand-dark);transform:translateY(-1px);box-shadow:0 6px 20px rgba(200,149,106,.35)}

/* Hamburger */
.hamburger{display:none;flex-direction:column;gap:5px;padding:.35rem;cursor:pointer;color:var(--white);background:none;border:none}
.hamburger span{width:22px;height:2px;background:currentColor;border-radius:2px;transition:var(--transition);display:block}

/* Mobile menu */
.mobile-menu{display:none;position:fixed;inset:0;z-index:999;background:rgba(8,30,14,.98);backdrop-filter:blur(20px);padding:5rem 2rem 2rem;flex-direction:column;gap:1.25rem;overflow-y:auto}
.mobile-menu.open{display:flex}
.mobile-nav-link{font-size:1.3rem;font-weight:700;color:rgba(255,255,255,.85);padding:.875rem 0;border-bottom:1px solid rgba(255,255,255,.08);transition:var(--transition);text-decoration:none;display:block}
.mobile-nav-link:hover{color:var(--sand)}

/* ── Section labels ── */
.section-label{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:.875rem}
.section-label-line{width:2rem;height:2px;background:var(--sand);border-radius:2px}
.section-title{margin-bottom:1rem}
.section-desc{color:var(--gray-600);max-width:600px}
.section-header-center .section-desc{margin-inline:auto}

/* ── Trust strip ── */
.trust-strip{background:var(--green);padding:1.25rem 0}
.trust-items{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2.5rem}
.trust-item{display:flex;align-items:center;gap:.625rem;color:rgba(255,255,255,.85)}
.trust-item span{font-size:.875rem;font-weight:600}

/* ── Stat cards ── */
.stat-card{background:var(--white);border-radius:var(--radius-md);padding:2rem;text-align:center;box-shadow:var(--shadow-md);border:1px solid var(--gray-100);transition:var(--transition)}
.stat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.stat-num{font-family:'Poppins',sans-serif;font-size:2.75rem;font-weight:800;color:var(--green);line-height:1}
.stat-plus{color:var(--sand)}
.stat-label{font-size:.95rem;color:var(--gray-600);margin-top:.5rem;font-weight:500}

/* ── Service cards (image top) ── */
.svc-card{background:var(--white);border-radius:var(--radius-lg);overflow:hidden;border:1.5px solid var(--gray-100);transition:var(--transition);display:flex;flex-direction:column}
.svc-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--green-light)}
.svc-card-img{height:180px;overflow:hidden;position:relative;flex-shrink:0}
.svc-card-img-svg{width:100%;height:100%;display:block}
.svc-card-img-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,46,21,0) 40%,rgba(13,46,21,.55) 100%)}
.svc-card-body{padding:1.625rem;flex:1;display:flex;flex-direction:column}
.svc-card-title{font-family:'Poppins',sans-serif;font-size:1.05rem;font-weight:700;color:var(--green);margin-bottom:.5rem}
.svc-card-desc{font-size:.9rem;color:var(--gray-600);line-height:1.65;flex:1}
.svc-includes-label{font-size:.8rem;font-weight:700;color:var(--sand);letter-spacing:.06em;text-transform:uppercase;margin:.875rem 0 .5rem}
.svc-includes{display:flex;flex-direction:column;gap:.4rem}
.svc-include-item{display:flex;align-items:flex-start;gap:.5rem;font-size:.85rem;color:var(--gray-800);line-height:1.5}
.svc-check{width:16px;height:16px;min-width:16px;border-radius:50%;background:var(--green-light);display:flex;align-items:center;justify-content:center;margin-top:1px}
.svc-check i{font-size:.65rem;color:var(--green)}

/* ================================================================
   KEY FEATURES  — dark strip
================================================================ */
.key-features-section{background:#141a14;padding:clamp(3rem,7vw,5.5rem) 0;position:relative;overflow:hidden}
.key-features-section::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.025) 1px,transparent 1px);background-size:28px 28px;pointer-events:none}
.kf-header{margin-bottom:3rem}
.kf-header h2{font-family:'Poppins',sans-serif;font-size:clamp(1.8rem,3.5vw,2.6rem);font-weight:800;color:var(--white);letter-spacing:-.02em}
.kf-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}
.kf-item{display:flex;flex-direction:column;align-items:center;text-align:center;padding:1.75rem 1rem;border-radius:var(--radius-md);transition:var(--transition);cursor:default}
.kf-item.active,.kf-item:hover{background:var(--white)}
.kf-icon-wrap{width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem;transition:var(--transition);flex-shrink:0}
.kf-item:hover .kf-icon-wrap,.kf-item.active .kf-icon-wrap{background:var(--green);border-color:var(--green)}
.kf-icon-wrap i{font-size:1.75rem;color:rgba(255,255,255,.7);transition:var(--transition)}
.kf-item:hover .kf-icon-wrap i,.kf-item.active .kf-icon-wrap i{color:var(--white)}
.kf-label{font-size:.875rem;font-weight:700;color:rgba(255,255,255,.75);line-height:1.4;transition:var(--transition)}
.kf-item:hover .kf-label,.kf-item.active .kf-label{color:var(--charcoal)}

/* ── Feature cards ── */
.feature-card{background:var(--gray-50);border-radius:var(--radius-md);padding:1.5rem;display:flex;gap:1rem;align-items:flex-start;border:1px solid var(--gray-100);transition:var(--transition)}
.feature-card:hover{background:var(--white);box-shadow:var(--shadow-md);border-color:var(--gray-200)}
.feature-icon{width:44px;height:44px;min-width:44px;border-radius:var(--radius-sm);background:var(--green-light);display:flex;align-items:center;justify-content:center}
.feature-icon i{font-size:1.2rem;color:var(--green)}
.feature-card h4{font-weight:700;font-size:.95rem;margin-bottom:.25rem;color:var(--charcoal)}
.feature-card p{font-size:.875rem;color:var(--gray-600);line-height:1.6}

/* ── Why section ── */
.why-section{background:linear-gradient(160deg,var(--green-dark) 0%,var(--green) 100%);position:relative;overflow:hidden}
.why-section::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.025) 1px,transparent 1px);background-size:24px 24px;pointer-events:none}
.why-card{background:rgba(255,255,255,.08);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-md);padding:1.75rem;transition:var(--transition)}
.why-card:hover{background:rgba(255,255,255,.14);transform:translateY(-3px)}
.why-icon{width:48px;height:48px;border-radius:var(--radius-sm);background:rgba(200,149,106,.18);display:flex;align-items:center;justify-content:center;margin-bottom:1rem;border:1px solid rgba(200,149,106,.25)}
.why-icon i{font-size:1.3rem;color:var(--sand)}
.why-card h4{color:var(--white);font-weight:700;font-size:1rem;margin-bottom:.5rem}
.why-card p{color:rgba(255,255,255,.68);font-size:.875rem;line-height:1.65}

/* ── Testimonials ── */
.testimonial-card{background:var(--white);border-radius:var(--radius-lg);padding:2rem;box-shadow:var(--shadow-md);border:1px solid var(--gray-100);transition:var(--transition);display:flex;flex-direction:column;gap:1.25rem}
.testimonial-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.testimonial-text{font-size:.95rem;color:var(--gray-800);line-height:1.7;font-style:italic;flex:1}
.testimonial-author{display:flex;align-items:center;gap:.75rem;padding-top:1rem;border-top:1px solid var(--gray-100)}
.author-avatar{width:44px;height:44px;min-width:44px;border-radius:50%;background:var(--green-light);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem;color:var(--green)}
.author-name{font-weight:700;font-size:.9rem;color:var(--charcoal)}
.author-role{font-size:.8rem;color:var(--gray-600)}
.stars{display:flex;gap:2px;color:var(--sand);margin-bottom:.5rem}
.stars i{font-size:.875rem}

/* ── Tags ── */
.expertise-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.tag{background:var(--green-light);color:var(--green);padding:.375rem .875rem;border-radius:100px;font-size:.8rem;font-weight:600;border:1px solid rgba(26,92,42,.15);display:inline-flex;align-items:center;gap:.3rem}

/* ── CTA block ── */
.cta-section{background:var(--sand-pale);border-radius:var(--radius-xl);padding:clamp(2.5rem,6vw,5rem);text-align:center;position:relative;overflow:hidden;border:1px solid var(--gray-100)}
.cta-section::before{content:'';position:absolute;top:-30%;right:-10%;width:50%;height:150%;background:radial-gradient(ellipse,rgba(26,92,42,.06) 0%,transparent 70%);pointer-events:none}

/* ── Page hero (inner pages) ── */
.page-hero{background:linear-gradient(135deg,var(--green-dark) 0%,var(--green) 100%);padding:clamp(7rem,13vw,10rem) 0 clamp(3rem,6vw,5rem);position:relative;overflow:hidden}
.page-hero::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.025) 1px,transparent 1px);background-size:28px 28px}
.page-hero-glow{position:absolute;top:-20%;right:-10%;width:60%;height:140%;background:radial-gradient(ellipse,rgba(200,149,106,.12) 0%,transparent 65%);pointer-events:none}
.page-hero-content{position:relative;z-index:2;text-align:center}
.breadcrumb{display:flex;align-items:center;gap:.5rem;justify-content:center;margin-bottom:1.25rem}
.breadcrumb-item{font-size:.85rem;font-weight:600;color:rgba(255,255,255,.55)}
.breadcrumb-item.active{color:var(--sand)}
.breadcrumb-sep{color:rgba(255,255,255,.3);font-size:.7rem}

/* ── Contact ── */
.contact-info-card{background:var(--white);border-radius:var(--radius-lg);padding:1.75rem;border:1.5px solid var(--gray-100);display:flex;gap:1rem;align-items:flex-start;transition:var(--transition)}
.contact-info-card:hover{border-color:var(--green-light);box-shadow:var(--shadow-md)}
.contact-icon{width:48px;height:48px;min-width:48px;border-radius:var(--radius-sm);background:var(--green-light);display:flex;align-items:center;justify-content:center}
.contact-icon i{font-size:1.2rem;color:var(--green)}
.contact-label{font-size:.8rem;font-weight:700;color:var(--sand);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.25rem}
.contact-value{font-weight:600;font-size:1rem;color:var(--charcoal)}
.contact-sub{font-size:.85rem;color:var(--gray-600);margin-top:.125rem}
.form-group{display:flex;flex-direction:column;gap:.5rem}
.form-label{font-size:.875rem;font-weight:600;color:var(--charcoal)}
.form-input,.form-select,.form-textarea{width:100%;padding:.75rem 1rem;border:1.5px solid var(--gray-200);border-radius:var(--radius-sm);font-size:.95rem;font-family:inherit;color:var(--charcoal);background:var(--white);transition:var(--transition);outline:none}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(26,92,42,.08)}
.form-textarea{resize:vertical;min-height:120px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-success{display:none;background:var(--green-light);border:1.5px solid var(--green);border-radius:var(--radius-sm);padding:1rem 1.25rem;color:var(--green);font-weight:600;font-size:.9rem;align-items:center;gap:.5rem}
.form-success.show{display:flex}
.map-wrap{border-radius:var(--radius-lg);overflow:hidden;height:300px;background:var(--green-light);display:flex;align-items:center;justify-content:center;border:1.5px solid var(--gray-100)}

/* ── Services page large cards ── */
.service-card-lg{background:var(--white);border-radius:var(--radius-xl);padding:2.5rem;border:1.5px solid var(--gray-100);transition:var(--transition);position:relative;overflow:hidden}
.service-card-lg::after{content:'';position:absolute;bottom:0;right:0;width:160px;height:160px;border-radius:50%;background:var(--green-light);transform:translate(50%,50%);opacity:.5;transition:var(--transition)}
.service-card-lg:hover{box-shadow:var(--shadow-lg);border-color:var(--green-light);transform:translateY(-4px)}
.service-card-lg:hover::after{background:var(--sand-light)}
.service-num{font-family:'Poppins',sans-serif;font-size:3.5rem;font-weight:800;color:var(--gray-100);line-height:1;margin-bottom:.5rem;position:relative;z-index:1}
.service-card-lg h3{font-family:'Poppins',sans-serif;font-size:1.3rem;font-weight:700;color:var(--charcoal);margin-bottom:.75rem;position:relative;z-index:1}
.service-card-lg > p{font-size:.95rem;color:var(--gray-600);line-height:1.7;margin-bottom:1.5rem;position:relative;z-index:1}

/* ── About page ── */
.mission-vision-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.mv-card{border-radius:var(--radius-lg);padding:2.25rem;position:relative;overflow:hidden}
.mv-card-mission{background:linear-gradient(135deg,var(--green-dark),var(--green))}
.mv-card-vision{background:linear-gradient(135deg,var(--sand-dark),var(--sand))}
.mv-card h3{font-family:'Poppins',sans-serif;font-size:1.3rem;font-weight:800;color:var(--white);margin-bottom:.75rem}
.mv-card p{font-size:.95rem;color:rgba(255,255,255,.82);line-height:1.7}
.mv-icon{width:48px;height:48px;border-radius:var(--radius-sm);background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem}
.mv-icon i{font-size:1.3rem;color:var(--white)}
.timeline{position:relative;padding-left:2rem}
.timeline::before{content:'';position:absolute;left:.5rem;top:.5rem;bottom:.5rem;width:2px;background:linear-gradient(to bottom,var(--green),var(--sand))}
.timeline-item{position:relative;padding-bottom:2rem}
.timeline-item:last-child{padding-bottom:0}
.timeline-dot{position:absolute;left:-1.625rem;top:.25rem;width:12px;height:12px;border-radius:50%;background:var(--green);border:2px solid var(--white);box-shadow:0 0 0 3px var(--green-light)}
.timeline-year{font-size:.8rem;font-weight:700;color:var(--sand);letter-spacing:.08em;text-transform:uppercase;margin-bottom:.25rem}
.timeline-title{font-weight:700;font-size:1rem;color:var(--charcoal);margin-bottom:.375rem}
.timeline-desc{font-size:.875rem;color:var(--gray-600);line-height:1.65}

/* ================================================================
   HOME HERO
================================================================ */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden}
/* Hero bg — QB logo green as primary tone */
.hero-bg{
  position:absolute;inset:0;
  background:linear-gradient(140deg,#0a2e0e 0%,#1a5c2a 45%,#2ca01c 100%);
}
.hero-pattern{position:absolute;inset:0;opacity:.03;background-image:radial-gradient(var(--white) 1px,transparent 1px);background-size:32px 32px}
.hero-glow{position:absolute;top:-10%;right:-5%;width:55%;height:120%;background:radial-gradient(ellipse,rgba(44,160,28,.25) 0%,transparent 70%);pointer-events:none}
.hero-glow-2{position:absolute;bottom:-20%;left:-5%;width:45%;height:80%;background:radial-gradient(ellipse,rgba(255,255,255,.04) 0%,transparent 70%);pointer-events:none}
.hero-content{position:relative;z-index:2;padding:8.5rem 0 5rem}
.hero-badge{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.11);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.92);padding:.45rem 1rem;border-radius:100px;font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:1.75rem}
.hero-badge-dot{width:7px;height:7px;border-radius:50%;background:var(--sand);flex-shrink:0;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.82)}}
.hero-heading{color:var(--white);margin-bottom:1.5rem}
.hero-heading em{font-style:normal;color:#7ee86a}
.hero-desc{color:rgba(255,255,255,.8);max-width:560px;margin-bottom:2.5rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:1rem}

/* QB logo spotlight in hero */
.qb-logo-wrap{
  display:flex;align-items:center;gap:1rem;margin-bottom:2rem;
}
.qb-logo-anim{
  position:relative;
  width:72px;height:72px;flex-shrink:0;
}
.qb-logo-anim img{
  width:72px;height:72px;
  border-radius:50%;
  display:block;
  position:relative;z-index:3;
  filter:drop-shadow(0 0 12px rgba(44,160,28,.7));
}
/* Animated pulse rings around QB logo */
.qb-ring{
  position:absolute;
  inset:-6px;
  border-radius:50%;
  border:2px solid rgba(44,160,28,.5);
  animation:qb-ripple 2.4s ease-out infinite;
}
.qb-ring:nth-child(2){inset:-14px;border-color:rgba(44,160,28,.3);animation-delay:.6s}
.qb-ring:nth-child(3){inset:-24px;border-color:rgba(44,160,28,.15);animation-delay:1.2s}
@keyframes qb-ripple{
  0%{transform:scale(.9);opacity:1}
  100%{transform:scale(1.15);opacity:0}
}
.qb-logo-text-wrap{display:flex;flex-direction:column}
.qb-logo-tagline{font-size:.75rem;color:rgba(255,255,255,.6);font-weight:500;letter-spacing:.05em}
.qb-logo-name{font-family:'Poppins',sans-serif;font-size:1rem;font-weight:700;color:var(--white)}

/* ================================================================
   HERO DASHBOARD (right side — enhanced)
================================================================ */
.hero-visual{position:relative;z-index:2}
.hero-dashboard{
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.16);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 24px 64px rgba(0,0,0,.3),0 0 0 1px rgba(255,255,255,.06);
}
/* Top window bar */
.dash-topbar{
  background:rgba(0,0,0,.25);
  padding:.6rem 1rem;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.dash-dots{display:flex;gap:.4rem}
.dash-dot{width:10px;height:10px;border-radius:50%}
.dash-dot-r{background:#ff5f56}
.dash-dot-y{background:#ffbd2e}
.dash-dot-g{background:#27c93f}
.dash-title-bar{font-size:.75rem;color:rgba(255,255,255,.5);font-weight:600;letter-spacing:.04em}
.dash-live{display:flex;align-items:center;gap:.35rem;font-size:.7rem;color:#6bcf8a;font-weight:700}
.dash-live-dot{width:6px;height:6px;border-radius:50%;background:#6bcf8a;animation:pulse 1.5s infinite}

/* Dashboard body */
.dash-body{padding:1.25rem}

/* Sidebar + content row */
.dash-layout{display:flex;gap:.875rem}
.dash-sidebar{
  width:42px;min-width:42px;
  background:rgba(0,0,0,.2);
  border-radius:10px;
  padding:.5rem .35rem;
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
}
.dash-sb-icon{
  width:28px;height:28px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  transition:var(--transition);cursor:pointer;
}
.dash-sb-icon.active{background:var(--qb-green)}
.dash-sb-icon:not(.active){background:rgba(255,255,255,.07)}
.dash-sb-icon i{font-size:.95rem;color:rgba(255,255,255,.7)}
.dash-sb-icon.active i{color:white}
.dash-content{flex:1;display:flex;flex-direction:column;gap:.75rem;min-width:0}

/* Metric row */
.dash-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:.625rem}
.dash-metric{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.09);
  border-radius:10px;
  padding:.7rem .6rem;
  text-align:center;
}
.dash-metric-val{font-family:'Poppins',sans-serif;font-size:1.1rem;font-weight:800;color:var(--white);line-height:1}
.dash-metric-val span{color:var(--sand);font-size:.8rem}
.dash-metric-lbl{font-size:.6rem;color:rgba(255,255,255,.5);font-weight:500;margin-top:.2rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-metric-trend{font-size:.6rem;font-weight:700;color:#6bcf8a;margin-top:.15rem}

/* Chart area */
.dash-chart-wrap{
  background:rgba(0,0,0,.15);
  border:1px solid rgba(255,255,255,.07);
  border-radius:10px;
  padding:.875rem;
}
.dash-chart-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.625rem}
.dash-chart-title{font-size:.72rem;font-weight:700;color:rgba(255,255,255,.75)}
.dash-chart-period{font-size:.62rem;background:rgba(255,255,255,.08);color:rgba(255,255,255,.55);padding:.15rem .5rem;border-radius:100px}
.dash-bars{display:flex;align-items:flex-end;gap:.3rem;height:52px}
.db{flex:1;border-radius:3px 3px 0 0;transition:height .4s ease}
.db-lo{background:rgba(255,255,255,.12)}
.db-hi{background:linear-gradient(180deg,#4de030,#2ca01c)}
.db-md{background:rgba(44,160,28,.45)}

/* Month labels */
.dash-months{display:flex;gap:.3rem;margin-top:.35rem}
.dash-month{flex:1;text-align:center;font-size:.55rem;color:rgba(255,255,255,.35);font-weight:500}

/* Activity list */
.dash-activity{
  background:rgba(0,0,0,.12);
  border:1px solid rgba(255,255,255,.07);
  border-radius:10px;
  padding:.75rem;
}
.dash-act-head{font-size:.7rem;font-weight:700;color:rgba(255,255,255,.6);margin-bottom:.5rem;display:flex;align-items:center;gap:.35rem}
.dash-act-row{display:flex;align-items:center;gap:.6rem;padding:.35rem 0;border-bottom:1px solid rgba(255,255,255,.05)}
.dash-act-row:last-child{border-bottom:none}
.dash-act-icon{width:22px;height:22px;border-radius:5px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dai-green{background:rgba(44,160,28,.25)}
.dai-sand{background:rgba(200,149,106,.2)}
.dai-blue{background:rgba(91,155,213,.2)}
.dash-act-icon i{font-size:.7rem}
.dai-green i{color:#6bcf8a}
.dai-sand i{color:var(--sand)}
.dai-blue i{color:#7db3e0}
.dash-act-label{font-size:.68rem;color:rgba(255,255,255,.75);font-weight:500;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-act-time{font-size:.6rem;color:rgba(255,255,255,.35);flex-shrink:0}

/* Donut mini chart */
.dash-bottom-row{display:grid;grid-template-columns:1fr 1fr;gap:.625rem}
.dash-donut-wrap{
  background:rgba(0,0,0,.12);border:1px solid rgba(255,255,255,.07);
  border-radius:10px;padding:.75rem;display:flex;flex-direction:column;align-items:center;gap:.4rem;
}
.dash-donut-title{font-size:.68rem;font-weight:700;color:rgba(255,255,255,.6);align-self:flex-start}
.dash-donut-svg{width:56px;height:56px}
.dash-donut-legend{display:flex;flex-direction:column;gap:.3rem;width:100%}
.dash-legend-item{display:flex;align-items:center;gap:.4rem;font-size:.6rem;color:rgba(255,255,255,.6)}
.dl-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}

/* Status card */
.dash-status{
  background:rgba(0,0,0,.12);border:1px solid rgba(255,255,255,.07);
  border-radius:10px;padding:.75rem;
}
.dash-status-title{font-size:.68rem;font-weight:700;color:rgba(255,255,255,.6);margin-bottom:.5rem}
.dash-status-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:.35rem}
.dash-status-label{font-size:.65rem;color:rgba(255,255,255,.65)}
.dash-status-bar-wrap{width:70px;height:5px;background:rgba(255,255,255,.1);border-radius:3px;overflow:hidden}
.dash-status-bar{height:100%;border-radius:3px}
.dsb-green{background:linear-gradient(90deg,#2ca01c,#4de030)}
.dsb-sand{background:linear-gradient(90deg,var(--sand-dark),var(--sand))}
.dsb-blue{background:linear-gradient(90deg,#3a7bbd,#5b9bd5)}

/* Animated chart bars in hero */
@keyframes barRise {
  from{transform:scaleY(0);transform-origin:bottom}
  to{transform:scaleY(1);transform-origin:bottom}
}
.db{animation:barRise .8s ease forwards}
.db:nth-child(1){animation-delay:.1s}
.db:nth-child(2){animation-delay:.15s}
.db:nth-child(3){animation-delay:.2s}
.db:nth-child(4){animation-delay:.25s}
.db:nth-child(5){animation-delay:.3s}
.db:nth-child(6){animation-delay:.35s}
.db:nth-child(7){animation-delay:.4s}

/* ── WhatsApp float ── */
.whatsapp-float{position:fixed;bottom:1.75rem;right:1.75rem;z-index:900;width:52px;height:52px;border-radius:50%;background:#25d366;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(37,211,102,.4);transition:var(--transition)}
.whatsapp-float:hover{transform:scale(1.1);box-shadow:0 6px 28px rgba(37,211,102,.5)}

/* ── Scroll reveal ── */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:none}
.reveal-delay-1{transition-delay:.1s}
.reveal-delay-2{transition-delay:.2s}
.reveal-delay-3{transition-delay:.3s}
.reveal-delay-4{transition-delay:.4s}

/* ================================================================
   FOOTER
================================================================ */
footer{background:var(--charcoal);color:rgba(255,255,255,.75)}
.footer-top{padding:4rem 0 2.5rem;border-bottom:1px solid rgba(255,255,255,.07)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.5fr;gap:2.5rem}
/* Footer logo: just the AccSoft SVG, no brand text block */
.footer-logo-area{display:flex;align-items:center;margin-bottom:1rem}
.footer-logo-svg{height:52px;width:auto;display:block}
.footer-desc{font-size:.875rem;line-height:1.7;color:rgba(255,255,255,.5);max-width:280px;margin-bottom:1.25rem}
.footer-social{display:flex;gap:.625rem}
.social-btn{width:34px;height:34px;border-radius:var(--radius-sm);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;transition:var(--transition)}
.social-btn:hover{background:var(--green);border-color:var(--green)}
.social-btn i{font-size:.9rem;color:rgba(255,255,255,.65);transition:var(--transition)}
.social-btn:hover i{color:var(--white)}
.footer-heading{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--white);margin-bottom:1.25rem}
.footer-links{display:flex;flex-direction:column;gap:.625rem}
.footer-link{font-size:.875rem;color:rgba(255,255,255,.5);transition:var(--transition);text-decoration:none}
.footer-link:hover{color:var(--sand)}
.footer-contact-item{display:flex;align-items:flex-start;gap:.625rem;margin-bottom:.875rem}
.footer-contact-icon{width:30px;height:30px;min-width:30px;border-radius:6px;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center}
.footer-contact-icon i{font-size:.85rem;color:var(--sand)}
.footer-contact-text{font-size:.85rem;color:rgba(255,255,255,.55);line-height:1.5}
.footer-contact-text a{color:inherit;transition:var(--transition)}
.footer-contact-text a:hover{color:var(--sand)}
.footer-bottom{padding:1.5rem 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem}
.footer-copy{font-size:.8rem;color:rgba(255,255,255,.3)}
.footer-copy span{color:var(--sand)}
.footer-bottom-links{display:flex;gap:1.5rem}
.footer-bottom-link{font-size:.8rem;color:rgba(255,255,255,.3);transition:var(--transition);text-decoration:none}
.footer-bottom-link:hover{color:rgba(255,255,255,.65)}

/* ================================================================
   RESPONSIVE
================================================================ */
@media(max-width:1024px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .mission-vision-grid{grid-template-columns:1fr}
}
@media(max-width:768px){
  .nav-links,.btn-nav-cta{display:none}
  .hamburger{display:flex}
  .hero-visual{display:none}
  .grid-2{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .footer-top{padding:2.5rem 0 1.5rem}
}
@media(max-width:900px){.kf-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){
  .form-row{grid-template-columns:1fr}
  .kf-grid{grid-template-columns:repeat(2,1fr)}
}
@keyframes spin{to{transform:rotate(360deg)}}