/* Billnet website — colours come from CSS variables injected by layout.php.
   Fallbacks below are Electric Blue + Cyan and are overridden per theme. */
:root{
  --primary:#1E63FF; --primary-d:#1547CC; --accent:#06B6D4;
  --ink:#0B1524; --muted:#5b6b7f; --bg:#ffffff; --soft:#eef4ff;
  --border:#e3e8ef; --dark:#0b1220; --radius:16px; --maxw:1140px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.muted{color:var(--muted)}
.center{text-align:center}
.hl{color:var(--accent)}
section{padding:70px 0}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:12px;font-weight:700;font-size:15px;border:1px solid transparent;cursor:pointer;transition:.15s}
.btn.primary{background:var(--primary);color:#fff}
.btn.primary:hover{background:var(--primary-d)}
.btn.ghost{background:#fff;border-color:var(--border);color:var(--ink)}
.btn.ghost:hover{background:var(--soft)}
.btn.light{background:#fff;color:var(--primary)}
.btn.danger{background:#dc2626;color:#fff}
.btn.lg{padding:14px 26px;font-size:16px}

/* Header */
.site-header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;gap:20px;height:70px}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:20px;color:var(--ink)}
.brand-mark{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--primary),var(--accent));display:grid;place-items:center;color:#fff}
.brand-logo{height:32px;width:auto;display:block}
.brand.light{color:#fff}
.nav-links{display:flex;align-items:center;gap:26px;margin:0 auto}
.nav-links a{color:var(--muted);font-weight:600;font-size:15px}
.nav-links a:hover{color:var(--ink)}
.nav-cta{display:flex;align-items:center;gap:10px}
.menu-toggle{display:none;background:none;border:none;color:var(--ink);cursor:pointer;padding:4px}

/* Hero */
.hero{background:linear-gradient(180deg,var(--soft),var(--bg));padding:70px 0 60px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.hero h1{font-size:52px;line-height:1.08;margin:0 0 20px;letter-spacing:-.025em;font-weight:800}
.hero .lead{font-size:18px;color:var(--muted);margin:0 0 26px;max-width:500px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-note{margin-top:26px;display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px}
.hero-note .dot{width:9px;height:9px;border-radius:50%;background:var(--primary)}
.hero-note a{color:var(--primary);text-decoration:underline}
.store-badge{display:inline-flex}
.store-badge svg{display:block;height:50px;width:auto}

/* Phone mockup */
.hero-phone{display:flex;justify-content:center}
.phone{width:300px;background:#0b1220;border-radius:42px;padding:12px;box-shadow:0 40px 80px -30px rgba(15,30,70,.5);position:relative}
.phone-notch{position:absolute;top:16px;left:50%;transform:translateX(-50%);width:120px;height:22px;background:#0b1220;border-radius:0 0 16px 16px;z-index:2}
.phone-screen{background:linear-gradient(180deg,#f6f9ff,#fff);border-radius:32px;padding:22px 16px 16px;min-height:560px;position:relative;overflow:hidden}
.ps-top{display:flex;justify-content:space-between;align-items:center;margin:8px 0 16px}
.ps-user{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px}
.ps-av{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--accent))}
.ps-bell{color:var(--muted)}
.ps-wallet{background:linear-gradient(135deg,var(--primary),var(--primary-d));color:#fff;border-radius:18px;padding:16px}
.ps-wl{color:rgba(255,255,255,.8);font-size:11px}
.ps-bal{font-size:24px;font-weight:800;margin:4px 0 12px}
.ps-actions{display:flex;gap:8px}
.ps-btn{background:rgba(255,255,255,.12);border-radius:9px;padding:8px 10px;font-size:11px;font-weight:600;flex:1;text-align:center}
.ps-qa-title{font-size:12px;font-weight:700;margin:16px 0 8px}
.ps-qa{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.ps-qi{background:#fff;border:1px solid var(--border);border-radius:12px;padding:10px 4px;display:flex;flex-direction:column;align-items:center;gap:5px;color:var(--primary);font-size:10px;font-weight:600}
.ps-qi span{color:var(--ink)}
.ps-toast{position:absolute;right:14px;top:150px;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 16px 30px -12px rgba(15,30,70,.35);padding:10px 12px;display:flex;gap:9px;align-items:center;max-width:200px}
.ps-check{width:22px;height:22px;border-radius:50%;background:#16a34a;display:grid;place-items:center;flex:0 0 22px}
.ps-toast b{display:block;font-size:12px}
.ps-toast span{font-size:10px;color:var(--muted)}
.ps-txns{margin-top:16px}
.ps-txt{font-size:12px;font-weight:700;margin-bottom:8px}
.ps-tx{display:flex;justify-content:space-between;font-size:12px;padding:8px 0;border-bottom:1px solid var(--border)}
.ps-amt{font-weight:700}

/* Join / services */
.join{display:flex;gap:16px;align-items:center;margin-bottom:40px}
.join-bar{width:4px;height:52px;background:var(--primary);border-radius:3px}
.join h2{font-size:30px;margin:0;font-weight:800;letter-spacing:-.02em}
.grid{display:grid;gap:20px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
.service{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:20px;transition:.15s}
.service:hover{transform:translateY(-3px);box-shadow:0 22px 44px -26px rgba(15,30,70,.25);border-color:transparent}
.svc-ic{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:12px;flex:0 0 46px}
.service h3{margin:0 0 5px;font-size:16px;color:var(--ink)}
.service p{margin:0;color:var(--muted);font-size:13.5px}
.head-underline{display:block;width:52px;height:3px;border-radius:3px;background:var(--primary);margin:12px auto 0}

/* Why us */
.why{background:#fff}
.section-head{text-align:center;margin-bottom:40px}
.pill{display:inline-block;background:var(--primary);color:#fff;font-weight:700;font-size:13px;padding:6px 16px;border-radius:999px;margin-bottom:14px}
.section-head h2{font-size:32px;margin:0;letter-spacing:-.02em}
.why{background:linear-gradient(180deg,#fff,var(--soft))}
.wcard{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:26px 20px;text-align:center}
.wic{display:inline-grid;place-items:center;width:58px;height:58px;border-radius:50%;background:#eef4ff;color:var(--primary);margin-bottom:14px}
.wcard h3{margin:0 0 8px;font-size:16px}
.wcard p{margin:0;color:var(--muted);font-size:13.5px}

/* API */
.api-sec{background:var(--soft)}
.api-card{background:linear-gradient(135deg,var(--dark),#15233d);color:#fff;border-radius:22px;padding:42px;display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center}
.api-card h2{font-size:28px;margin:0 0 12px}
.api-card p{color:#cbd7ea;margin:0 0 20px}
.code{background:#0a1120;border:1px solid #1c2c48;border-radius:14px;padding:18px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;color:#e2e8f0;overflow:auto;margin:0}
.code .g{color:var(--accent)}.code .b{color:#7aa2ff}.code .m{color:#f59e0b}

/* Download banner */
.download{background:var(--bg)}
.download .dl-banner{background:linear-gradient(135deg,#eef3ff,#f5f0ff);border:1px solid var(--border);color:var(--ink);border-radius:22px;padding:34px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.dl-copy{flex:1;min-width:240px}
.dl-banner h2{margin:0 0 8px;font-size:26px}
.dl-banner p{margin:0;color:var(--muted);max-width:360px}
.dl-qr{display:flex;flex-direction:column;align-items:center;gap:6px}
.dl-qr img{background:#fff;padding:8px;border-radius:12px;border:1px solid var(--border)}
.dl-qr span{font-size:12px;color:var(--muted)}
.dl-badges{display:flex;flex-direction:column;gap:10px}

/* Newsletter */
.newsletter{padding-top:0}
.nl-bar{background:var(--soft);border:1px solid var(--border);border-radius:20px;padding:22px 26px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.nl-copy{display:flex;align-items:center;gap:14px}
.nl-ic{width:46px;height:46px;border-radius:12px;background:#fff;color:var(--primary);display:grid;place-items:center;flex:0 0 46px}
.nl-copy b{font-size:16px}
.nl-form{display:flex;gap:10px;flex-wrap:wrap}
.nl-form input[type=email]{padding:12px 14px;border:1px solid var(--border);border-radius:12px;min-width:220px;font-size:14px}

/* Footer */
.site-footer{background:var(--dark);color:#9fb0c9;padding:52px 0 26px}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1.3fr;gap:26px}
.foot-brand .tagline{margin:12px 0 0;font-size:13px;color:#7f92ad;font-style:italic}
.foot-col h4{color:#fff;font-size:14px;margin:0 0 14px}
.foot-col a{display:block;color:#9fb0c9;font-size:13.5px;margin-bottom:9px}
.foot-col a:hover{color:#fff}
.foot-social{display:flex;gap:12px;margin-bottom:12px}
.foot-social a{color:#9fb0c9}.foot-social a:hover{color:#fff}
.foot-contact{display:block;color:#9fb0c9;font-size:13px;margin-bottom:6px}
.foot-bottom{margin-top:34px;padding-top:20px;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12.5px;color:#7f92ad}
.foot-bottom b{color:#cdd8e8}

/* Content pages */
.page-hero{background:var(--soft);padding:54px 0;border-bottom:1px solid var(--border)}
.page-hero h1{font-size:34px;margin:0 0 8px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}
.prose{max-width:820px}
.prose h2{font-size:21px;margin:26px 0 10px}
.prose p,.prose li{color:#33445c}
.card-form{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:26px}
.form-row{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.form-row.check{flex-direction:row;align-items:center;gap:10px}
.form-row.check input{width:auto}
.form-row label{font-weight:600;font-size:14px}
.form-row input,.form-row textarea{padding:12px;border:1px solid var(--border);border-radius:12px;font-size:15px;font-family:inherit}
.form-row textarea{min-height:120px;resize:vertical}
.alert{padding:14px 16px;border-radius:12px;margin-bottom:16px;display:none}
.alert.ok{background:#dcfce7;color:#166534;display:block}
.alert.bad{background:#fee2e2;color:#991b1b;display:block}
.hp{position:absolute;left:-9999px}

@media(max-width:960px){
  .hero-grid{grid-template-columns:1fr}
  .hero-phone{order:-1}
  .grid.cols-3{grid-template-columns:repeat(2,1fr)}
  .grid.cols-4{grid-template-columns:repeat(2,1fr)}
  .api-card{grid-template-columns:1fr;padding:30px}
  .foot-top{grid-template-columns:1fr 1fr}
  .two-col{grid-template-columns:1fr}
}
@media(max-width:680px){
  .nav-links{display:none;position:absolute;top:70px;left:0;right:0;background:#fff;flex-direction:column;padding:16px 20px;border-bottom:1px solid var(--border);gap:14px;margin:0}
  .nav-links.open{display:flex}
  .menu-toggle{display:block;margin-left:auto}
  .nav-cta .btn.ghost{display:none}
  .hero h1{font-size:38px}
  .join h2,.section-head h2,.dl-banner h2,.api-card h2{font-size:25px}
  .grid.cols-3,.grid.cols-4{grid-template-columns:1fr}
  section{padding:50px 0}
}