/* BillXPro — Enterprise Static Site (v1) */
:root{
  --bg:#f7fbfb;
  --panel:#ffffff;
  --text:#0b2f2f;
  --muted:#4f6f6f;
  --line:rgba(0,128,128,.18);
  --accent:#0fa4a9;
  --accent-soft:#e6f7f7;
  --shadow:0 12px 30px rgba(0,0,0,.08);
  --r:18px;
  --max:1160px;
  --font:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial
}
*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:var(--font);background:linear-gradient(180deg, #f7fbfb 0%, #eef7f7 100%);color:var(--text);line-height:1.55}
a{color:inherit;text-decoration:none}a:hover{opacity:.96}
.container{max-width:var(--max);margin:0 auto;padding:0 22px}
.site-header{position:sticky;top:0;z-index:50;backdrop-filter:saturate(160%) blur(10px);background:rgba(255,255,255,.88);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:14px}
.brand{display:flex;flex-direction:column;gap:2px}.brand-mark{font-weight:800;font-size:18px}.brand-sub{font-size:12px;color:var(--muted)}
.nav{display:flex;gap:18px;align-items:center}.nav a{color:var(--muted);font-size:14px;padding:8px 10px;border-radius:10px}.nav a.active,.nav a:hover{color:var(--text);background:rgba(255,255,255,.06)}
.header-ctas{display:flex;gap:10px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:14px;padding:10px 14px;font-size:14px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text);cursor:pointer}
.btn:hover{background:rgba(255,255,255,.06)}
.btn-primary{background:linear-gradient(135deg, #0fa4a9, #38c2c7);border-color:#0fa4a9;color:#ffffff}
.btn-secondary{background:rgba(255,255,255,.04)}
.btn-ghost{background:transparent}
.icon-btn{width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--text);cursor:pointer}
.icon-btn:hover{background:rgba(255,255,255,.06)}
.nav-toggle{display:none;flex-direction:column;gap:4px;background:transparent;border:none;cursor:pointer}
.nav-toggle span{width:24px;height:2px;background:rgba(255,255,255,.75);border-radius:2px}
.section{padding:64px 0}.section-muted{background:linear-gradient(180deg, transparent, rgba(255,255,255,.03) 15%, rgba(255,255,255,.03) 85%, transparent)}
.hero{padding:70px 0 40px}.hero-slim{padding:52px 0 26px}
h1,h2,h3{line-height:1.18;margin:0 0 14px}h1{font-size:44px;letter-spacing:-.5px}h2{font-size:28px}h3{font-size:18px}
.lead{color:var(--muted);font-size:18px;max-width:880px}.fineprint{color:rgba(232,237,245,.68);font-size:12px}
.grid{display:grid;gap:16px}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--shadow)}
.card p{margin:10px 0 0;color:var(--muted);font-size:14px}
.badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.badge{font-size:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);padding:6px 10px;border-radius:999px;color:var(--text)}
.callout{margin-top:18px;padding:14px 16px;border-radius:var(--r);border:1px solid rgba(91,184,255,.28);background:var(--accent-soft);color:var(--text)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.bullets{margin:10px 0 0;padding-left:18px;color:var(--muted)}.bullets li{margin:6px 0}
.divider{height:1px;background:var(--line);margin:20px 0}
.site-footer{border-top:1px solid var(--line);background:rgba(11,15,20,.85);padding:34px 0}
.footer-grid{display:grid;grid-template-columns:1.2fr .9fr .9fr;gap:18px}
.footer-brand{font-weight:800}.footer-sub{color:var(--muted);font-size:13px;margin-top:4px}
.footer-title{font-weight:700;margin-bottom:10px;color:var(--text)}
.footer-links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.footer-links a{color:var(--muted);font-size:14px}.footer-links a:hover{color:var(--text)}
.footer-bottom{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:10px;color:var(--muted);font-size:13px}
.link{color:var(--accent)}
label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--text)}
input,select,textarea{border-radius:14px;padding:12px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.22);color:var(--text);outline:none}
input:focus,select:focus,textarea:focus{border-color:rgba(91,184,255,.55)}
.form-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.modal{position:fixed;inset:0;display:none;z-index:80}.modal[aria-hidden="false"]{display:block}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.58)}
.modal-card{position:relative;max-width:780px;margin:80px auto;background:#ffffff;border:1px solid rgba(255,255,255,.14);border-radius:26px;box-shadow:var(--shadow);padding:18px}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.modal-head h2{font-size:20px;margin:0}
@media (max-width:980px){h1{font-size:36px}.grid-2,.grid-3{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}.nav{display:none}.nav-toggle{display:flex}.header-ctas{display:none}.nav.open{display:flex;position:absolute;top:64px;left:0;right:0;flex-direction:column;background:#ffffff;border-bottom:1px solid var(--line);padding:12px 18px 18px}}


/* Hero layout */
.hero-wrap{display:grid; grid-template-columns: 1.1fr .9fr; gap:22px; align-items:center}
.hero-visual{
  background: linear-gradient(180deg, rgba(15,164,169,.08), rgba(15,164,169,.03));
  border:1px solid rgba(0,128,128,.14);
  border-radius: 24px;
  padding:14px;
  box-shadow: var(--shadow);
}
.hero-visual img{width:100%; height:auto; display:block}
.hero-visual .caption{margin-top:10px; color:var(--muted); font-size:13px}

@media (max-width:980px){
  .hero-wrap{grid-template-columns:1fr}
  .hero-visual{order:2}
}
/* Footer color system override */
.site-footer{
  color: rgba(255,255,255,.85);
}

.site-footer .footer-brand,
.site-footer .footer-title{
  color: #e8ffff;
}

.site-footer .footer-sub,
.site-footer .footer-bottom,
.site-footer p,
.site-footer span,
.site-footer small,
.site-footer div{
  color: rgba(220,245,245,.75);
}

.site-footer .footer-links a{
  color: rgba(220,245,245,.75);
}

.site-footer .footer-links a:hover,
.site-footer .link{
  color: #38c2c7;
}