/* iHUB STORES | V7.11 — polished navigation stages + contact footer.
   Loaded LAST to retain all previously approved layout and responsive edits. */

/* Journey buttons: concise premium navigation tiles, visually distinct yet balanced. */
.hero-stage-footer {
  width: min(1160px, calc(100% - 64px));
  padding-block: 6px 4px;
}
.hero-stage-footer .hero-phase-strip {
  direction: ltr !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.25vw, 17px) !important;
  max-width: 100%;
}
.hero-stage-footer .hero-phase-card,
.hero-stage-footer .hero-phase-card:nth-child(2) {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  min-height: 86px;
  min-width: 0;
  gap: 12px;
  padding: 13px 17px !important;
  overflow: hidden;
  isolation: isolate;
  border-radius: 21px;
  border: 1px solid rgba(135,196,248,.63);
  background: linear-gradient(115deg, #0d3c96 0%, #075bc7 68%, #0875dc 100%);
  color: #fff;
  box-shadow: 0 10px 23px rgba(8,69,150,.15), inset 0 1px 0 rgba(255,255,255,.2);
  text-align: left;
  text-decoration: none;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
.hero-stage-footer .hero-phase-card:nth-child(2) {
  border-color: #85c9ff;
  background: linear-gradient(120deg, rgba(255,255,255,.98), rgba(232,246,255,.96));
  color: #0c3471;
  box-shadow: 0 10px 23px rgba(5,91,190,.13), inset 0 1px 0 #fff;
}
.hero-stage-footer .hero-phase-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 45%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 95% 0%, rgba(158,236,255,.23), transparent 72%);
}
.hero-stage-footer .hero-phase-card:nth-child(2)::before {
  background: radial-gradient(ellipse at 95% 0%, rgba(94,184,255,.18), transparent 72%);
}
/* Override the earlier broad "span" selector: only the number is circular. */
.hero-stage-footer .hero-phase-card > span.hero-phase-number,
.hero-stage-footer .hero-phase-card:nth-child(2) > span.hero-phase-number {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  padding: 0;
  border-radius: 13px;
  background: rgba(255,255,255,.16);
  color: #fff;
  border: 1px solid rgba(255,255,255,.27);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .025em;
}
.hero-stage-footer .hero-phase-card:nth-child(2) > span.hero-phase-number {
  background: linear-gradient(135deg,#0877eb,#0547b7);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 5px 12px rgba(5,98,200,.2);
}
.hero-stage-footer .hero-phase-card > span.hero-phase-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1 1 auto;
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  align-items: flex-start;
  text-align: left;
  color: inherit !important;
}
.hero-stage-footer .hero-phase-card .hero-phase-label strong {
  display: block;
  color: inherit !important;
  max-width: 100%;
  font-size: clamp(15px, 1.32vw, 20px);
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: -.025em;
  white-space: normal;
  overflow-wrap: normal;
}
.hero-stage-footer .hero-phase-card .hero-phase-label small {
  display: block;
  color: rgba(239,249,255,.8);
  font-size: clamp(10px,.78vw,11px);
  font-weight: 500;
  line-height: 1.32;
  white-space: normal;
}
.hero-stage-footer .hero-phase-card:nth-child(2) .hero-phase-label small {color: #527296 !important;}
.hero-stage-footer .hero-phase-card > span.hero-phase-arrow {
  display: grid;
  place-items: center;
  flex: 0 0 29px;
  width: 29px;
  height: 29px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.23);
  background: rgba(255,255,255,.13);
  color: #fff;
  box-shadow: none;
  font-size: 17px;
  line-height: 1;
  transition: transform .25s ease, background .25s ease;
}
.hero-stage-footer .hero-phase-card:nth-child(2) > span.hero-phase-arrow {
  background: #e6f4ff;
  color: #0865dc;
  border-color: #cce9ff;
}
@media (hover:hover) and (pointer:fine) {
  .hero-stage-footer .hero-phase-card:hover,
  .hero-stage-footer .hero-phase-card:nth-child(2):hover {
    transform: translateY(-5px);
    box-shadow: 0 17px 30px rgba(7,79,163,.24);
    border-color: #69caff;
  }
  .hero-stage-footer .hero-phase-card:hover .hero-phase-arrow {transform: translate(2px, -2px);}
}
.hero-stage-footer .hero-phase-card:focus-visible {
  outline: 3px solid #18b8ff;
  outline-offset: 4px;
}

/* Footer: separate contact row to keep original logo alignment unchanged. */
.footer .footer-contacts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px,1.6vw,19px);
  padding-block: 0 28px;
}
.footer .footer-contact-card {
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 0;
  padding: 19px 21px;
  border: 1px solid #d8e9fa;
  border-radius: 20px;
  background: linear-gradient(130deg, #f9fcff, #eff7ff);
  box-shadow: 0 7px 22px rgba(17,86,168,.045);
  color: #0a387c;
  text-decoration: none;
  direction: ltr;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.footer .footer-contact-icon {
  flex: 0 0 47px;
  width: 47px;
  height: 47px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(135deg,#0e77ed,#0646b7);
  box-shadow: 0 7px 14px rgba(7,91,183,.18);
}
.footer .footer-contact-icon svg {width: 23px;height: 23px;}
.footer .footer-contact-copy {display: flex;flex-direction: column;gap: 5px;min-width: 0;flex: 1 1 auto;align-items: flex-start;text-align: left;}
.footer .footer-contact-label {font-size: 13px;font-weight: 800;line-height: 1.35;color: #64809f;}
.footer .footer-contact-copy strong {max-width: 100%;font-size: clamp(14px,1.35vw,18px);font-weight: 850;line-height: 1.35;letter-spacing: -.015em;color: #0d367b;overflow-wrap: anywhere;}
.footer .footer-contact-arrow {flex: 0 0 31px;width: 31px;height: 31px;display: grid;place-items: center;border-radius: 50%;background: #fff;color: #0874d7;font-size: 16px;}
@media(hover:hover) and (pointer:fine) {
  .footer .footer-contact-card:hover {transform: translateY(-3px);border-color: #79caff;box-shadow: 0 13px 24px rgba(10,80,170,.11);}
}
.footer .footer-contact-card:focus-visible {outline: 3px solid #118efa;outline-offset: 3px;}
[dir="rtl"] .footer .footer-contact-label {font-family: 'Segoe UI', Tahoma, Arial, sans-serif;}

@media(max-width:900px) {
  .hero-stage-footer {width: min(100%, calc(100% - 38px));}
  .hero-stage-footer .hero-phase-card,
  .hero-stage-footer .hero-phase-card:nth-child(2) {min-height: 77px;padding: 11px 11px !important;gap: 8px;}
  .hero-stage-footer .hero-phase-card > span.hero-phase-number,
  .hero-stage-footer .hero-phase-card:nth-child(2) > span.hero-phase-number {width: 36px;height: 36px;flex-basis: 36px;border-radius: 11px;}
  .hero-stage-footer .hero-phase-card > span.hero-phase-arrow {display: none;}
  .hero-stage-footer .hero-phase-card .hero-phase-label strong {font-size: clamp(12px,1.8vw,16px);}
  .hero-stage-footer .hero-phase-card .hero-phase-label small {font-size: 10px;}
}
@media(max-width:740px) {
  .hero-stage-footer {width: calc(100% - 24px) !important;padding-block: 2px 4px;}
  .hero-stage-footer .hero-phase-strip {gap: 7px !important;}
  .hero-stage-footer .hero-phase-card,
  .hero-stage-footer .hero-phase-card:nth-child(2) {
    min-height: 72px !important;
    padding: 10px 7px !important;
    border-radius: 15px;
    gap: 5px !important;
    justify-content: center;
  }
  .hero-stage-footer .hero-phase-card > span.hero-phase-number,
  .hero-stage-footer .hero-phase-card:nth-child(2) > span.hero-phase-number {
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    border-radius: 9px;
    font-size: 9px;
  }
  .hero-stage-footer .hero-phase-card > span.hero-phase-label {flex: 0 1 auto;align-items: flex-start;}
  .hero-stage-footer .hero-phase-card .hero-phase-label strong {
    font-size: clamp(11px, 2.9vw, 13px) !important;
    line-height: 1.2 !important;
    font-weight: 900;
    overflow-wrap: normal;
  }
  .hero-stage-footer .hero-phase-card .hero-phase-label small {display: none !important;}
  .footer .footer-contacts {grid-template-columns: 1fr;gap: 11px;padding-bottom: 26px;}
  .footer .footer-contact-card {padding: 15px 16px;border-radius: 17px;gap: 12px;}
  .footer .footer-contact-icon {width: 43px;height: 43px;flex-basis: 43px;border-radius: 13px;}
  .footer .footer-contact-copy strong {font-size: clamp(14px,3.9vw,17px);}
  .footer .footer-contact-label {font-size: 12px;}
  .footer .footer-contact-arrow {margin-inline-start: auto;}
}
@media(max-width:365px) {
  .hero-stage-footer .hero-phase-card,
  .hero-stage-footer .hero-phase-card:nth-child(2) {padding: 8px 5px !important;gap: 4px !important;min-height: 70px !important;}
  .hero-stage-footer .hero-phase-card > span.hero-phase-number,
  .hero-stage-footer .hero-phase-card:nth-child(2) > span.hero-phase-number {width: 22px;height: 22px;flex-basis: 22px;font-size: 8px;}
  .hero-stage-footer .hero-phase-card .hero-phase-label strong {font-size: clamp(9px,2.5vw,11px) !important;}
}
@media(prefers-reduced-motion: reduce) {
  .hero-stage-footer .hero-phase-card,
  .hero-stage-footer .hero-phase-card .hero-phase-arrow,
  .footer .footer-contact-card {transition: none !important;}
}