/* ============================================================================
   BDShapers — Hero Builder preset styles. Self-contained (own tokens) so it
   renders identically on the live homepage and in the editor preview.
   Presets: .hbhero.p1..p5 . Colours overridable via inline --hh-* properties.
   ========================================================================== */
.hbhero{--hh-tx:#F8FAFC;--hh-mut:#9aa7bd;--hh-acc:#818CF8;--hh-acc2:#4F46E5;--hh-acc3:#2DD4BF;
  position:relative;font-family:var(--pub-font,'Outfit',sans-serif);color:var(--hh-tx);overflow:hidden;}
.hbhero .hh-wrap{max-width:1180px;margin:0 auto;padding:0 22px;position:relative;z-index:2;}
.hbhero .hh-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border:1px solid rgba(255,255,255,.14);border-radius:999px;
  font-size:13.5px;font-weight:600;color:var(--hh-tx);background:rgba(255,255,255,.05);}
.hbhero .hh-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--hh-acc3);box-shadow:0 0 12px var(--hh-acc3);}
.hbhero h1{font-weight:900;letter-spacing:-.03em;line-height:1.03;margin:22px 0 0;font-size:clamp(40px,6vw,72px);}
.hbhero h1 .grad{background:linear-gradient(100deg,var(--hh-acc),var(--hh-acc3));-webkit-background-clip:text;background-clip:text;color:transparent;}
.hbhero .hh-sub{max-width:640px;margin:22px 0 0;color:var(--hh-mut);font-size:19px;line-height:1.6;}
.hbhero .hh-btns{display:flex;gap:13px;flex-wrap:wrap;margin-top:30px;}
.hbhero .hh-btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-weight:700;font-size:15.5px;padding:14px 28px;border-radius:13px;transition:transform .15s,box-shadow .15s,background .15s;border:1px solid transparent;}
.hbhero .hh-btn-primary{color:#fff;background:linear-gradient(100deg,var(--hh-acc2),#7C3AED);box-shadow:0 14px 34px -12px rgba(124,58,237,.9);}
.hbhero .hh-btn-primary:hover{transform:translateY(-2px);}
.hbhero .hh-btn-ghost{color:var(--hh-tx);border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.04);}
.hbhero .hh-btn-ghost:hover{background:rgba(255,255,255,.1);}
.hbhero .hh-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:56px;}
.hbhero .hh-stat{border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:22px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));text-align:center;}
.hbhero .hh-stat .v{font-weight:900;font-size:34px;letter-spacing:-.02em;background:linear-gradient(100deg,var(--hh-acc),var(--hh-acc3));-webkit-background-clip:text;background-clip:text;color:transparent;}
.hbhero .hh-stat .l{color:var(--hh-mut);font-size:13.5px;margin-top:5px;}
.hbhero .hh-media img{width:100%;border-radius:20px;border:1px solid rgba(255,255,255,.1);box-shadow:0 40px 80px -30px rgba(0,0,0,.7);}
.hbhero .hh-media .ph{width:100%;aspect-ratio:4/3;border-radius:20px;border:1px dashed rgba(255,255,255,.18);background:rgba(255,255,255,.03);display:grid;place-items:center;color:var(--hh-mut);font-size:14px;}
/* decorative glow */
.hbhero .hh-glow{position:absolute;inset:0;z-index:1;pointer-events:none;}
.hbhero .hh-glow::before,.hbhero .hh-glow::after{content:'';position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;}
.hbhero .hh-glow::before{width:460px;height:460px;background:var(--hh-acc2);top:-120px;left:-80px;}
.hbhero .hh-glow::after{width:420px;height:420px;background:var(--hh-acc3);bottom:-160px;right:-60px;}

/* ---- Preset 1 — Centered ---- */
.hbhero.p1{padding:74px 0 44px;text-align:center;}
.hbhero.p1 .hh-sub{margin-left:auto;margin-right:auto;}
.hbhero.p1 .hh-btns{justify-content:center;}

/* ---- Preset 2 — Split (text left, media right) ---- */
.hbhero.p2{padding:64px 0;}
.hbhero.p2 .hh-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;}
@media(max-width:900px){.hbhero.p2 .hh-wrap{grid-template-columns:1fr;}.hbhero.p2 .hh-media{order:-1;}}

/* ---- Preset 3 — Gradient spotlight card ---- */
.hbhero.p3{padding:56px 0;}
.hbhero.p3 .hh-wrap{background:linear-gradient(135deg,color-mix(in srgb,var(--hh-acc2) 90%,#000),#7C3AED 60%,color-mix(in srgb,var(--hh-acc3) 80%,#000));
  border-radius:30px;padding:66px 48px;text-align:center;box-shadow:0 40px 90px -40px rgba(124,58,237,.9);}
.hbhero.p3 .hh-sub{margin-left:auto;margin-right:auto;color:rgba(255,255,255,.85);}
.hbhero.p3 .hh-btns{justify-content:center;}
.hbhero.p3 .hh-btn-primary{background:#fff;color:var(--hh-acc2);}
.hbhero.p3 .hh-glow{display:none;}

/* ---- Preset 4 — Background image + overlay ---- */
.hbhero.p4{padding:110px 0 96px;text-align:center;}
.hbhero.p4 .hh-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;}
.hbhero.p4 .hh-ov{position:absolute;inset:0;z-index:1;}
.hbhero.p4 .hh-sub{margin-left:auto;margin-right:auto;}
.hbhero.p4 .hh-btns{justify-content:center;}
.hbhero.p4 .hh-glow{display:none;}

/* ---- Preset 5 — Minimal left ---- */
.hbhero.p5{padding:70px 0 40px;}
.hbhero.p5 h1{font-size:clamp(38px,5vw,60px);}
.hbhero.p5 .hh-glow::after{display:none;}

@media(max-width:820px){.hbhero .hh-stats{grid-template-columns:repeat(2,1fr);}}