/* =========================================================
   HOME HERO - 2 photos changing behind (soft blur), text left,
   4 business buttons right. Loaded only on the home page.
   ========================================================= */
.hb{position:relative;padding:104px 0 30px;background:linear-gradient(180deg,#eef2fa 0%,#e7ecf7 100%)}
.hb__box{position:relative;isolation:isolate;overflow:hidden;width:min(100% - 2 * clamp(18px,4vw,40px),1240px);margin:0 auto;height:calc(clamp(620px,43vw,720px) - 134px);border-radius:28px;background:#0b1428;box-shadow:0 40px 80px -40px rgba(10,20,60,.55);display:flex;animation:hbBox 1s cubic-bezier(.2,.8,.2,1) both}

/* ---- photos: one goes, the next comes ---- */
.hb__slides{position:absolute;inset:0;z-index:-1}
.hb__slide{position:absolute;inset:-12px;background-size:cover;background-position:center;filter:blur(3px) saturate(1.1);will-change:transform,opacity}
.hb__slide{opacity:0;animation:hbFade 15s linear infinite;animation-delay:calc(var(--i) * 3s - 1s)}
.hb__shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,13,32,.9) 0%,rgba(7,13,32,.72) 42%,rgba(7,13,32,.45) 70%,rgba(7,13,32,.55) 100%),linear-gradient(0deg,rgba(7,13,32,.45) 0%,rgba(7,13,32,0) 40%)}

/* 5 photos, 3s each, 1s cross-fade */
@keyframes hbFade{
  0%{opacity:0;transform:scale(1.1)}
  6.67%{opacity:1}
  20%{opacity:1}
  26.67%{opacity:0;transform:scale(1.02)}
  100%{opacity:0;transform:scale(1.02)}
}
@keyframes hbBox{from{opacity:0;transform:translateY(30px) scale(.98)}to{opacity:1;transform:none}}

/* ---- layout ---- */
.hb__in{position:relative;flex:1;display:grid;grid-template-columns:1.1fr minmax(320px,.9fr);gap:clamp(30px,4vw,70px);align-items:center;padding:clamp(36px,4vw,64px) clamp(28px,4vw,64px)}

/* ---- text ---- */
.hb__copy{color:#fff;max-width:560px}
.hb__kicker{display:inline-flex;align-items:center;gap:12px;margin:0 0 18px;font-size:13px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#8fb2ff;opacity:0;animation:hbUp .7s ease .35s forwards}
.hb__kicker span{width:34px;height:2px;background:#5b8cff;border-radius:2px}
.hb__title{margin:0 0 20px;font-family:var(--f-body);font-size:clamp(40px,4.2vw,66px);line-height:1;font-weight:800;letter-spacing:-.045em;color:#fff}
.hb__ln{display:block;overflow:hidden;padding-bottom:.04em}
.hb__ln>span{display:inline-block;transform:translateY(110%);animation:hbLine .9s cubic-bezier(.2,.8,.2,1) forwards}
.hb__ln:nth-child(1)>span{animation-delay:.3s}
.hb__ln:nth-child(2)>span{animation-delay:.4s}
.hb__ln:nth-child(3)>span{animation-delay:.5s}
.hb__ln--blue{color:#6d9bff}
.hb__lead{margin:0 0 30px;font-size:clamp(15px,1.1vw,17px);line-height:1.7;color:rgba(255,255,255,.8);opacity:0;animation:hbUp .7s ease .65s forwards}
.hb__btns{display:flex;flex-wrap:wrap;gap:12px;opacity:0;animation:hbUp .7s ease .8s forwards}
.hb__btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:12px;font-weight:700;font-size:15.5px;text-decoration:none;transition:background .3s,border-color .3s,color .3s,translate .3s}
.hb__btn--main{background:#1f5eff;color:#fff;box-shadow:0 14px 30px -10px rgba(31,94,255,.7)}
.hb__btn--main:hover{background:#3a72ff;translate:0 -2px}
.hb__btn--line{border:1.5px solid rgba(255,255,255,.4);color:#fff}
.hb__btn--line:hover{border-color:#fff;background:rgba(255,255,255,.08)}

/* ---- 4 business buttons ---- */
.hb__biz{display:flex;flex-direction:column;gap:12px}
.hb__b{--c:#1f5eff;position:relative;display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#fff;text-decoration:none;overflow:hidden;opacity:0;transform:translateX(40px);animation:hbIn .8s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(.55s + var(--d) * .1s);transition:background .35s,border-color .35s,translate .35s}
.hb__b::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c);transform:scaleY(0);transition:transform .35s}
.hb__b--software{--c:#ef4444}
.hb__b--media{--c:#e9a10f}
.hb__b--web{--c:#3b82f6}
.hb__b--hardware{--c:#22c55e}
.hb__ic{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--c);color:#fff;font-size:17px;box-shadow:0 10px 22px -8px var(--c)}
.hb__tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.hb__tx b{font-size:15.5px;font-weight:700;line-height:1.25}
.hb__tx small{font-size:12.5px;line-height:1.4;color:rgba(255,255,255,.66)}
.hb__go{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.3);font-size:12px;transition:background .3s,border-color .3s,translate .3s}
.hb__b:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.3);translate:-4px 0}
.hb__b:hover::before{transform:scaleY(1)}
.hb__b:hover .hb__go{background:var(--c);border-color:var(--c);translate:3px 0}
.hb__b:focus-visible{outline:3px solid var(--c);outline-offset:2px}


@keyframes hbUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes hbLine{to{transform:none}}
@keyframes hbIn{to{opacity:1;transform:none}}

/* ---- tablets ---- */
@media (max-width:1024px){
  .hb__box{height:auto;min-height:calc(clamp(620px,43vw,720px) - 134px)}
  .hb__in{grid-template-columns:1fr;gap:34px}
  .hb__biz{display:grid;grid-template-columns:1fr 1fr}
  .hb__shade{background:linear-gradient(180deg,rgba(7,13,32,.82) 0%,rgba(7,13,32,.7) 50%,rgba(7,13,32,.8) 100%)}
}
/* ---- phones ---- */
@media (max-width:640px){
  .hb{padding-top:96px}
  .hb__box{border-radius:22px}
  .hb__in{padding:34px 20px 36px}
  .hb__biz{grid-template-columns:1fr}
  .hb__btn{flex:1 1 100%;justify-content:center}
  .hb__b{padding:12px 14px}
}
@media (prefers-reduced-motion:reduce){
  .hb__box,.hb__slide,.hb__kicker,.hb__lead,.hb__btns,.hb__b,.hb__ln>span{animation:none!important;opacity:1;transform:none}
}
/* photo box goes edge to edge (no empty space on the sides) */
.hb__box{width:100%;border-radius:0;box-shadow:none}
.hb__in{padding-left:max(clamp(18px,4vw,40px),calc((100% - 1240px) / 2 + 40px));padding-right:max(clamp(18px,4vw,40px),calc((100% - 1240px) / 2 + 40px))}
@media (max-width:640px){.hb__box{border-radius:0}.hb__in{padding-left:20px;padding-right:20px}}
.hb{padding-bottom:0}
.hb__box{height:calc(clamp(620px,43vw,720px) - 104px)}
@media (max-width:1024px){.hb__box{height:auto;min-height:calc(clamp(620px,43vw,720px) - 104px)}}

/* one colour for all icons: cyan, matching the light in the photos */
.hb__b,.hb__b--software,.hb__b--media,.hb__b--web,.hb__b--hardware{--c:#22c7e6}
.hb__ic{background:linear-gradient(145deg,#4fe0f5 0%,#0e93c4 100%);box-shadow:0 10px 22px -8px rgba(20,170,220,.85),inset 0 1px 0 rgba(255,255,255,.35)}
/* icons in black */
.hb__ic{background:linear-gradient(145deg,#2a2f3a 0%,#05070b 100%);color:#fff;border:1px solid rgba(255,255,255,.12);box-shadow:0 10px 22px -8px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.12)}
/* hover colour = the header button blue */
.hb__b,.hb__b--software,.hb__b--media,.hb__b--web,.hb__b--hardware{--c:#1b2f8f}
.hb__b:hover .hb__go{background:#1b2f8f;border-color:#1b2f8f;color:#fff}
/* header arrows: same blue as the "Explore Our Solutions" button */
.hb__b,.hb__b--software,.hb__b--media,.hb__b--web,.hb__b--hardware{--c:#1f5eff}
.hb__b:hover .hb__go{background:#1f5eff;border-color:#1f5eff;color:#fff}

/* each photo gets its own start time (works in Safari too) */
.hb__slide{-webkit-animation:hbFade 15s linear infinite;animation:hbFade 15s linear infinite}
.hb__slide:nth-child(1){-webkit-animation-delay:-1s;animation-delay:-1s}
.hb__slide:nth-child(2){-webkit-animation-delay:2s;animation-delay:2s}
.hb__slide:nth-child(3){-webkit-animation-delay:5s;animation-delay:5s}
.hb__slide:nth-child(4){-webkit-animation-delay:8s;animation-delay:8s}
.hb__slide:nth-child(5){-webkit-animation-delay:11s;animation-delay:11s}
@-webkit-keyframes hbFade{0%{opacity:0;-webkit-transform:scale(1.1)}6.67%{opacity:1}20%{opacity:1}26.67%{opacity:0;-webkit-transform:scale(1.02)}100%{opacity:0;-webkit-transform:scale(1.02)}}

/* big screens (wider than 1440px): header keeps the same size; the photo is shown
   at the same size as on a 1440px screen (not zoomed), the sides fade into a soft copy */
@media (min-width:1441px){
  .hb__slide{background-size:cover}
  .hb__slide::after{content:"";position:absolute;inset:0;background-image:inherit;background-repeat:no-repeat;background-position:center;background-size:1460px auto;
    -webkit-mask-image:linear-gradient(90deg,transparent calc(50% - 760px),#000 calc(50% - 560px),#000 calc(50% + 560px),transparent calc(50% + 760px));
            mask-image:linear-gradient(90deg,transparent calc(50% - 760px),#000 calc(50% - 560px),#000 calc(50% + 560px),transparent calc(50% + 760px))}
  .hb__slides::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,rgba(7,13,32,.55) 0,rgba(7,13,32,0) calc(50% - 560px),rgba(7,13,32,0) calc(50% + 560px),rgba(7,13,32,.45) 100%)}
}