/* ==========================================================================
   Hero Section — Premium Luxury Redesign (prefix: hp-)
   Keeps the existing #hero / .hg two-column grid and all JS-driven ids
   (htg, hcta, hpills, hchips, hph). Only visual language changes.
   Palette: #0973BA (blue) · #F36F34 (orange) · white
   ========================================================================== */

#hero.hp-hero{
  background:
    radial-gradient(ellipse 60% 50% at 85% 8%, rgba(243,111,52,.22) 0%, transparent 60%),
    linear-gradient(150deg,#052a40 0%,#075d94 42%,#0973ba 68%,#0a86d6 100%);
}

/* ---- blueprint grid overlay ---- */
#hero.hp-hero::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 30%, #000 0%, transparent 78%);
  mask-image:radial-gradient(ellipse 90% 80% at 50% 30%, #000 0%, transparent 78%);
  pointer-events:none;
  z-index:1;
}

/* ---- building silhouettes ---- */
.hp-skyline{
  position:absolute;
  left:0; right:0; bottom:0;
  height:140px;
  z-index:1;
  pointer-events:none;
  opacity:.5;
}
.hp-skyline path,.hp-skyline rect{fill:rgba(5,20,32,.5)}

/* ---- particles: warm accent on a few ---- */
#hero.hp-hero .pt:nth-child(3n){background:rgba(243,111,52,.35)}

/* ---- eyebrow / brand ---- */
#hero.hp-hero .h-brand{
  display:flex;
  align-items:baseline;
  gap:8px;
  font-weight:800;
}
#hero.hp-hero .h-brand .hp-hl{
  background:linear-gradient(100deg,#ffb088,var(--o500,#f97316));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
#hero.hp-hero .hew{
  background:rgba(243,111,52,.14);
  border-color:rgba(243,111,52,.34);
}
#hero.hp-hero .hew iconify-icon{color:#ffb088}

/* ---- headline ---- */
#hero.hp-hero .htg{
  font-family:'Poppins',sans-serif;
  font-size:clamp(1.05rem,1.6vw,1.22rem);
  font-weight:400;
  color:rgba(255,255,255,.86);
  line-height:1.8;
  max-width:520px;
}

/* ---- CTA buttons ---- */
#hero.hp-hero .hcta .bor{
  background:linear-gradient(100deg, var(--cu-blue,#0973ba), var(--cu-orange,#f36f34));
  background-size:160% 100%;
  background-position:0% 0%;
  box-shadow:0 16px 34px -10px rgba(243,111,52,.5);
  transition:background-position .5s ease, transform .25s, box-shadow .25s;
}
#hero.hp-hero .hcta .bor:hover{
  background-position:100% 0%;
  transform:translateY(-3px);
  box-shadow:0 20px 40px -10px rgba(243,111,52,.6);
}
#hero.hp-hero .hcta .bgh{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.36);
  transition:all .3s;
}
#hero.hp-hero .hcta .bgh:hover{
  background:rgba(255,255,255,.18);
  transform:translateY(-3px);
}

/* ---- floating glass quote card ---- */
.hp-quote{
  position:relative;
  max-width:480px;
  margin-top:8px;
  padding:22px 26px 22px 24px;
  border-radius:18px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.20);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  box-shadow:0 20px 50px -20px rgba(0,0,0,.4);
  animation:fsu .9s .62s var(--ea,cubic-bezier(.4,0,.2,1)) both;
}
.hp-quote::before{
  content:'';
  position:absolute;
  left:0; top:14px; bottom:14px;
  width:3px;
  border-radius:3px;
  background:linear-gradient(180deg, var(--cu-orange,#f36f34), var(--cu-blue,#0973ba));
}
.hp-qicon{
  color:rgba(243,111,52,.9);
  font-size:1.4rem;
  margin-bottom:8px;
  display:block;
}
.hp-quote p{
  font-size:.92rem;
  line-height:1.65;
  color:rgba(255,255,255,.92);
  font-style:italic;
  margin-bottom:10px;
}
.hp-quote cite{
  display:block;
  font-style:normal;
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:rgba(255,255,255,.6);
}

/* ---- visual: layered glowing circles + glass rings ---- */
.hp-hero .pfr{position:relative}
.hp-hero .pfr::before{
  content:'';
  position:absolute;
  inset:-60px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(243,111,52,.30) 0%, transparent 65%);
  filter:blur(6px);
  animation:hpPulse 5s ease-in-out infinite;
  z-index:0;
}
.hp-hero .pfr::after{
  content:'';
  position:absolute;
  inset:-30px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  z-index:1;
}
@keyframes hpPulse{
  0%,100%{opacity:.55; transform:scale(1)}
  50%{opacity:.9; transform:scale(1.06)}
}
.hp-hero .pr1{
  border-color:rgba(255,255,255,.30);
  z-index:2;
}
.hp-hero .pci{
  position:relative;
  z-index:2;
  border-color:rgba(255,255,255,.4);
  box-shadow:
    0 30px 70px rgba(0,0,0,.35),
    inset 0 0 0 2px rgba(255,255,255,.16),
    0 0 0 14px rgba(243,111,52,.08),
    0 0 60px rgba(243,111,52,.25);
}

/* ---- floating stats card (replaces the small pill badges) ---- */
.hpills{
  position:absolute;
  left:-36px;
  bottom:18px;
  z-index:3;
  display:flex;
  flex-direction:column;
  gap:0;
  width:250px;
  background:rgba(255,255,255,.94);
  border-radius:18px;
  padding:8px;
  box-shadow:0 24px 60px -18px rgba(5,20,32,.55);
  border:1px solid rgba(255,255,255,.6);
  backdrop-filter:blur(10px);
}
[data-theme="dark"] .hpills{background:rgba(8,32,56,.92); border-color:rgba(255,255,255,.1)}
.hpill{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 10px;
  border-radius:12px;
  background:transparent;
  border:0;
  backdrop-filter:none;
  color:var(--th);
  font-size:.82rem;
  font-weight:600;
}
.hpill:hover{background:var(--bg2); transform:none}
.hpill iconify-icon{
  flex-shrink:0;
  width:34px;
  height:34px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
  color:#fff;
  background:linear-gradient(135deg, var(--cu-blue,#0973ba), var(--cu-blue-d,#075d94));
}
.hpill:nth-child(2n) iconify-icon{
  background:linear-gradient(135deg, var(--cu-orange,#f36f34), var(--cu-orange-d,#dd5a20));
}
.hpill + .hpill{border-top:1px solid var(--brd)}

/* ---- sticky glass navbar accent ---- */
#nav{position:sticky; top:0}
#nav::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:2px;
  background:linear-gradient(90deg, var(--cu-blue,#0973ba), var(--cu-orange,#f36f34));
  opacity:.55;
}

/* ---- responsive ---- */
@media (max-width:1100px){
  .hpills{position:static; width:100%; margin-top:20px; box-shadow:var(--s2)}
}
@media (max-width:900px){
  .hp-quote{margin-left:auto; margin-right:auto}
  .hpills{max-width:400px; margin-left:auto; margin-right:auto}
}
@media (max-width:640px){
  .hp-skyline{height:80px}
  .hp-quote{padding:18px 20px}
}
@media (prefers-reduced-motion:reduce){
  .hp-hero .pfr::before{animation:none}
}