/*
Theme Name: NguvuTech
Description: NguvuTech fintech landing page theme — Invoicing, Bookkeeping, Payroll & Fintech Consulting edition.
Version: 2.0
Author: NguvuTech
Text Domain: nguvutech
*/

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#fff !important;color:#1E293B}
body{font-family:'Inter',sans-serif;overflow-x:hidden;scroll-behavior:smooth}

/* NAV */
.nav{background:#fff;padding:0 48px;height:64px;display:flex;align-items:center;position:sticky;top:0;z-index:100;box-shadow:0 1px 0 rgba(0,0,0,.06)}
.logo{font-size:20px;font-weight:700;color:#0A1628;letter-spacing:-.5px;white-space:nowrap;margin-right:48px}
.logo span{color:#1E6FFF}
.nav-mid{display:flex;align-items:center;gap:32px;flex:1}
.nav-mid a{color:#64748B;font-size:14px;text-decoration:none;font-weight:500;white-space:nowrap;transition:color .2s}
.nav-mid a:hover{color:#1E6FFF}
.nav-end{display:flex;align-items:center;gap:14px;margin-left:auto}

.btn-contact{
  background-color:#1E6FFF !important;
  color:#ffffff !important;
  border:none;padding:10px 22px;border-radius:10px;
  font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px;
  text-decoration:none;font-family:'Inter',sans-serif;line-height:1;
  opacity:1 !important;
}
.btn-contact:hover,.btn-contact:focus,.btn-contact:active{
  background-color:#1E6FFF !important;color:#ffffff !important;opacity:1 !important;
}

/* HERO */
.hero-wrap{padding:52px 48px 0;background:#fff}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:flex-start;max-width:1100px;margin:0 auto}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;background:#EFF6FF;border:1px solid #BFDBFE;color:#1D4ED8;font-size:12px;font-weight:600;padding:5px 14px;border-radius:6px;margin-bottom:14px}
.hero-grid h1{font-size:44px;font-weight:700;letter-spacing:-1.5px;line-height:1.1;color:#0A1628;margin-bottom:14px}
.hero-grid h1 span{color:#1E6FFF}
.hero-desc{color:#64748B;font-size:15px;line-height:1.75;margin-bottom:14px;max-width:420px}
.sp-row{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.sp-avs{display:flex}
.sp-av{width:26px;height:26px;border-radius:50%;border:2px solid #fff;margin-left:-7px;font-size:9px;font-weight:700;color:#fff;display:flex;align-items:center;justify-content:center}
.sp-row p{font-size:12px;color:#64748B}.sp-row strong{color:#0A1628}

.hero-contact-btn{
  background-color:#1E6FFF !important;color:#ffffff !important;
  border:none;padding:13px 26px;border-radius:50px;
  font-size:14px;font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;gap:10px;
  box-shadow:0 4px 16px rgba(30,111,255,.28);
  font-family:'Inter',sans-serif;line-height:1;opacity:1 !important;
}
.hero-contact-btn:hover,.hero-contact-btn:focus,.hero-contact-btn:active{
  background-color:#1E6FFF !important;color:#ffffff !important;opacity:1 !important;
}
.hero-contact-btn .arr{
  width:22px;height:22px;background-color:rgba(255,255,255,.22);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:#ffffff;
}

/* PHONE MOCKUP */
.hero-right{position:relative;display:flex;justify-content:center;padding-top:8px}
.phone-frame{background:#0A1628;border-radius:38px;width:218px;padding:12px;border:7px solid #0A1628;box-shadow:0 24px 52px rgba(10,22,40,.22);animation:float 3s ease-in-out infinite alternate}
@keyframes float{from{transform:translateY(0)}to{transform:translateY(-10px)}}
.phone-screen{background:#fff;border-radius:26px;overflow:hidden;min-height:370px}
.phone-top{background:#1E6FFF;padding:16px 14px 24px}
.phone-top p{color:rgba(255,255,255,.7);font-size:11px;margin-bottom:3px}
.phone-top h2{color:#fff;font-size:20px;font-weight:700}
.phone-top .sub{font-size:10px;color:rgba(255,255,255,.6);margin-top:2px}
.pcard{background:#fff;margin:0 10px;margin-top:-12px;border-radius:13px;padding:10px;border:.5px solid #E2E8F0;box-shadow:0 4px 12px rgba(0,0,0,.06)}
.crow{display:flex;justify-content:space-between;margin-bottom:4px}
.crow .lbl{color:#94A3B8;font-size:10px}.crow .val{color:#0A1628;font-size:11px;font-weight:600}
.sbtn{width:100%;background:#1E6FFF;color:#fff;border:none;border-radius:9px;padding:8px;font-size:11px;font-weight:600;cursor:pointer;margin-top:7px}
.ptxs{padding:10px 11px}
.txhdr{font-size:9px;color:#94A3B8;font-weight:600;margin-bottom:6px;letter-spacing:.5px}
.ptx{display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-bottom:.5px solid #F1F5F9}
.ptx:last-child{border:none}
.ptxl{display:flex;align-items:center;gap:6px}
.ptic{width:23px;height:23px;border-radius:6px;display:flex;align-items:center;justify-content:center}
.ptn{font-size:10px;font-weight:500;color:#0A1628}.ptd{font-size:9px;color:#94A3B8}.pta{font-size:10px;font-weight:600}

/* FLOATING BADGES */
.fbadge{position:absolute;background:#fff;border-radius:12px;border:.5px solid #E2E8F0;box-shadow:0 8px 24px rgba(0,0,0,.1);padding:9px 13px;z-index:10}
.fb-r{right:-6px;top:100px;animation:fbr 3s ease-in-out infinite alternate}
.fb-l{left:-14px;bottom:120px;animation:fbl 3.5s 1s ease-in-out infinite alternate}
@keyframes fbr{from{transform:translateY(0)}to{transform:translateY(-7px)}}
@keyframes fbl{from{transform:translateY(0)}to{transform:translateY(7px)}}
.fbv{font-size:14px;font-weight:700;color:#0A1628;margin-bottom:1px}
.fbl2{font-size:10px;color:#94A3B8}.fbs{font-size:10px;margin-top:1px}

/* SHARED SECTIONS */
.section{padding:36px 48px;background:#fff}
.sc{text-align:center;margin-bottom:24px}
.tag{display:inline-block;background:#EFF6FF;color:#1E6FFF;font-size:11px;font-weight:600;padding:3px 12px;border-radius:4px;margin-bottom:10px;letter-spacing:.8px}
.sc h2{font-size:32px;font-weight:700;letter-spacing:-1px;color:#0A1628;margin-bottom:8px}
.sc p{color:#64748B;font-size:14px;max-width:440px;margin:0 auto}

/* BENTO GRID */
.bento{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bc{background:#F8FAFF;border:.5px solid #E2E8F0;border-radius:18px;padding:24px;overflow:hidden;opacity:0;transform:translateY(36px);transition:opacity .55s ease,transform .55s ease}
.bc.vis{opacity:1;transform:translateY(0)}
.bc.blue{background:#1E6FFF}.bc.dark{background:#0A1628}
.bc h3{font-size:16px;font-weight:700;color:#0A1628;margin-bottom:7px}
.bc p{font-size:13px;color:#64748B;line-height:1.65}
.bc.blue h3,.bc.blue p,.bc.dark h3{color:#fff}
.bc.dark p{color:#94A3B8}
.bico{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.mv{margin-top:14px;border-radius:9px;padding:11px}
.mv-lt{background:#F1F5F9}.mv-wt{background:rgba(255,255,255,.12)}
.mbars{display:flex;gap:3px;align-items:flex-end;height:48px}
.mbar{border-radius:3px 3px 0 0;flex:1}
.pr-row{display:flex;justify-content:space-between;margin-bottom:6px;opacity:0;transform:translateX(-8px);transition:opacity .4s,transform .4s}
.pr-row.sh{opacity:1;transform:translateX(0)}
.gg{display:grid;grid-template-columns:repeat(8,1fr);gap:3px;margin-top:10px}
.gd{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.12)}
.gd.a{animation:ba 1.5s infinite alternate}
.gd.b{animation:bb 2s .5s infinite alternate}
@keyframes ba{from{opacity:.25;background:#60A5FA}to{opacity:1;background:#60A5FA}}
@keyframes bb{from{opacity:.25;background:#22C55E}to{opacity:1;background:#22C55E}}
.cl{opacity:0;transform:translateX(-6px);transition:opacity .35s,transform .35s}
.cl.sh{opacity:1;transform:translateX(0)}

/* REVIEWS */
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.rc{background:#F8FAFF;border:.5px solid #E2E8F0;border-radius:14px;padding:20px;opacity:0;transform:translateY(28px);transition:opacity .5s,transform .5s}
.rc.vis{opacity:1;transform:translateY(0)}
.rc-stars{color:#FBBF24;font-size:13px;margin-bottom:10px}
.rc p{color:#334155;font-size:13px;line-height:1.7;margin-bottom:14px}
.rc-auth{display:flex;align-items:center;gap:10px}
.rav{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:#fff}
.rname{font-size:13px;font-weight:600;color:#0A1628}.rrole{font-size:11px;color:#94A3B8}

/* GRADIENT CTA BANNER (used twice — middle + contact) */
.banner-wrap{padding:0 48px 36px}
.cta-banner{background:linear-gradient(130deg,#0D1FA8 0%,#1253CC 40%,#0E9EBF 100%);padding:52px 40px;text-align:center;border-radius:24px;position:relative;overflow:hidden}
.cta-banner::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 78% 50%,rgba(255,255,255,.06),transparent 55%);pointer-events:none}
.cta-banner h2{color:#fff;font-size:36px;font-weight:700;letter-spacing:-1px;margin-bottom:12px;position:relative}
.cta-banner p{color:rgba(255,255,255,.72);font-size:15px;max-width:500px;margin:0 auto 28px;position:relative}
.btn-banner{display:inline-flex;align-items:center;gap:10px;background:#1E6FFF;color:#fff;border:none;padding:13px 28px;border-radius:50px;font-size:14px;font-weight:600;cursor:pointer;box-shadow:0 4px 20px rgba(0,0,0,.2);position:relative}
.barr{width:22px;height:22px;background:rgba(255,255,255,.2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px}

/* FORMLAYER / PAGELAYER CONTACT FORM — styled to match the gradient banner */
/* #nguvutech-contact-form#nguvutech-contact-form is a doubled-ID selector —
   a valid CSS specificity trick to out-rank Pagelayer's own field styles
   without relying on source order (belt-and-braces alongside the JS
   fallback in js/main.js, which forces the same values as inline styles). */
.formlayer-embed{max-width:420px;margin:0 auto;position:relative;text-align:left}
#nguvutech-contact-form#nguvutech-contact-form label{
  display:block !important;
  text-align:left !important;
  color:#BFDBFE !important;
  font-weight:600 !important;
  font-size:12px !important;
  letter-spacing:.2px !important;
  margin-bottom:6px !important;
  text-transform:none !important;
}
#nguvutech-contact-form#nguvutech-contact-form input[type="text"],
#nguvutech-contact-form#nguvutech-contact-form input[type="email"],
#nguvutech-contact-form#nguvutech-contact-form input[type="tel"],
#nguvutech-contact-form#nguvutech-contact-form input[type="number"],
#nguvutech-contact-form#nguvutech-contact-form textarea,
#nguvutech-contact-form#nguvutech-contact-form select{
  background:#ffffff !important;
  background-color:#ffffff !important;
  border:1px solid rgba(255,255,255,.4) !important;
  color:#0A1628 !important;
  border-radius:10px !important;
  padding:10px 13px !important;
  width:100% !important;
  font-family:'Inter',sans-serif !important;
  font-size:13px !important;
  box-shadow:0 2px 8px rgba(0,0,0,.08) !important;
}
#nguvutech-contact-form#nguvutech-contact-form textarea{
  min-height:90px !important;
  resize:vertical !important;
}
#nguvutech-contact-form#nguvutech-contact-form input::placeholder,
#nguvutech-contact-form#nguvutech-contact-form textarea::placeholder{
  color:#94A3B8 !important;
}
#nguvutech-contact-form#nguvutech-contact-form button,
#nguvutech-contact-form#nguvutech-contact-form input[type="submit"]{
  background-color:#1E6FFF !important;
  color:#ffffff !important;
  border:none !important;
  padding:13px 28px !important;
  border-radius:50px !important;
  font-weight:600 !important;
  font-size:14px !important;
  cursor:pointer !important;
  opacity:1 !important;
  box-shadow:0 4px 20px rgba(0,0,0,.2) !important;
}
#nguvutech-contact-form#nguvutech-contact-form button:hover,
#nguvutech-contact-form#nguvutech-contact-form button:focus,
#nguvutech-contact-form#nguvutech-contact-form input[type="submit"]:hover,
#nguvutech-contact-form#nguvutech-contact-form input[type="submit"]:focus{
  background-color:#1E6FFF !important;
  color:#ffffff !important;
  opacity:1 !important;
  transform:translateY(-1px);
}
/* Best-guess selectors for the duplicate field-name caption seen under each
   input — if this doesn't clear it, inspect the gray text in your browser
   dev tools and send the exact class name so it can be targeted precisely. */
#nguvutech-contact-form#nguvutech-contact-form small,
#nguvutech-contact-form#nguvutech-contact-form .pagelayer-form-field-title,
#nguvutech-contact-form#nguvutech-contact-form .pagelayer-form-caption,
#nguvutech-contact-form#nguvutech-contact-form .pagelayer-field-name,
#nguvutech-contact-form#nguvutech-contact-form .pagelayer-form-hint,
#nguvutech-contact-form#nguvutech-contact-form [class*="field-name"],
#nguvutech-contact-form#nguvutech-contact-form [class*="form-caption"]{
  display:none !important;
}

/* REAL RESULTS */
.res-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rn{background:#F8FAFF;border:.5px solid #E2E8F0;border-radius:14px;padding:24px;text-align:center;opacity:0;transform:translateY(28px);transition:opacity .5s,transform .5s}
.rn.vis{opacity:1;transform:translateY(0)}
.big{font-size:40px;font-weight:700;color:#1E6FFF;letter-spacing:-2px;margin-bottom:6px}
.rn h3{font-size:14px;font-weight:600;color:#0A1628;margin-bottom:6px}
.rn p{font-size:12px;color:#64748B;line-height:1.6}

/* INVOICING & BOOKKEEPING FLOW */
.flow-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;max-width:1060px;margin:0 auto}
.flow-text h2{font-size:30px;font-weight:700;letter-spacing:-1px;color:#0A1628;margin-bottom:10px}
.flow-text p{color:#64748B;font-size:14px;line-height:1.8;margin-bottom:20px}
.fcklist{display:flex;flex-direction:column;gap:12px}
.fchk{display:flex;gap:10px;align-items:flex-start;opacity:0;transform:translateY(10px);transition:opacity .4s,transform .4s}
.fchk.sh{opacity:1;transform:translateY(0)}
.fchi{width:20px;height:20px;border-radius:50%;background:#EFF6FF;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
.fchk h4{color:#0A1628;font-size:13px;font-weight:600;margin-bottom:2px}
.fchk p{color:#64748B;font-size:12px;line-height:1.6}
.flow-vis{background:#F8FAFF;border:.5px solid #E2E8F0;border-radius:18px;overflow:hidden;opacity:0;transform:translateY(24px);transition:opacity .55s,transform .55s}
.flow-vis.vis{opacity:1;transform:translateY(0)}
.fvtop{background:#fff;padding:10px 18px;display:flex;align-items:center;gap:7px;border-bottom:.5px solid #E2E8F0}
.mcd{width:9px;height:9px;border-radius:50%}
.fvtop span{color:#94A3B8;font-size:11px;margin-left:5px}
.fvbody{padding:16px}
.frow{display:flex;align-items:center;gap:6px;margin-bottom:10px}
.fst{background:#fff;border:.5px solid #E2E8F0;border-radius:9px;padding:9px 10px;flex:1}
.fst label{font-size:10px;color:#94A3B8;display:block;margin-bottom:2px}
.fst span{font-size:11px;color:#0A1628;font-weight:600}
.farr{color:#1E6FFF;font-size:14px;font-weight:700}
.fmeta{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px}
.fm{background:#fff;border:.5px solid #E2E8F0;border-radius:9px;padding:10px}
.fm label{font-size:10px;color:#94A3B8;display:block;margin-bottom:3px}
.fm span{font-size:13px;font-weight:700;color:#1E6FFF}
.fsettled{margin-top:10px;background:#F0FDF4;border:.5px solid #BBF7D0;border-radius:9px;padding:10px;display:flex;justify-content:space-between;align-items:center}
.fsettled .ok{color:#15803D;font-size:12px;font-weight:600}
.fsettled .ft{font-size:10px;color:#64748B}
.txsm{display:flex;justify-content:space-between;padding:7px 9px;background:#fff;border-radius:7px;border:.5px solid #E2E8F0;margin-top:6px;opacity:0}
.txsm.sh{animation:slr .4s ease forwards}
@keyframes slr{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:translateX(0)}}
.txsm span{font-size:11px;color:#64748B}
.txsm .ok{color:#22C55E;font-weight:600}.txsm .pend{color:#FBBF24;font-weight:600}
.pdot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#22C55E;margin-right:5px;animation:pd 1.5s ease-in-out infinite}
@keyframes pd{0%,100%{transform:scale(1)}50%{transform:scale(1.5);opacity:.5}}

/* FOOTER */
.footer{background:#060D1A;padding:18px 48px;text-align:center}
.footer p{color:#475569;font-size:12px}

/* RESPONSIVE FALLBACK */
@media (max-width:900px){
  .hero-grid,.bento,.rev-grid,.res-grid,.flow-grid{grid-template-columns:1fr}
  .nav-mid{display:none}
  .hero-wrap,.section,.nav{padding-left:20px;padding-right:20px}
  .banner-wrap{padding-left:20px;padding-right:20px}
}