/* ============================================================
   Hostfory — WHMCS client-portal homepage styles
   Drop into /templates/six/css/hostfory-portal.css
   Scoped under .hf-portal so it won't fight the rest of the Six theme.
   ============================================================ */

.hf-portal{
  --bg-0:#0a0d11; --bg-1:#0f1318; --bg-2:#141a21; --bg-3:#1b232c;
  --line:#222a33; --line-2:#2c3742;
  --fg-0:#eef2f6; --fg-1:#c2cad3; --fg-2:#8a94a1; --fg-3:#5a6573;
  --accent:#28d17c; --accent-press:#22b86d; --accent-fg:#06150d;
  --accent-soft:rgba(40,209,124,.14);
  --hf-radius:12px; --hf-radius-lg:18px;
  background:var(--bg-0); color:var(--fg-0);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  line-height:1.5;
  /* pull full-bleed out of the Six theme's #main-body padding */
  margin:-20px -15px 0; padding:0;
}
.hf-portal *{box-sizing:border-box}
.hf-portal a{text-decoration:none}
.hf-portal .container{max-width:1200px;margin:0 auto;padding:0 28px}
.hf-portal .hf-mono{font-family:'JetBrains Mono','SFMono-Regular',Menlo,monospace}
.hf-portal .hf-accent{color:var(--accent)}
.hf-portal .hf-dim{color:var(--fg-3);font-family:'JetBrains Mono',monospace;font-size:11px}

/* buttons */
.hf-portal .hf-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 20px;border-radius:9px;font-size:14.5px;font-weight:600;cursor:pointer;border:1px solid transparent;transition:background .12s,border-color .12s;white-space:nowrap}
.hf-portal .hf-btn--primary{background:var(--accent);color:var(--accent-fg)}
.hf-portal .hf-btn--primary:hover{background:var(--accent-press);color:var(--accent-fg)}
.hf-portal .hf-btn--ghost{border-color:var(--line-2);color:var(--fg-0);background:transparent}
.hf-portal .hf-btn--ghost:hover{background:var(--bg-2)}
.hf-portal .hf-btn--lg{height:50px;padding:0 26px;font-size:16px}

/* hero */
.hf-portal .hf-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hf-portal .hf-hero__bg{position:absolute;inset:0;background:
  radial-gradient(800px 460px at 12% -10%, var(--accent-soft), transparent 60%),
  radial-gradient(700px 500px at 100% 0%, rgba(40,209,124,.06), transparent 55%)}
.hf-portal .hf-hero__grid{position:absolute;inset:0;background-image:
  linear-gradient(to right, rgba(255,255,255,.025) 1px, transparent 1px),
  linear-gradient(to bottom, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(700px 420px at 30% 20%, #000 55%, transparent 100%);
  mask-image:radial-gradient(700px 420px at 30% 20%, #000 55%, transparent 100%)}
.hf-portal .hf-hero__inner{position:relative;display:grid;grid-template-columns:1fr 420px;gap:48px;align-items:center;padding:84px 0 78px}
.hf-portal .hf-pill{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 13px;border-radius:999px;background:var(--accent-soft);border:1px solid rgba(40,209,124,.34);color:var(--accent);font-size:12.5px;font-weight:600;margin-bottom:22px}
.hf-portal .hf-pill__dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(40,209,124,.18)}
.hf-portal .hf-hero h1{font-size:clamp(38px,5vw,58px);font-weight:700;line-height:1.03;letter-spacing:-0.03em;margin:0 0 20px;color:var(--fg-0)}
.hf-portal .hf-lede{font-size:18px;line-height:1.55;color:var(--fg-1);max-width:560px;margin:0 0 28px}
.hf-portal .hf-hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:28px}
.hf-portal .hf-hero__bullets{display:flex;flex-wrap:wrap;gap:18px;font-size:13.5px;color:var(--fg-2)}
.hf-portal .hf-hero__bullets span{display:inline-flex;align-items:center;gap:7px}
.hf-portal .hf-hero__bullets svg, .hf-portal .hf-hero__bullets i{color:var(--accent)}

/* live card */
.hf-portal .hf-card{background:linear-gradient(180deg,var(--bg-2),var(--bg-1));border:1px solid var(--line-2);border-radius:var(--hf-radius-lg);padding:24px;box-shadow:0 28px 70px -24px rgba(0,0,0,.6)}
.hf-portal .hf-card__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.hf-portal .hf-eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;color:var(--fg-3);text-transform:uppercase;display:inline-flex;align-items:center;gap:8px}
.hf-portal .hf-big{display:flex;align-items:baseline;gap:8px}
.hf-portal .hf-big__v{font-family:'JetBrains Mono',monospace;font-size:56px;font-weight:600;color:var(--accent);letter-spacing:-0.04em;line-height:1}
.hf-portal .hf-big__u{font-size:15px;color:var(--fg-2)}
.hf-portal .hf-big__sub{font-size:12.5px;color:var(--fg-3);margin:6px 0 18px}
.hf-portal .hf-bars{display:flex;gap:3px;height:60px;align-items:flex-end;padding:7px 4px;background:var(--bg-1);border:1px solid var(--line);border-radius:9px;margin-bottom:16px}
.hf-portal .hf-bars i{flex:1;background:linear-gradient(180deg,var(--accent),rgba(40,209,124,.22));border-radius:1px;min-height:6%}
.hf-portal .hf-card__rows{display:grid;grid-template-columns:1fr 1fr;gap:6px 20px}
.hf-portal .hf-card__rows>div{display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--fg-2);padding:4px 0;border-bottom:1px dashed var(--line)}
.hf-portal .hf-card__rows>div:nth-last-child(-n+2){border-bottom:0}
.hf-portal .hf-card__rows b{color:var(--fg-0);font-weight:500}

/* sections */
.hf-portal .hf-section{padding:64px 0}
.hf-portal .hf-section--flush{padding-top:0}
.hf-portal .hf-section__head{margin-bottom:32px}
.hf-portal .hf-section__head h2{font-size:32px;font-weight:700;letter-spacing:-0.02em;color:var(--fg-0);margin:0}
.hf-portal .hf-section__head p{color:var(--fg-2);margin:8px 0 0;font-size:15px}

/* actions */
.hf-portal .hf-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.hf-portal .hf-action{display:flex;flex-direction:column;gap:14px;padding:24px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--hf-radius);transition:border-color .15s,transform .15s,background .15s}
.hf-portal .hf-action:hover{border-color:rgba(40,209,124,.4);transform:translateY(-2px);background:var(--bg-3)}
.hf-portal .hf-action__ic{width:46px;height:46px;border-radius:11px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.hf-portal .hf-action__t{font-size:17px;font-weight:600;color:var(--fg-0)}
.hf-portal .hf-action__d{font-size:13px;color:var(--fg-2);line-height:1.5}
.hf-portal .hf-action__arrow{margin-top:auto;color:var(--accent);font-size:14px;font-weight:600}

/* products */
.hf-portal .hf-prods{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.hf-portal .hf-prod{display:flex;flex-direction:column;gap:12px;padding:26px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--hf-radius);transition:border-color .15s,transform .15s}
.hf-portal .hf-prod:hover{border-color:rgba(40,209,124,.4);transform:translateY(-2px)}
.hf-portal .hf-prod.is-feat{border-color:rgba(40,209,124,.45);box-shadow:0 0 0 1px rgba(40,209,124,.18)}
.hf-portal .hf-prod__head{display:flex;align-items:center;justify-content:space-between;min-height:24px}
.hf-portal .hf-prod__tag{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--fg-3);letter-spacing:.06em}
.hf-portal .hf-badge{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:999px;background:var(--accent-soft);color:var(--accent)}
.hf-portal .hf-prod h3{font-size:20px;font-weight:600;letter-spacing:-0.01em;color:var(--fg-0);margin:0}
.hf-portal .hf-prod__metric{font-family:'JetBrains Mono',monospace;font-size:22px;font-weight:600;color:var(--fg-0)}
.hf-portal .hf-prod__copy{font-size:13.5px;color:var(--fg-2);line-height:1.5}
.hf-portal .hf-prod__foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.hf-portal .hf-prod__price{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--fg-2)}
.hf-portal .hf-prod__price b{color:var(--fg-0);font-size:17px}

/* band */
.hf-portal .hf-band{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;padding:28px 32px;background:linear-gradient(135deg,var(--accent-soft),var(--bg-2) 70%);border:1px solid var(--line-2);border-radius:var(--hf-radius-lg)}
.hf-portal .hf-band h3{font-size:21px;font-weight:600;margin:0 0 6px;color:var(--fg-0)}
.hf-portal .hf-band p{color:var(--fg-2);font-size:14px;margin:0}
.hf-portal .hf-band__cta{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.hf-portal .hf-status-dot{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--fg-1);font-family:'JetBrains Mono',monospace}
.hf-portal .hf-status-dot .d{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(40,209,124,.18)}

@media(max-width:980px){
  .hf-portal .hf-hero__inner{grid-template-columns:1fr;gap:32px;padding:56px 0}
  .hf-portal .hf-actions{grid-template-columns:1fr 1fr}
  .hf-portal .hf-prods{grid-template-columns:1fr}
  .hf-portal .hf-band{grid-template-columns:1fr}
}
@media(max-width:560px){
  .hf-portal .hf-actions{grid-template-columns:1fr}
}