/* Blesta home page styles - upload to your Blesta root folder */
.vx{--p:#2563eb;--p2:#1d4ed8;--ink:#0f172a;--mut:#64748b;--line:#e2e8f0;--bg:#f8fafc;
    font-family:inherit;color:var(--ink);line-height:1.5}
.vx *{box-sizing:border-box}
.vx a{text-decoration:none}
/* hero */
.vx-hero{background:linear-gradient(135deg,#0b1f4d 0%,#1e40af 60%,#2563eb 100%);
    color:#fff;border-radius:14px;padding:56px 28px;text-align:center;margin-bottom:36px}
.vx-hero h1{font-size:34px;font-weight:700;margin:0 0 8px;color:#fff}
.vx-hero p{font-size:17px;opacity:.85;margin:0 0 26px}
.vx-search{display:flex;max-width:640px;margin:0 auto;background:#fff;border-radius:10px;
    padding:6px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.vx-search input{flex:1;border:0;outline:0;padding:12px 14px;font-size:16px;color:var(--ink);background:transparent;min-width:0}
.vx-search button{border:0;background:var(--p);color:#fff;font-weight:600;padding:0 22px;
    border-radius:8px;cursor:pointer;font-size:15px}
.vx-search button:hover{background:var(--p2)}
.vx-tlds{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:18px}
.vx-tlds span{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
    border-radius:20px;padding:4px 12px;font-size:13px}
.vx-tlds b{font-weight:700}
/* sections */
.vx-h2{font-size:24px;font-weight:700;text-align:center;margin:0 0 6px}
.vx-sub{text-align:center;color:var(--mut);margin:0 0 24px}
.vx-grid{display:grid;gap:20px;margin-bottom:40px}
.vx-g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.vx-g4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.vx-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:26px;
    transition:.2s;display:flex;flex-direction:column}
.vx-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(15,23,42,.08);border-color:#c7d2fe}
.vx-ico{width:48px;height:48px;border-radius:10px;background:#eff6ff;color:var(--p);
    display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.vx-ico svg{width:24px;height:24px}
.vx-card h3{font-size:19px;font-weight:700;margin:0 0 6px;color:var(--ink)}
.vx-card p{color:var(--mut);font-size:14px;margin:0 0 16px;flex:1}
.vx-price{font-size:14px;color:var(--mut);margin-bottom:14px}
.vx-price b{font-size:22px;color:var(--ink)}
.vx-btn{display:inline-block;text-align:center;background:var(--p);color:#fff !important;
    font-weight:600;padding:10px 18px;border-radius:8px;font-size:14px}
.vx-btn:hover{background:var(--p2)}
.vx-help{text-align:center;align-items:center}
.vx-help .vx-ico{margin:0 auto 12px}
.vx-help h3{font-size:16px}
.vx-help p{margin:0}
/* account strip */
.vx-acct{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:24px;margin-bottom:20px}
.vx-acct h3{margin:0 0 14px;font-size:18px;font-weight:700}
.vx-links{display:flex;flex-wrap:wrap;gap:10px}
.vx-links a{background:#fff;border:1px solid var(--line);border-radius:8px;padding:9px 16px;
    color:var(--ink);font-size:14px;font-weight:500}
.vx-links a:hover{border-color:var(--p);color:var(--p)}
@media(max-width:576px){.vx-hero h1{font-size:26px}.vx-search{flex-direction:column}
    .vx-search button{padding:12px}}

/* ---------- Full-width layout fixes ----------
   This file is loaded only by the CMS home page,
   so these rules don't affect other Blesta pages. */
body{overflow-x:hidden}
/* .vx sits directly in a Bootstrap flex .row and was shrinking to its content */
.row > .vx{flex:0 0 100%;width:100%;max-width:100%}
/* full-bleed hero, edge to edge like WHMCS */
.vx-hero{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
    border-radius:0;padding:80px 20px}
/* hide the grey "Home" page-title bar */
.title{display:none}